浅谈Layui的eleTree树式选择器使用方法

更新时间：2020-09-15 23:00:01 作者：startmvc

模块eleTree介绍、下载地址：https://fly.layui.com/extend/eleTree/使用JS位置，layui/lay/modules/eleTree.js

模块eleTree 介绍、下载

地址：https://fly.layui.com/extend/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> 
 layui.config({
 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 换成自己的。
 eleTree.render({
 elem: '.ele1',
 // url: "/tree",
 // type: "post",
 data: data,
 showCheckbox: true,
 contextmenuList: ["copy","add","edit","remove"],
 drag: true,
 accordion: true
 });
 
 eleTree.render({
 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;
 eleTree.render({
 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);
 }
 });
//各种 方法
 eleTree.on("add(data1)",function(data) {
 console.log(data);
 // 若后台修改，则重新获取后台数据，然后重载
 // eleTree.reload(".ele1", {where: {data: JSON.stringify(data.data)}})
 })
 eleTree.on("edit(data1)",function(data) {
 console.log(data);
 })
 eleTree.on("remove(data1)",function(data) {
 console.log(data);
 })
 eleTree.on("toggleSlide(data1)",function(data) {
 console.log(data);
 })
 eleTree.on("checkbox(data1)",function(data) {
 console.log(data);
 })
 eleTree.on("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() {
 eleTree.reload(".ele1", {data: data3})
 })
 //*********项目代码示例***************
 $("#change").on("click",function() {
 if($("#change").attr("class")=='change_short btn btn-warning btn-sm'){
 eleTree.reload(".ele1", {data: data_short});
 $("#change").html("添加 区/县后缀");
 $("#change").attr("class","change_all btn btn-warning btn-sm");
 }else{
 eleTree.reload(".ele1", {data: data});
 $("#change").html("去掉 区/县后缀");
 $("#change").attr("class","change_short btn btn-warning btn-sm");
 }
 
 });
 //*********项目代码示例 结束***************
 });
 </script>

效果