項目介紹 項目中需要用到下拉樹多選功能,找到兩個相關組件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