layui的tree组件搜索功能

最新推荐文章于 2024-06-02 17:50:48 发布
最新推荐文章于 2024-06-02 17:50:48 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： layui 文章标签： js html edge javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44734875/article/details/107613240
版权

参考 layui 岁月神偷的代码，做了一些修改。
直接复制代码，修改layui的文件路径即可看到效果
具体可参考 https://fly.layui.com/jie/46865/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>layui.tree搜索</title>
    <link rel="stylesheet" href="./src/css/layui.css">
    <style>
        .search_hint_text {
            color: red;
        }

        .treeDom::before {
            content: attr(data-no_search_hint_text);
            text-align: center;
            display: block;
            width: 100%;
        }
    </style>
</head>

<body class="body">
    <input type="text" class="ipt">
    <div class="treeDom" id="treeDom" style="width: 300px;max-height: 300px;overflow: auto;border:1px solid #ccc"></div>
    <script src="./jquery-1.9.1.min.js"></script>
    <script src="./src/layui.js"></script>
    <script>
        /**
        * @param fn {Function}   实际要执行的函数
        * @param delay {Number}  延迟时间，也就是阈值，单位是毫秒（ms）
        * @return {Function}     返回一个“去弹跳”了的函数
        */
        function debounce(fn, delay) {
            var timer;
            return function () {
                var context = this;
                var args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    fn.apply(context, args)
                }, delay);
            };
        }
        layui.use(["tree"], function () {
            var $ = layui.jquery;
            var tree = layui.tree;
          layui.tree.syncLayuiTreeFilter = function syncLayuiTreeFilter(treeId, filter, callback) {
    // console.time('加载时间')
    var treeElem = $('.' + treeId), filterElem = $(filter);
    if (!filterElem.length || !filterElem.length) {
      return;
    }
    var that = filterElem;
    var value = $.trim($(that).val());
    var HIDE = 'layui-hide';
    var hintClass = 'search_hit';
    var hintClassWrap = 'search_hit_wrap';
    // 先恢复现场 如果节点默认没有箭头，则不删除class “layui-hide”
    var hideElem = treeElem.find('.' + HIDE);
    hideElem.each(function (index, item) {
      $(item) && !$(item).hasClass('layui-tree-iconArrow') && $(item).removeClass(HIDE);
    })
    treeElem.find("." + hintClassWrap).removeClass(hintClassWrap);
    treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index, item) {
      item = $(item);
      item.html(item.data('textOld')).data('textOld', null);
    });
    treeElem.attr('data-no_filter_results', '');
    // 如果有值筛选开始
    if (value) {
      layui.each(treeElem.find('.layui-tree-entry'), function (index, treeElem) {
        var elem = $(treeElem);
        var textTemp = elem.text();

        if (textTemp.indexOf(value) === -1) {
          // 不存在就隐藏
          elem.closest('div').addClass(HIDE);
        } else {
          // 命中就添加一个class
          elem.find('.layui-tree-txt').addClass(hintClass)
            .data('textOld', textTemp)
            .html(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
        }
      });

      layui.each(treeElem.find('.' + hintClass), function (index, treeElem) {
        var elem = $(treeElem);
        var parentElem = elem.parents('div').parent('div').prev();
        //展示父节点
        parentElem.removeClass(HIDE);
        elem.parents('div').parent('div').addClass(hintClassWrap)
        //展示子节点     //在搜索值为中间级别的时候，搜索结果会导致叶子节点的图标变成"+"，未解决
        // elem.parents('div').parent('div').next().children('div').children('div').siblings().removeClass(HIDE);

        //将节点展开
        if (parentElem.find(".layui-tree-addition")) {
          parentElem.find(".layui-tree-addition").click();
        }
      });
      // 如果没有符合条件的选项，设置暂无数据
      if (treeElem.find('.' + hintClass).length == 0) {
        treeElem.addClass('no_filter_results');
        treeElem.attr('data-no_filter_results', '暂无数据')
      }
      // console.timeEnd('加载时间')
    }
    // 默认展开所有符合条件的节点
    treeElem.find('.' + hintClassWrap).each(function () {
      console.log($(this));
      $(this).hasClass("layui-tree-set") && !$(this).hasClass("layui-tree-spread") && $($(this).children("div").get(0)).find('.layui-tree-iconClick').click()
    })
    treeElem[0].scrollTop = 0;
    typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
    // });
  };
            var params = [
                {
                    title: '常用文件夹'
                    , id: 1
                    , alias: 'changyong'
                    , children: [
                        {
                            title: '所有未读（设置跳转）'
                            , id: 11
                            , href: 'http://www.layui.com/'
                            , alias: 'weidu'
                        }, {
                            title: '置顶邮件'
                            , id: 12
                        }, {
                            title: '邮件标签邮件'
                            , id: 13
                        }
                    ]
                }, {
                    title: '我的邮箱'
                    , id: 2
                    , spread: true
                    , children: [
                        {
                            title: 'QQ邮箱'
                            , id: 21
                            , spread: true
                            , children: [
                                {
                                    title: '收件箱'
                                    , id: 211
                                    , children: [
                                        {
                                            title: '所有未读'
                                            , id: 2111
                                        }, {
                                            title: '置顶邮件'
                                            , id: 2112
                                        }, {
                                            title: '标签邮件'
                                            , id: 2113
                                        }
                                    ]
                                }, {
                                    title: '已发出的邮件'
                                    , id: 212
                                }, {
                                    title: '垃圾邮件'
                                    , id: 213
                                }
                            ]
                        }, {
                            title: '阿里云邮'
                            , id: 22
                            , children: [
                                {
                                    title: '收件箱'
                                    , id: 221
                                }, {
                                    title: '已发出的邮件'
                                    , id: 222
                                }, {
                                    title: '垃圾邮件'
                                    , id: 223
                                }
                            ]
                        }
                    ]
                }
                , {
                    title: '收藏夹'
                    , id: 3
                    , alias: 'changyong'
                    , children: [
                        {
                            name: '爱情动作片'
                            , id: 31
                            , alias: 'love'
                        }, {
                            name: '技术栈'
                            , id: 12
                            , children: [
                                {
                                    name: '前端'
                                    , id: 121
                                }
                                , {
                                    name: '全端'
                                    , id: 122
                                }
                            ]
                        }
                    ]
                }
            ]

            layui.tree.render({
                elem: '.treeDom'
                , data: params
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                , showLine: false
                , showCheckbox: false  // 是否展示多选框
                , accordion: true
                , id: 'treeDom'
                , click: function (obj) {
                    console.log(obj);
                    $('.ipt').val(obj.data.title)
                }
            });
            $('input').on('keyup', debounce(function (e) {
                tree.syncLayuiTreeFilter('treeDom', $(this), function (treeElem, filterElem, hitNumbers) {
                    console.log('hitNumbers', hitNumbers);
                    layer.msg('找到' + hitNumbers + '个节点');
                });
            }, 500))
        })

    </script>
</body>

</html>
只想做条咸鱼~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui的eleTree树式选择器，分单选和多选，带搜索功能
06-09
Layui的eleTree树式选择器，分单选和多选，带搜索功能。
layui 支持搜索的树形组件eleTree实现
小栋哟
11-12 5898
没有废话直接上效果图，如果符合需求就往下看吧。 H5代码 <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" id="getChecked" >勾选指定节点</button> </div> <inp...
改造layui-树（tree）组件支持树的关键字搜索操作
最新发布
qiuweifan的博客
06-02 337
layui的tree控件没有搜索功能。整理备忘下。
layui的tree 搜索功能
qq_40113688的博客
08-17 1039
部分代码： var value = $(".search-input").val(); if(value){ $.each($("#depart").find('.layui-tree-txt'), function (index, elem) { elem = $(elem); let textTemp = elem.text();
layui.tree组件的使用以及搜索节点功能的实现
01-19
由于项目树形节点比较多需要增加节点搜索功能，所以研究了一下加上社区伙伴的支持，目前功能可以简单实现但细节还需要修改，添加上了组件的基本使用方法和属性，现在分享出来~ 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>勾选指定
layui-tree树形组件改写，可编辑、上移、下移、拖拽修改
04-13
将文件直接复制到layui/lay/modules目录下，会覆盖layui原有的tree.js，调用方法与layui树形组件的适应方式一致，新增的方法可在文件中查看
layui tree 插件 点击父类不会全选子类。
04-09
有时候开发树形菜单权限管理，选择父节点不想子节点全部选中，经过我的修改现在可以做到。你可以试试。只需要覆盖项目 tree.js就可以。 layui2.5.4版本
layui tree.js树形组件优化（默认选中项过多时加载缓慢问题解决）
05-08
有需要的直接下载替换掉start\layui\lay\modules目录下的tree.js文件即可
layui tree树结构源码
12-21
layui是一款流行的前端UI框架，以其简洁、优雅的代码和丰富的组件库深受开发者喜爱。在layui中，树形结构（tree）是一种常见的数据展示形式，常用于层级关系的组织，如组织架构、目录结构等。本知识点将深入解析...
基于layui实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
LayUi+MVC 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
ab17171313的博客
07-27 1990
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
layui树形结构
qq_37149303的博客
05-18 3845
 最近接触Layui框架，感觉还不错，就总结一下在使用layui的树形结构的使用。       在官网上查看时发现关于layui的使用都是静态添加的代码，如果我想动态添加树形节点时遇到了很大的问题，官网的静态示例代码如下：[javascript] view plain copy&lt;span style="font-family:SimSun;"&gt;&lt;span style="font-...
layui tree 节点搜索，dom
weixin_39143969的博客
05-15 343
form.on('submit(searchUnit)', function(params){ var treeElem = $('#treeList'), filterElem = $('[name="keyword"]'); if (!filterElem.length || !filterElem.length) { return; } var value = filterElem.val(); v
LayUI—tree树形结构的使用
热门推荐
小马同学
09-01 10万+
树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。 官网地址：https://www.layui.com/v1/doc/modules/tree.html 先看一下显示的效果图。 点击节点右面会显示对应部门的详情信息，可以修改。可以自定义按钮添加部门，也可以直接...
[Layui]layui使用tree实现树形下拉菜单
德仔
03-13 1164
一. 效果演示 基于V2.6.8 二. 插入css样式、引用js插件 <link rel="stylesheet" href="~/layui/css/layui.css" media="all"> @*<link rel="stylesheet" type="text/css" href="~/layui/font/">*@ <style type="text/css"> .treeSelect .layui-select-titl
layui前端菜单构建-批量删除-弹框填写-树状菜单-树状下拉框选择treeSelect
牧风人的博客
05-30 1273
异步提交请求 <!DOCTYPE html > <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <script th:src="@{/js/jquery-1.10.2.js}"></script> <scri...
Layui树状图无连接线展开关闭，左侧小图标改变实现
Wild_Oats的博客
05-06 722
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n
layui tree树组件回显
09-05
要实现layui tree树组件的回显，首先需要在前端页面引入相应的layui和tree组件的JS和CSS文件。然后通过使用layui的tree组件的API方法，进行节点的添加和选中操作。 具体步骤如下： 1. 初始化tree组件，指定树形容器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值