layui treetable 組件

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作為根節點