layuiTablePlug
/
testTreeSearch.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/src/css/layui.css">
  <style>
    .search_hint_text {
      color: red;
    }
  </style>
</head>
<body style="padding: 10px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>基本树</legend>
</fieldset>
<div>
  <div class="layui-inline">
    <input class="layui-input layui-input-inline" name="searchTree">
  </div>
</div>
<div style="display: inline-block; width: 240px; height: 480px; padding: 10px; border: 1px solid #ddd; overflow: auto;"
     id="main">
  <ul id="demo1"></ul>
</div>

<script src="layui/src/layui.js"></script>
<script>
  layui.use(['tree', 'layer'], function () {
    var layer = layui.layer
      , $ = layui.jquery
      , tree = layui.tree;

    // 同步(绑定)layui的tree的搜索(过滤)框
    // treeId: tree所在的容器的id
    // filter: 对应的搜索框的selector或者dom对象,尽量要确保是唯一的节点，或者真的是要控制这个树的input
    // callback: 回调 参数(树节点jquery对象, 输入框对象, 匹配到的节点数量)
    tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
      var treeElem = $('#' + treeId), filterElem = $(filter);
      if (!filterElem.length || !filterElem.length) {
        return;
      }
      filterElem.unbind('change').change(function (event) {
        var that = this;
        var value = $(that).val().trim();
        var HIDE = 'layui-hide';
        var hintClass = 'search_hit';
        // 先恢复现场
        treeElem.find('.' + HIDE).removeClass(HIDE);
        treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index, item) {
          item = $(item);
          item.html(item.data('textOld')).data('textOld', null);
        });
        // 如果有值筛选开始
        if (value) {
          layui.each(treeElem.find('cite'), function (index, elem) {
            elem = $(elem);
            var textTemp = elem.text();
            if (textTemp.indexOf(value) === -1) {
              // 不存在就隐藏
              elem.closest('li').addClass(HIDE);
            } else {
              // 命中就添加一个class
              elem.addClass(hintClass)
                .data('textOld', textTemp) // 记录原始的文本，下面会替换成命中的文本高亮显示的html
                .html(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
            }
          });
          layui.each(treeElem.find('.' + hintClass), function (index, elem) {
            elem = $(elem);
            // 遍历祖辈的ul
            elem.parents('ul').each(function (i, item) {
              item = $(item);
              // 显示父节点
              item.parent('li').removeClass(HIDE);
              if (!item.hasClass('layui-show')) {
                // 如果是折叠的就点击一下图标让它展开
                item.parent('li').removeClass(HIDE).find('>i').click();
              }
            });
          });
        }
        // 如果设置了回调的话
        typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
      });
    };

    tree({
      elem: '#demo1' //指定元素
      , target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
      , nodes: [ //节点
        {
          name: '常用文件夹'
          , id: 1
          , alias: 'changyong'
          , children: [
            {
              name: '所有未读（设置跳转）'
              , id: 11
              , href: 'http://www.layui.com/'
              , alias: 'weidu'
            }, {
              name: '置顶邮件'
              , id: 12
            }, {
              name: '邮件标签邮件'
              , id: 13
            }
          ]
        }, {
          name: '我的邮箱'
          , id: 2
          , spread: true
          , children: [
            {
              name: 'QQ邮箱'
              , id: 21
              , spread: true
              , children: [
                {
                  name: '收件箱'
                  , id: 211
                  , children: [
                    {
                      name: '所有未读'
                      , id: 2111
                    }, {
                      name: '置顶邮件'
                      , id: 2112
                    }, {
                      name: '标签邮件'
                      , id: 2113
                    }
                  ]
                }, {
                  name: '已发出的邮件'
                  , id: 212
                }, {
                  name: '垃圾邮件'
                  , id: 213
                }
              ]
            }, {
              name: '阿里云邮'
              , id: 22
              , children: [
                {
                  name: '收件箱'
                  , id: 221
                }, {
                  name: '已发出的邮件'
                  , id: 222
                }, {
                  name: '垃圾邮件'
                  , id: 223
                }
              ]
            }
          ]
        }
        , {
          name: '收藏夹'
          , id: 3
          , alias: 'changyong'
          , children: [
            {
              name: '爱情动作片'
              , id: 31
              , alias: 'love'
            }, {
              name: '技术栈'
              , id: 12
              , children: [
                {
                  name: '前端'
                  , id: 121
                }
                , {
                  name: '全端'
                  , id: 122
                }
              ]
            }
          ]
        }
      ]
    });

    tree.syncLayuiTreeFilter('demo1', '[name="searchTree"]', function (treeElem, filterElem, hitNumbers) {
      console.log('hitNumbers', hitNumbers);
      layer.msg('找到' + hitNumbers + '个节点');
    });

  });
</script>
</body>
</html>