导航栏

文章

  • 首页
  • 查看历史

Subscriptions

  • 俗野
  • 清风扶醉月
  • 国民帅男
  • 光般少年
更多作者

导航栏

  • 设置
  • 登陆
    • QQ登陆 微博登陆
  • 其他
    • 图标库
  • 夜间模式
  • 退出登录

【亲测】xm-select 下拉框搜索不存在则创建条目以及动态数据调用 【亲测】


今天项目上用到了select的下拉框,需要的功能是 下拉框能输入能多选,

正好再layui的第三方组件找到了xm-select的组件,超级好用,超级推荐,

select的功能基本是发掘到极致!

这里科技小锅盖就是遇到了自己已保存的相关的值和所需类型的值需要在前台渲染上,

遇到的问题,浪费了好一会才解决,这里看看吧!


1、已保存的值和公共的类型组合成一个数组

//行业赛道
$hangye=AuthType::where("")->where("type",2)->select();
foreach ($hangye as $k=>$v){
    $hangye_arr1[]=$v["title"];
}
foreach ($hangye_arr1 as $k=>$v){
    $new1[$k]["value"]=$v;
    $new1[$k]["name"]=$v;
}

$hangye_arr2=explode(",",$list["hangye"]);
foreach ($hangye_arr2 as $k=>$v){
    $new2[$k]["value"]=$v;
    $new2[$k]["name"]=$v;
    $new2[$k]["selected"]=true;
}

// 整体思路就是把已选的和未选的组成一个数组再通过in_array筛选
//(筛选后会出现重复的数组过滤一下就可以)
$new_array=array_merge($new2,$new1);


2、把组合好的数组再遍历一下,在通过in_array 筛选一下组成新的数组。

(1)、组成的新数组已选的值selected为true的值会有重复用array_unique去除重复的数组。

 (2)、去重的数组会有新的键名,再用array_values重新获取一下值就可以。

foreach ($new_array as $k=>$v){
    if(in_array($v["value"], $hangye_arr2))
    {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=true;
    }
    else {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=false;
    }
}
//二维数组去重并获取去重后value值
$new_arr=array_values(array_unique($tmp_arr, SORT_REGULAR));

return json_return("0","success",$new_arr);

//这里一定要看好xm-select所需要的的返回值的参数


3、前端调取xm-select的相关(我这里调用的是)

这里需要调用两个js、 xm-select的就是和axios的js 否则无法远程调取参数


//想创建就必须要开启本地搜索
xmSelect.render({	//...
	filterable: true,
	create: function(val, arr){		
        //返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
		return {
			name: '创建-' + val,
			value: val
		}
	}
})

axios({	method: 'get',	
        url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
}).then(response => {	var res = response.data;
	demo2.update({		
        data: res.data,		
        autoRow: true,
	})
});


到这里就结束啦,xm-select还是很推荐的,麻烦一点的就是后端的数据的组合稍微麻烦一些,不过还好啦,哈哈哈



推荐

阿里云网盘内测期间邀请码发放完毕 接下来即将公测

2020-12-07 09:16:11

【亲测】科技小锅盖教你配置一台Linux虚拟机【亲测】

2020-07-29 13:36:44

天玑820到底有多强?Redmi 10X Pro评测

2020-06-02 15:31:09

谷歌似乎阻止自家应用在搭载海思麒麟处理器的安卓设备上安装

2020-12-02 09:33:08

虾米音乐将在2021年2月不再提供服务

2021-01-08 16:45:00

【亲测】数组任意位置插入数据(一维数组或者二维数组都可以)【亲测】

2020-07-20 14:09:17

【亲测】linux中添加ftp用户,并设置相应的权限【亲测】

2020-07-29 13:31:46

努比亚120W氘锋氮化镓充电器重磅发布,各家数码产品皆可快冲

2020-07-24 11:01:31

全球首款QLED显示屏笔记本 三星Galaxy Book Flex/Ion系列正式发布

2020-06-02 14:19:42

iPhone 12e再次曝光,售价或不到4000人民币,你信吗!

2020-07-29 13:25:03

陕ICP备20008812号 | 科技小锅盖 保留所有权利 | 网站地图 |
    友情链接:
  • 米醋儿
  • 笔墨
  • 新浪微博