layui-treeTable 添加搜索功能css
在樹形表格頭部加一個input框:html
<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中添加代碼post
//搜索 $(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來源請看:ui
滾動條定位能夠根據本身須要調整this
結束url