Expanding component layui zTreeSelectM, multiple selection drop-down tree

 

Project Introduction

---

Projects need to use the drop-down tree multi-select feature to find two related components moretop-layui-select-ext and wujiawei0926-treeselect, but moretop-layui-select-ext does not support a tree structure, wujiawei0926-treeselect does not support multiple selection, so altogether modeled moretop-layui-select-ext hands to write a component, select zTree no choice but the main reason is layuiTree layuiTree does not support the parent-child relationship is canceled.

 

Rendering code

var _zTreeSelectM = zTreeSelectM ({ 
    elem: '#zTreeSelectM', // container elements [required]           
    Data: './json/1.json', // candidate data [] required 
    width: 600,   // set length     
    selected: [3,6,29], // default             
    max:. 3, // select the maximum number of default. 5             
    name: 'Field', // INPUT name is not provided with the same selector (go #) 
    DELIMITER : ',', @ delimiter value            
    Field: {the idName: 'ID', TITLENAME: 'name'}, // candidate key name data 
    zTreeSetting: { // zTree set 
         check: {
            enable: to true,
            chkboxType: { "Y": "", "N": "" }
        },
        data: {
            simpleData: {
                enable: false
            },
            key: {
                name: 'name',
                children: 'children'
            }
        }
    }
}); 

 

Returns the selected data codes

 

 

form.on ( 'Submit (Demo)', function (Data) {     
 the console.log ( 'zTreeSelectM value of the currently selected name:' , _zTreeSelectM.selected); 
 the console.log ( 'zTreeSelectM currently selected values:' , _zTreeSelectM. values); 
 the console.log ( 'zTreeSelectM currently selected name:' , _zTreeSelectM.names);       
  
   var formData = data.field; 
   the console.log ( 'form object:' , formData);
    return  to false ; 
}) 
 
// listener weight with a button 
$ ( 'form') Find.. ( ': RESET') the Click ( function () { 
 $ ( 'form') [0 ] .reset (); 
 _zTreeSelectM.set ();// the default values 
 return false;
});
$("#set").on('click',function(e){    
 _zTreeSelectM.set([4,7,13]);
 return false;
})

 

Renderings

 

Cloud demo code

https://zyl0151_admin.gitee.io/ztreeselectm/

Cloud code download
https://gitee.com/zyl0151_admin/zTreeSelectM