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 三种编解码方式
Feb 01 Javascript
JqGrid web打印实现代码
May 31 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
js倒计时简单实现方法
Dec 17 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
微信小程序点击列表跳转到对应详情页过程解析
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的栏目导航程序
2006/10/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
js实现抽奖效果
2017/03/27 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python sys模块常用方法解析
2020/02/20 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
英文求职信结束语大全
2013/10/26 职场文书
个人先进材料范文
2014/12/30 职场文书
投标邀请书范本
2015/02/02 职场文书
企业宣传稿范文
2015/07/23 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
《刷子李》教学反思
2016/02/20 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书