浅谈Layui的eleTree树式选择器使⽤⽅法模块eleTree 介绍、下载
使⽤
JS位置，layui/lay/modules/eleTree.js；
CSS位置，layui/css/modules/eleTree/eleTree.css；
页⾯css引⽤引⽤ layui/css/layui.css"和 layui/css/modules/eleTree/eleTree.css ；
页⾯js引⽤引⽤ layui/layui.js ；
页⾯div
<div class="eleTree ele1" lay-filter="data1"></div>
<div class="eleTree ele2" lay-filter="data2"></div>
<div class="eleTree ele3" lay-filter="data3"></div>
<button class="layui-btn">获取选中数据</button>
script
<script>
base: "layui/lay/modules/"  //eleTree.js所在⽬录
}).use(['jquery','eleTree'], function(){
var $ = layui.jquery;
var eleTree = layui.eleTree;
var data=[
{
"label": "a",
"spread": true,
"children": [
{
"label": "aa1",
"spread": true,
"disabled": true,
"children": [
{
"label": "aaa1",
"children": [
{
"label": "aaaa1",
"checked": true
},
{
"label": "bbbb1"
}
]
},
{
"label": "bbb1",
"spread": true,
"children": [
{
"label": "aaaa1",
"checked": true
}
]
},
{
"label": "ccc1"
}
]
},
{
"label": "bb1",
"children": [
{
"label": "aaaa1",
"checked": true
}
]
},
{
"label": "cc1"
}
]
},
{
"label": "c",
"children": [
{
"label": "aa1",
"disabled": true
},
{
"label": "bb1",
"checked": true
}
]
}
]
var data2=[
{
"label": "a",
"spread": true,
"children": [
{
"label": "aa1",
"spread": true,
"disabled": true
},
{
"label": "bb1",
"children": [
{
"label": "aaaa1",
"checked": true
}
]
},
{
"label": "cc1"
}
]
},
{
"label": "c",
"children": [
{
"label": "aa1",
"disabled": true
},
{
"label": "bb1",
"checked": true
}
]
}
];
/
/数据⼀定要在渲染render前 render⾥的url 和 type 应该是⽤来ajax获取远程数据的，不过不好⽤。eleTree.js中要求⽐较多data.Code 等等，就没⽤，直接页⾯取得了。将data ,data1,data3 换成⾃⼰的。  der({
elem: '.ele1',
// url: "/tree",
// type: "post",
data: data,
showCheckbox: true,
contextmenuList: ["copy","add","edit","remove"],
drag: true,
accordion: true
});
elem: '.ele2',
// url: "../../data/home/tree.json",
// type: "post",
data: data2,
showCheckbox: true,
contextmenuList: ["add","remove"],
drag: true,
accordion: true
});
var data3=[
{
"label": "a"
},
{
"label": "aa",
"isLeaf": true
}
]
var k=1;
elem: '.ele3',
/
/ url: "/tree",
// type: "post",
data: data3,
showCheckbox: true,
contextmenuList: ["copy","add","edit","remove"],
// drag: true,
accordion: true,
lazy: true,
loadData: function(item,callback) {
setTimeout(function() {
k++;
var d = [
{
"label": "d"
}
];
console.log(item);
if(k>=3){
d[0].isLeaf=true;
return void callback(d);
}
callback(d);
}, 500);
}
});
//各种⽅法
<("add(data1)",function(data) {
console.log(data);
// 若后台修改，则重新获取后台数据，然后重载
// load(".ele1", {where: {data: JSON.stringify(data.data)}})
})
<("edit(data1)",function(data) {
console.log(data);
isnull的用法
})
<("remove(data1)",function(data) {
console.log(data);
})
<("toggleSlide(data1)",function(data) {
console.log(data);
})
<("checkbox(data1)",function(data) {
console.log(data);
})
<("drag(data2)",function(data) {
console.log(data);
})
$(".layui-btn").on("click",function() {
console.log(eleTree.checkedData(".ele2"));
//这⾥的 eleTree.checkedData() 取得的是数组;
//下⾯是我项⽬中，取得数据，赋给⼀个textarea的过程，有去重过滤。    //*********项⽬代码⽰例***************
var a = eleTree.checkedData(".ele1"),
b = a.length;
if (0 >= b) {
Wind.use('artDialog',function(){
art.dialog({
id : "alert",
icon : "error",
content : "请⾄少选择⼀个地区",
ok : function() {}
});
});
}else {
var thisCitys = eleTree.checkedData(".ele1");
var d="";
var new_arr=[];
for (var f = 0; f < thisCitys.length; f++) {
if($.inArray(thisCitys[f]['label'],new_arr)==-1) {
new_arr.push(thisCitys[f]['label']);
}
}
//去重
for(var i=0;i<new_arr.length; i++){
d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
}
// }
$("#area").val(d);
//*********项⽬代码⽰例结束***************
});
// 数据重新加载这⾥也可以做切换数据⽤
$(".layui-btn2").on("click",function() {
})
//*********项⽬代码⽰例***************
$("#change").on("click",function() {
if($("#change").attr("class")=='change_short btn btn-warning btn-sm'){  load(".ele1", {data: data_short});
$("#change").html("添加区/县后缀");
$("#change").attr("class","change_all btn btn-warning btn-sm");
}else{
$("#change").html("去掉区/县后缀");
$("#change").attr("class","change_short btn btn-warning btn-sm");
}
});
//*********项⽬代码⽰例结束***************
});
</script>
效果
以上这篇浅谈Layui的eleTree树式选择器使⽤⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。