layui擴展組件zTreeSelectM，下拉樹多選

 

項目介紹

---

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