layui的tree组件搜索功能

最新推荐文章于 2024-04-22 17:34:43 发布
最新推荐文章于 2024-04-22 17:34:43 发布
阅读量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--tree--tree搜索功能
唯爱赞多的博客
02-06 840
实现layui树以及搜索功能
layui的tree 搜索功能
qq_40113688的博客
08-17 1032
部分代码： var value = $(".search-input").val(); if(value){ $.each($("#depart").find('.layui-tree-txt'), function (index, elem) { elem = $(elem); let textTemp = elem.text();
Layui的eleTree树式选择器，分单选和多选，带搜索功能
06-09
Layui的eleTree树式选择器，分单选和多选，带搜索功能。
el-tree搜索父节点，父子节点一起展示
最新发布
敲代码无敌小奶龙的博客
04-22 338
el-tree搜索父节点，父子节点一起展示
layui.tree(树组件)搜索功能
zjh19961213的博客
07-18 8143
layui版本：2.5.4 layui官网在2.5.0版本后才将树组件文档公布出来，实现方式和数据结构与之前的版本有了较大的改变。使用时发现搜索功能还未展示到文档中，参考 Fly社区的回答自己改动了下。 效果演示 主体实现 // treeId: tree所在的容器的id // filter: 对应的搜索框的selector或者dom对象 // callback: 回调 参数(树节点jquery对象...
layui tree 对节点进行搜索
joke123x的博客
12-14 277
需要在使用layui的tree的界面添加的查询代码方法。LayUI的tree对节点进行搜索的效果图。在代码的详细使用如下。
LayUI Tree 组件扩展实现（搜索功能，复选框，自定义节点图标，右击菜单）（附带源码）
热门推荐
qq_27532167的博客
04-09 1万+
最近项目选项前端技术选型选择了LayUI，没选到的是tree组件的功能实在太弱了，没办了，只能自己修改了源码，目前实现了以下功能，github还没有时间更新敬请期待。那我们来看看扩展功能吧： 一、扩展功能 1，增加了目录树的搜索功能 2，增加了目录树的复选框和事件回调的实现 3，增加了根节点图标和叶子图标自定义设置。 4，增加右键菜单和事件回调。 让我妈看一下效果图吧 搜索功能效果...
layui.tree组件的使用以及搜索节点功能的实现
10-16
在本篇文章中，我们将探讨如何使用layui.tree组件，并着重讲解如何实现搜索节点的功能。 首先，layui.tree组件的使用涉及到以下几个主要步骤： 1. 引入layui库：在HTML文件中，需要引入layui的CSS和JS文件，确保...
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实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
js实现layui搜索树数据构造
qq_45089709的博客
06-08 230
*
layui 支持搜索的树形组件eleTree实现
小栋哟
11-12 5887
没有废话直接上效果图，如果符合需求就往下看吧。 H5代码 <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" id="getChecked" >勾选指定节点</button> </div> <inp...
layui tree组件实现搜索节点并展开
weixin_38897313的博客
08-19 1800
【代码】layui tree组件实现搜索节点并展开。
layui tree支持搜索
Think88666的博客
12-09 768
本人用的layui 2.x ，该版本的tree是直接支持搜索的，只需要开启 showSearch: true,甚至可以不用写搜索框 代码如下： <script> layui.use(['tree', 'layer'], function () { var layer = layui.layer , $ = layui.jquery , tree ...
基于Layui和eleTree的穿梭搜索树
kennyzjk的专栏
03-11 1900
请移步码云下载： https://gitee.com/zheng_jun_kai/shuttle_tree
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、付费专栏及课程。

余额充值