基于Layui扩展了级联下拉框

分享 未结
2 1723
亚马逊
亚马逊 2017-9-9
悬赏:10飞吻
本人是JAVA端开发,JS 懵懵懂懂。不多说,先来看代码
1 插件treeSelect.js
/*
* 扩展一个treeSelect模块,联动Select组件
*
* */

layui.define(['form','jquery'],function(exports) { //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
"use strict";

var $ = layui.$;

var layuiTreeSelectCalss="layui-treeSelect";

var getSelectDiv=function(nodes,id,layFilter,value){
var div="<div class='layui-input-inline "+layuiTreeSelectCalss+"' style='width:120px' id='"+id+"'>";
div+="<select lay-filter='"+layFilter+"'>";
div+="<option value=''>---请选择---</option>";
for(var i=0;i<nodes.length;i++){
if(value){
div+="<option value='"+nodes[i].id+"' "+(nodes[i].id==value?'selected':'')+" >"+nodes[i].name+"</option>";
}else{
div+="<option value='"+nodes[i].id+"' "+""+" >"+nodes[i].name+"</option>";
}

}
div+="</select>";
div+="</div>";
return div;
}

var initTreeSelect=function(nodes,container,value){

var eleId=new Date().getTime()+""+parseInt(1000*Math.random());
var layFilter=eleId+"_layFilter";

var selectHtml=getSelectDiv(nodes,eleId,layFilter,value);
$(container).append(selectHtml);

layui.form.render();

layui.form.on('select('+layFilter+')', function(data){

//显示删除当前节点后面的节点
$("#"+eleId).nextAll("div."+layuiTreeSelectCalss).remove();

for(var i=0;i<nodes.length;i++){
if(nodes[i].id==data.value){
var children=nodes[i].children;
if(children&&children.length>0){
initTreeSelect(children,container);
}
break;
}
}
});

}

var treeSelect={
getSingleData:function(nodes,data,tempData){ //外部用不到,用于内部递归
if(nodes==undefined||nodes.length==0){
return false;
}

for(var i=0;i<nodes.length;i++){
if(nodes[i].id==data){
tempData.push(nodes[i].id);
return true;
}else{
tempData.push(nodes[i].id);
if(this.getSingleData(nodes[i].children,data,tempData)){
return true;
};
}
tempData.pop();
}
},
setSelect:function(nodes,container,data){ //外部用不到,用于内部递归

if(data.length>0){

for(var i=0;i<nodes.length;i++){

if(nodes[i].id==data[0]){

initTreeSelect(nodes,container,data[0]);
nodes=nodes[i].children;

if(data.length>1){
data.shift();
this.setSelect(nodes,container,data);
break;
}
}
}
}
},
init:function(container,param){//初始化组件,目前param,nodes(树形JSON),data设置组件的值
if(!this.cacheData){
this.cacheData={};
}
this.cacheData[container]={};

this.cacheData[container].nodes=param.nodes;

$(container).find("div."+layuiTreeSelectCalss).remove();
initTreeSelect(this.cacheData[container].nodes,container);
if(param.data){
this.setValue(container,param.data);
}
},
setValue:function(container,data){//设置组件的值,data可以为string和数组,如果是string,则认为最后以及的值,反向推算。如果是数组,则按照数组进行赋值

var nodes=this.cacheData[container].nodes;

if(typeof data=='string'){
//如果是string,那么说明传的是最后一个值,从nodes中找出对应的数组
var tempData=[];

for(var i=0;i<nodes.length;i++){
if(nodes[i].id==data){
tempData.push(nodes[i].id);
break;
}else{
tempData.push(nodes[i].id);
if(nodes[i].children){
if(this.getSingleData(nodes[i].children,data,tempData)){
break;
}
}
}
tempData.pop();
}
data=tempData;
}

$(container).find("div."+layuiTreeSelectCalss).remove();
this.setSelect(nodes,container,data);

},
getTreeData:function(container){//获取当前组件的所有数据
return this.cacheData[container].nodes;
},
getData:function(container){//获取当前组件的值,是个数组
var data=[];
$(container).find("div."+layuiTreeSelectCalss).find("select").each(function(){
data.push($(this).val());
});
return data;
},

};

//输出treeSelect接口
exports('treeSelect', treeSelect);
});
2 加载插件
layui.config({
base : '/plugins/layui/layui-custom/' //这个是你代码的实际存放路径
}).extend({ //设定模块别名
treeSelect : 'treeSelect'
});
3 使用
首先需要一个容器
<div class="layui-form-item">
<div class="layui-inline" id="treeSelect" >
<label class="layui-form-label">父节点</label>
</div>
</div>
其次,使用代码
var nodes=[{"creator":"1","code":"index","visibility":"0","px":0,"updateTime":"2017-09-09 21:02:38","url":"/admin","parentId":null,"spread":true,"removed":"0","createTime":"2017-04-27 00:04:57","name":"首页","updator":"sys0","comment":"备注","id":"1"},{"creator":"1","code":"system","visibility":"0","px":1,"updateTime":"2017-09-09 00:39:50","url":null,"parentId":null,"spread":true,"removed":"0","createTime":"2017-05-08 22:17:50","children":[{"creator":"1","code":"user","visibility":"0","px":0,"updateTime":"2017-09-09 20:20:00","url":"/admin/user","parentId":"2","spread":true,"removed":"0","createTime":"2017-05-08 22:18:38","children":[{"creator":"sys0","code":"tree1","visibility":"0","px":1,"updateTime":"2017-09-09 22:09:26","url":null,"parentId":"3","spread":true,"removed":"0","createTime":"2017-09-09 22:09:26","children":[{"creator":"sys0","code":"tree2","visibility":"0","px":1,"updateTime":"2017-09-09 22:09:38","url":null,"parentId":"86dad41e85274b729f92622f29d6003e","spread":true,"removed":"0","createTime":"2017-09-09 22:09:38","children":[{"creator":"sys0","code":"tree3","visibility":"0","px":1,"updateTime":"2017-09-09 22:09:54","url":null,"parentId":"f9b0267866824ea28f2ed9e0f4e2481f","spread":true,"removed":"0","createTime":"2017-09-09 22:09:54","name":"tree3","updator":"sys0","comment":"1","id":"a567a6cf13974bf2863b7d47697efdca"}],"name":"tree2","updator":"sys0","comment":"1","id":"f9b0267866824ea28f2ed9e0f4e2481f"}],"name":"tree1","updator":"sys0","comment":null,"id":"86dad41e85274b729f92622f29d6003e"}],"name":"用户管理","updator":"sys0","comment":null,"id":"3"},{"creator":"1","code":"resource","visibility":"0","px":1,"updateTime":"2017-06-06 19:56:25","url":"/admin/resource","parentId":"2","spread":true,"removed":"0","createTime":"2017-05-08 22:20:14","name":"资源管理","updator":"sys0","comment":null,"id":"4"},{"creator":"1","code":"role","visibility":"0","px":2,"updateTime":"2017-06-06 19:56:28","url":"/admin/role","parentId":"2","spread":true,"removed":"0","createTime":"2017-05-10 15:26:56","name":"角色管理","updator":"sys0","comment":null,"id":"5"},{"creator":"1","code":"dic","visibility":"0","px":3,"updateTime":"2017-06-06 19:56:30","url":"/admin/dic","parentId":"2","spread":true,"removed":"0","createTime":"2017-05-10 15:27:49","name":"字典管理","updator":"sys0","comment":null,"id":"6"},{"creator":"sys0","code":"log","visibility":"0","px":5,"updateTime":"2017-06-06 19:55:06","url":"/admin/log","parentId":"2","spread":true,"removed":"0","createTime":"2017-06-06 13:35:15","name":"日志管理","updator":"sys0","comment":null,"id":"8"}],"name":"系统管理","updator":"sys0","comment":null,"id":"2"},{"creator":"1","code":"druid","visibility":"1","px":4,"updateTime":"2017-05-29 16:41:58","url":"","parentId":"","spread":true,"removed":"0","createTime":"2017-05-29 16:41:56","name":"数据源监控","updator":"1","comment":null,"id":"7"}];

layui.use('treeSelect',function(){
var treeSelect=layui.treeSelect;
treeSelect.init("#treeSelect",{
nodes:nodes,
data:'a567a6cf13974bf2863b7d47697efdca' //这个参数是从nodes里面随意找的一个ID,自动设置该节点之前所有的值
});
});
4效果
回帖
本帖已设置禁止回复