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


Posted in Javascript onSeptember 26, 2019

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

HTML:

<div class="layui-btn-container">
  <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>
<div class="demoTable">
  <div class="layui-inline">
    <input type="text" class="layui-input" id="tree_name" autocomplete="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
          }]
        }];
 
    //常规用法
    tree.render({
      elem: '#test1' //默认是点击节点可进行收缩
      ,data: data1
      ,id: 'demoId1'
      ,showCheckbox: true //是否显示复选框
      ,isJump: true //是否允许点击节点时弹出新窗口跳转
      ,showLine: true //是否开启连接线
      ,edit: ['add', 'update', 'del'] //开启操作节点的图标
      ,click: function(obj){
        var data = obj.data; //获取当前点击的节点数据
        layer.msg('状态:'+ obj.state + '<br>节点数据:' + JSON.stringify(data));
      }
    });
 
    //按钮事件
    util.event('lay-demo', {
      getChecked: function(othis){
        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
 
        layer.alert(JSON.stringify(checkedData), {shade:0});
        console.log(checkedData);
      }
      ,setChecked: function(){
        tree.setChecked('demoId1', [3, 4]); //勾选指定节点
      }
      ,reload: function(){
        //重载实例
        tree.reload('demoId1', {});
      }
    });
 
    //搜索节点值
    $('#btn_query').click(function () {
      var name = $("#tree_name").val(); //搜索值
      var elem = $("#test1").find('.layui-tree-txt').css('color', ''); //搜索文本与设置默认颜色
      if (!name) {
        return; //无搜索值返回
      }
      elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
      elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click(); //展开选项
      //console.log(elem);
    })
 
  });

效果如图:

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

搜索功能还有待完善,希望做过类似功能的伙伴多多沟通和分享~

以上这篇layui.tree组件的使用以及搜索节点功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 #Javascript
vue+element tabs选项卡分页效果
Jun 29 #Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 #Javascript
vue+element表格导出为Excel文件
Sep 26 #Javascript
利用layer实现表单完美验证的方法
Sep 26 #Javascript
vue点击当前路由高亮小案例
Sep 26 #Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 #Javascript
You might like
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
js实现星星打分效果
2020/07/05 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
python绘制双柱形图代码实例
2017/12/14 Python
用Python实现读写锁的示例代码
2018/11/05 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python实现KNN分类算法
2019/10/16 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
工资收入证明
2014/10/07 职场文书
房产公证书格式
2015/01/26 职场文书
秋收起义观后感
2015/06/11 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS