layui-treeTable v2.0添加搜索功能

layui-treeTable 添加搜索功能

---

在樹形表格頭部加一個input框：

<div class="layui-inline">
　　<input class="layui-input" id="edt-search" value="" placeholder="輸入關鍵字">
</div>
<button class="layui-btn" id="btn-search" type="button">搜索</button>

js中添加代碼

//搜索
                            $(document).on("click","#btn-search",function() {
                                treeTable.openAll(dataTable);
                                setTimeout(function(){
                                    select();
                                },200);//延遲搜索，因為樹狀列表展開與查詢渲染存在沖突
                            });
                            function select(){
                                var keyword = $('#edt-search').val();
                                var searchCount = 0;
                                $('#auth-table').find('tbody tr td').each(
                                    function() {
                                        $(this).css('background-color','transparent');
                                        var text = $(this).text();
                                        if (keyword != ''&& text.indexOf(keyword) >= 0) {
                                            $(this).css('background-color','rgba(250,230,160,0.5)');
                                            if (searchCount == 0) {
                                                $("#scrolldiv").animate({"scrollTop":$(this).offset().top - 50},500);
                                            }
                                            searchCount++;
                                        }
                                });
                                if(searchCount == 0){
                                    layer.msg("無匹配", {
                                        icon : 4
                                    });
                                }
                                if (keyword == '') {
                                    layer.msg("請輸入搜索內容", {
                                        icon : 5
                                    });
                                }
                            }

其中scrolldiv來源請看：

LayuiAdmin 滾動條設置問題解決

滾動條定位可以根據自己需要調整

---

結束