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作为根节点

猜你喜欢

转载自www.cnblogs.com/fightingkaikai/p/11270957.html