模块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 lay-filter="data1"></div> <div lay-filter="data2"></div> <div lay-filter="data3"></div> <button>获取选中数据</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树式选择器使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: