导航栏

文章

  • 首页
  • 查看历史

导航栏

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

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


作者:科技小锅盖             时间:2021-2-01 18:07             站长QQ:1540217035

今天项目上用到了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还是很推荐的,麻烦一点的就是后端的数据的组合稍微麻烦一些,不过还好啦,哈哈哈



推荐

【亲测】使用Guzzle执行HTTP请求-转载【亲测】

2021-08-04 18:46:17

慎更!iOS 14.7.1更新翻车:iPhone 11等机型频繁无信号

2021-08-20 11:23:03

昨夜今晨:抖音、微信读书被判侵害用户信息 苹果Q3财报亮眼 斗鱼主播遭天价索赔

2020-07-31 10:30:04

科技小锅盖小程序正式上线了,可以过来看看

2023-02-23 17:12:13

【亲测】简单二维数组转成树状图小算法 【亲测】

2023-05-16 09:17:23

imagettftext(): Could not find/open font 搞定

2023-03-17 18:16:00

【亲测】值得推荐的composer包文件分享持续更新中【亲测】

2021-03-31 16:14:11

Redmi Note10 Pro评测:核心配置旗舰标准 体验均衡无短板

2021-05-27 21:19:47

淘宝规定自12月15日手机商品不得出现美版/有锁等非国行版本

2020-12-02 09:34:26

苹果确认部分iPhone 11存在触摸问题

2020-12-07 09:15:18

陕ICP备2021003534号-1 科技小锅盖 保留所有权利 网站地图 站长QQ:1540217035
    友情链接:
  • 米醋儿
  • 笔墨