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 弹出层 定位至屏幕居中示例
May 21 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
简单的分页代码js实现
May 17 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python绘图模块之利用turtle画图
2021/02/12 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
《掌声》教学反思
2014/02/23 职场文书
投标诚信承诺书
2014/05/26 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
签证工作证明模板
2015/06/15 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
《我是什么》教学反思
2016/02/16 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android