模块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>

效果

以上这篇浅谈Layui的eleTree树式选择器使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。