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 滚动条设置问题解决

滚动条定位可以根据自己需要调整

---

结束

转载于:https://www.cnblogs.com/zktww/p/11557654.html