学习《layui从鱼到渔》二,升级下拉,编写一个级联选择组件

分享 未结 精帖
5 3100
AggerChen
AggerChen 2017-12-29
悬赏:20飞吻
上一篇分享中,我编写了一个select省市区级联选择,用于选择行政区域,想要看的移步这里
http://fly.layui.com/jie/21127/
但是呢,想想还是不够爽啊~~~看着社区里有小伙伴说为何不做成下拉级联选择呢?说干就干!![思考] 然后充分参考了贤心的下拉组件实现原理和汲取上次编写的经验~不过还是费了我很多时间做出来,先给大家看看效果吧。

具有本地data渲染,也有url接口渲染。类似table的配置方式和方法调用。

1.html
由于是html组件,所以必须包含在一个form里面,配置一个id就可以了
<form class="layui-form layui-form-pane" >
<div id="selectId" class="layui-form-item"></div>
</form>

2.js
layui.config({
base: '<%=basePath%>/dist/plugins/layui/modules/' //配置本地插件位置
});

var $,$form;
layui.use(['form','linkSelect'], function() {
$ = layui.jquery;
$form = layui.form;
linkSelect = layui.linkSelect; //像引用其他插件一样引用linkSelect

//本地数据渲染
link = linkSelect.render({
id:'addRegion', //插件唯一标识
elem: '#selectId', //html容器
data:citys,
lableName:'本地渲染:', //自定义表单名称 默认:'级联选择'
placeholderText:'请选择...', //自定义holder名称 默认:'请选择'
replaceId:"ids", //替换字段id 默认id
replaceName:"names", //替换字段名称 默认name
replaceChildren:"childrens", //替换字段名称 默认 children
disabled:false, //初始禁用 默认false
selectedArr:[3,32,323,3232], //默认选中数组
selected:function(item,dom){
//选中回调函数
console.log(item);
console.log(dom);
}
});
});
3.方法
获取值:
方式1: linkSelect.getValue("addRegion"); //通过插件id获取
方式2: link.getValue(); //通过初始化插件返回的插件对象 直接获取
重载:
方式1:linkSelect.reload("addRegion",{selectedArr:[1,11]}); //通过传入插件id和options配置
方式2:link.reload({selectedArr:[1,11],disabled:true}); //直接通过插件对象传入options配置
插件重载可以传入配置清单里的任意配置参数。
以上演示的是通过本地数据渲染,下面则是通过url异步渲染。由于异步渲染无法提前知晓节点是否有下级节点,所以会出现这种效果。

配置清单如下:
无论是本地渲染还是url渲染,插件默认会保存已经加载的数据到本地缓存,所以在下次访问同样的节点则会优先访问缓存数据,缓存不存在才调用后台接口。
暂时没有发现什么bug,欢迎各位提出bug和问题,让我们共同进步~~大家可以下载测试页面在自己项目中测试一下

linkSelect.js码云地址: https://gitee.com/Agger/codes/z4ot2bf0sj1q8v5p9nk6a35
测试页面地址: https://gitee.com/Agger/codes/9nbl8cmxg2p170iztrj5d48
回帖
本帖已设置禁止回复