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

网络编程 2025/11/11 佚名

3 2 1

模块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) "\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>

效果