layuiTablePlug/testTreeSearch.html at master · sunxiaobin89/layuiTablePlug · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!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>