1.表格树treetable
注:https://fly.layui.com/extend/treetable/
<table class="layui-table layui-form treeTable" id="tree-table"></table>
{ elem: '#tree-table',// 必须 url: 'data/table-tree.json',// (url和data参数必须设置一个) data: [{},{},{},...], icon_key: 'title',// 必须 top_value: 0, primary_key: 'id', parent_key: 'pid', hide_class: 'layui-hide', icon: { open: 'layui-icon layui-icon-triangle-d', close: 'layui-icon layui-icon-triangle-r', left: 16, }, cols: [{ key: 'title', title: '名称', width: '100px', template: function(item){return '显示内容'} },{},...], checked: { key: 'id', data: [0,1,4,10,11,5,2,6,7,3,8,9], }, is_click_icon: false, is_checkbox: false, is_cache: true, end: function(e){}, }
搜索高亮显示
//搜索 $('#btn_Search').click(function () { var keyword = $('#Name').val(); var searchCount = 0; treeTable.openAll(re); setTimeout(function () { $('#tree-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) { $('html,body').stop(true); $('html,body').animate({ scrollTop: $(this).offset().top - 150 }, 500); } searchCount++; } }); if (keyword == '') { layer.msg("请输入搜索内容", { icon: 5 }); } else if (searchCount == 0) { layer.msg("没有匹配结果", { icon: 5 }); } }, 200) });
加入权限时若要求不同的人登入显示不同的组织,注意如果parentid不为0,则要转为0作为根节点