layui.tree组件的使用以及搜索节点功能的实现

由于项目树形节点比较多需要增加节点搜索功能，所以研究了一下加上社区伙伴的支持，目前功能可以简单实现但细节还需要修改，添加上了组件的基本使用方法和属性，现在分享出来~

HTML:

div class=' layui-BTN-容器' button class=' layui-BTN layui-BTN-sm ' type=' button ' lay-demo=' GetChecked '获取选中节点数据/button button class=' layui-BTN layui-BTN-sm ' type=' button ' lay-demo=' setChecked '勾选指定节点/button button class=' layui-BTN layui-BTN-sm ' type=' button ' lay-demo=' reload '重载实例/button/div class=' DeMoble ' div class=' layui-inline '输入类型=' text ' class=' layui-input ' id=' tree '名称'自动完成=' off '/div button class=' layui-BTN ' id=' BTN _ query '搜索/button/div div id=' test1 ' class=' demo-tree demo-tree-box '/div JavaScript:

layui.use(['tree '，' util']，function(){ var $=layui .$;var tree=layui.tree，layer=layui.layer，util=layui.util //模拟数据，data1=[{ title: '江西，id: 1，children: [{ title: '南昌，id: 1000，children: [{ title: '青山湖区，id: 10001 }，{ title: '高新区，id: 10002 }] }，{ title: '九江，id: 1001 }，{ title: '赣州，id: 1002 }] }，{ title: '广西，id: 2，children: [{ title: '南宁，id: 2000 }，{ title: '桂林，id: 2001 }] }，{ title: '陕西，id: 3，children: [{ title: '西安，id: 3000 }，{ title: '延安，id: 3001 }] }，{ title: '四川（可跳转)'，id: 4，href: 'https://www.layui.com/'，children: [{ title: '成都，id: 3000，checked: true //默认选中}，{ title: '雅安，id : 3001 }]}]；//常规用法树。渲染({ elem : ' # test1 '//默认是点击节点可进行收缩，data: data1，id: 'demoId1 '，showCheckbox: true //是否显示复选框，isJump: true //是否允许点击节点时弹出新窗口跳转，showLine: true //是否开启连接线，edit: ['add '，' update '，' del'] //开启操作节点的图标，点击：函数(obj){ var data=obj。数据；//获取当前点击的节点数据layer.msg('状态：“obj。状态“br节点数据：' JSON。stringify(数据))；} });//按钮事件util.event('lay-demo '，{ getchecked : function(othis){ var checked data=tree。getchecked(' demoid 1 ')；//获取选中节点的数据层。警报(JSON。stringify(CheckEdata)，{ shade :0 })；控制台。日志(已检查的数据)；}，setChecked:函数(){ tree.setChecked('demoId1 '，[3，4])；//勾选指定节点}，重新加载：函数(){ //重载实例tree.reload('demoId1 '，{ })；} });//搜索节点值$('#btn_query ').单击(函数(){ var name=$(' # tree _ name ')).val()；//搜索值var elem=$('#test1 ').查找('。layui-tree-txt ').css('color '，' ')；//搜索文本与设置默认颜色if(！name){ return；//无搜索值返回} elem。过滤器(' :包含('名称')).css('color '，' # FFB 800 ')；//搜索文本并设置标志颜色elem.parents ' .layui-tree-pack ').prev().查找('。layui-tree-icon click’).单击();//展开选项//控制台。日志(elem)；}) });效果如图：

搜索功能需要改进。希望做过类似功能的伙伴多交流分享~

以上layui.tree组件的使用和搜索节点功能的实现都是边肖分享的内容，希望能给大家一个参考和支持。