欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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;
})

 


效果图
layui扩展组件zTreeSelectM,下拉树多选
 
码云演示
https://zyl0151_admin.gitee.io/ztreeselectm/
码云下载
https://gitee.com/zyl0151_admin/ztreeselectm