日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

layui tree組件實現搜索節點并展開

作者:傻的太壞 更新時間: 2024-03-04 編程語言

實現搜索節點并展開

//模擬數據1
                data1 = [
                    {
                    title: '江西',
                    id: 1,
                    children: [
                       {
                        title: '南昌',
                        id: 1000,
                        children: [
                            {
                            title: '青山湖區',
                            id: 10001
                            },
                            {
                                title: '高新區',
                                id: 10002
                            }
                        ]
                       },
                       {
                           title: '九江',
                           id: 1001
                       },
                     {
                      title: '贛州',
                      id: 1002
                     }
                    ]
                 },
                 {
                    title: '廣西',
                    id: 2,
                    children: [{
                        title: '南寧',
                        id: 2000
                  },{
                      title: '桂林'
                    ,id: 2001
                  }]
                },{
                    title: '陜西'
                  ,id: 3
                  ,children: [{
                      title: '西安'
                    ,id: 3000
                  },{
                      title: '延安'
                    ,id: 3001
                  }]
                }]

html部分:

 <div class="demoTable">
        <div class="layui-inline">
            <input type="text" id="inputSearch" class="layui-input"  autocomplete="off" />
        </div>
        <button class="layui-btn" id="btn_query">搜索</button>
    </div>
    <div id="test1" class="demo-tree demo-tree-box" style="width: 500px; height: 1000px; overflow: scroll;"></div>

//js代碼部分


//開啟節點操作圖標,增加、修改、刪除
            tree.render({
                    elem: '#test13',
                    id: 'demotree',//設置id方面后面的重載操作
                    data: data1,
                    onlyIconControl: true,  //是否僅允許節點左側圖標控制展開收縮
                    click: function (obj)
                    {
                      layer.msg(JSON.stringify(obj.data));
                    }
            });
   // 回車事件
        $('#inputSearch').bind('keypress', function (event) {
            if (event.keyCode == "13") {
              	var value = $(this).val();
                //首選應將文本的顏色恢復正常
                  var node = $("#test13");
                  node.find('.layui-tree-txt').css('color', '');
                  //重載樹,使得之前展開的記錄全部折疊起來
                  tree.reload('demotree', {});
              if (value) {
                  $.each(node.find('.layui-tree-txt'), function (index, elem) {
                      elem = $(elem);
                      let textTemp = elem.text();
                      if (textTemp.indexOf(value) !==-1) {
                          elem.addClass("tree-txt-active");
                          elem.filter(':contains(' + value + ')').css('color', '#FFB800'); //搜索文本并設置標志顏色
                      }
                  });

                  $.each(node.find('.tree-txt-active'), function (index, elem){
                      elem = $(elem);
                      // 展開所有父節點
                      elem.parents('.layui-tree-set').each(function (i, item) {
                          if (!$(item).hasClass('layui-tree-spread')) {
                              $(item).find('.layui-tree-iconClick:first').click();
                          }
                      });
                  });
              }
            }
        });

原文鏈接:https://blog.csdn.net/weixin_38897313/article/details/126422236

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新