layui tree 對節點進行搜尋

super_admin_123發表於2019-01-22
UI

參考地址：https://fly.layui.com/jie/46865/

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="js/layui/v2.3.0/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="js/layui/v2.3.0/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(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
            }
          });
          layui.each(treeElem.find('.' + hintClass), function (index, elem) {
            elem = $(elem);
            elem.parents('li').removeClass(HIDE);
            elem.parents('ul').each(function (i, item) {
              if (!$(item).hasClass('layui-show')) {
                $(item).parent('li').find('>i').click();
              }
            });
            elem.parents('ul').parent('li').removeClass(HIDE);
          });
        }
        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>

目前情況是搜尋父節點子節點沒有跟著出來，由於時間緊急暫時沒有做，後續有空再補上

相關文章