淺談Layui的eleTree樹式選擇器使用方法

更新時間：2019年09月25日 16:26:27 作者：xingnang2008

今天小編就為大家分享一篇淺談Layui的eleTree樹式選擇器使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

模塊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">獲取選中數(shù)據(jù)</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
      }
     ]
    }
   ];
   //數(shù)據(jù)一定要在 渲染render前 render里的url 和 type 應該是用來ajax獲取遠程數(shù)據(jù)的，不過不好用。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);
    // 若后臺修改，則重新獲取后臺數(shù)據(jù)，然后重載
    // 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() 取得的是數(shù)組;
    //下面是我項目中，取得數(shù)據(jù)，賦給一個textarea的過程，有去重過濾。
    //*********項目代碼示例***************
  var a = eleTree.checkedData(".ele1"),
     b = a.length;
     if (0 >= b) {
      Wind.use('artDialog',function(){
      art.dialog({
       id : "alert",
       icon : "error",
       content : "請至少選擇一個地區(qū)",
       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);
     
     //*********項目代碼示例 結(jié)束***************
   });
  // 數(shù)據(jù)重新加載 這里也可以做切換數(shù)據(jù)用
 $(".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("添加 區(qū)/縣后綴");
   $("#change").attr("class","change_all btn btn-warning btn-sm");
   }else{
   eleTree.reload(".ele1", {data: data});
   $("#change").html("去掉 區(qū)/縣后綴");
   $("#change").attr("class","change_short btn btn-warning btn-sm");
   }
  
 });
   //*********項目代碼示例 結(jié)束***************
  });
 </script>

效果