layui扩展组件zTreeSelectM,下拉树多选
程序员文章站
2022-06-23 22:51:19
项目介绍 项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-select-ext不支持树结构,wujiawei0926-treeselect不支持多选,于是干脆仿照moret ......
项目介绍
项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-select-ext不支持树结构,wujiawei0926-treeselect不支持多选,于是干脆仿照moretop-layui-select-ext动手写了一个组件,选择ztree而没有选择layuitree的主要原因是layuitree暂不支持父子关系取消。
渲染代码
var _ztreeselectm = ztreeselectm({ elem: '#ztreeselectm',//元素容器【必填】 data: './json/1.json',//候选数据【必填】 width: 600, //设置了长度 selected: [3,6,29],//默认值 max: 3,//最多选中个数,默认5 name: 'field',//input的name 不设置与选择器相同(去#.) delimiter: ',',//值的分隔符 field: { idname: 'id', titlename: 'name' },//候选项数据的键名 ztreesetting: { //ztree设置 check: { enable: true, chkboxtype: { "y": "", "n": "" } }, data: { simpledata: { enable: false }, key: { name: 'name', children: 'children' } } } });
获取选中数据代码
form.on('submit(demo)',function(data){ console.log('ztreeselectm 当前选中的值名:',_ztreeselectm.selected); console.log('ztreeselectm 当前选中的值:',_ztreeselectm.values); console.log('ztreeselectm 当前选中的名:',_ztreeselectm.names); var formdata = data.field; console.log('表单对象:',formdata); return false; }) //监听重置按钮 $('form').find(':reset').click(function(){ $('form')[0].reset(); _ztreeselectm.set();//默认值 return false; }); $("#set").on('click',function(e){ _ztreeselectm.set([4,7,13]); return false; })
效果图
码云演示
https://zyl0151_admin.gitee.io/ztreeselectm/
码云下载
https://gitee.com/zyl0151_admin/ztreeselectm
https://gitee.com/zyl0151_admin/ztreeselectm
下一篇: Github 上的个人项目开源心得