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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 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
国内咖啡文化
2021/03/03 咖啡文化
PHP 写文本日志实现代码
2010/05/18 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
checkbox选中与未选中判断示例
2014/08/04 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
JavaScript生成图形验证码
2020/08/24 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
企业军训感想
2014/02/07 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
庆六一宣传标语
2014/10/08 职场文书
思想作风建设心得体会
2014/10/22 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Python实现简单得递归下降Parser
2022/05/02 Python
SQL中的连接查询详解
2022/06/21 SQL Server