js实现树状表

最新推荐文章于 2024-04-14 09:38:12 发布

四月_h

最新推荐文章于 2024-04-14 09:38:12 发布

阅读量495

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46389242/article/details/130805866

版权

项目中需要展示表格结构为父子关系，如图所示
在这里插入图片描述
代码如下

//bootstrap代码
		function tableList(){
			$('#' + id).treegrid({
                pagination: false,
                pageNumber: 10,
                rowStyle: rowStyle,
                data: datas,
                idField: 'DBid',
                treeField: 'year',
                description: true,
                autowidth: true,
                shrinkToFit: true, //表格宽度自动充满
                detailView: true,
                columns: isdata,
                onLoadSuccess: function() {
                    $('#' + id).treegrid("collapseAll");
                    // $('#' + id).treegrid("expandAll");
                },
                onExpand: function() {
                    let heights
                    if (textid == 'recommend1') {
                        heights = $(`.jobInfoRecomand1 .datagrid-view2 .datagrid-body tbody:eq(0)`).innerHeight() * 1 + $(`.jobInfoRecomand1 .datagrid-view2 .datagrid-header`).innerHeight() * 1 + 20
                    } else if (textid == 'recommend2') {
                        heights = $(`.jobInfoRecomand2 .datagrid-view2 .datagrid-body tbody:eq(0)`).innerHeight() * 1 + $(`.jobInfoRecomand2 .datagrid-view2 .datagrid-header`).innerHeight() * 1 + 22
                    }
                    $('.panel-body-noheader').css("height", `${heights}px`);
                },
                onCollapse: function() {
                    let heights
                    if (textid == 'recommend1') {
                        heights = $(`.jobInfoRecomand1 .datagrid-view2 .datagrid-body tbody:eq(0)`).innerHeight() * 1 + $(`.jobInfoRecomand1 .datagrid-view2 .datagrid-header`).innerHeight() * 1 + 20
                    } else if (textid == 'recommend2') {
                        heights = $(`.jobInfoRecomand2 .datagrid-view2 .datagrid-body tbody:eq(0)`).innerHeight() * 1 + $(`.jobInfoRecomand2 .datagrid-view2 .datagrid-header`).innerHeight() * 1 + 22
                    }
                    $('.panel-body-noheader').css("height", `${heights}px`);
                }
            })

            if (textid == 'recommend1') {
                $('.jobInfoRecomand1 .datagrid-view2 .datagrid-body').attr('id', 'datagrid-body-id1')
                mainlayuiPages('datagrid-body-id1', 'recommendPage1');
            } else if (textid == 'recommend2') {
                $('.jobInfoRecomand2 .datagrid-view2 .datagrid-body').attr('id', 'datagrid-body-id2')
                mainlayuiPages('datagrid-body-id2', 'recommendPage2');
            }
		}
            
		function mainlayuiPages(tableID, pageDIV) {
            var workTablePageData = [];
            var workTablePageDatas = [];
            $(`#${tableID} tbody .treegrid-tr-tree`).find('tr').each(function(index, item) {
                workTablePageDatas.push($(item)[0].outerHTML);
            })
            $(`#${tableID} tbody`).find('tr').each(function(index, item) {
                if (workTablePageDatas.indexOf($(item)[0].outerHTML) == -1) {
                    workTablePageData.push($(item)[0].outerHTML + '');
                }
            })
            layui.use('laypage', function() {
                var laypage = layui.laypage;
                laypage.render({
                    elem: pageDIV,
                    limit: 8,
                    layout: ['prev', 'page', 'next'],
                    count: workTablePageData.length,
                    jump: function(obj) {
                        var isa = []
                        for (let i in workTablePageData.concat()) {
                            if (workTablePageData.concat()[i].indexOf("treegrid-tr-tree") != -1) {
                                isa.push(i)
                            }
                        }
                        //模拟渲染
                        $('#' + tableID + ' tbody')[0].innerHTML = function() {
                            var arr = [],
                                thisData = workTablePageData.concat().splice(obj.curr * obj.limit - obj.limit, isa.indexOf(`${obj.curr * obj.limit}`) > -1 ? obj.limit + 1 : obj.limit);
                            layui.each(thisData, function(index, item) {
                                arr.push(item);
                            });
                            return arr.join('');
                        }();
                        let heights
                        if (tableID == 'datagrid-body-id1') {
                            heights = $(`#${tableID} tbody:eq(0)`).innerHeight() * 1 + $(`.datagrid-view2 .datagrid-header`).innerHeight() * 1 + 22
                        } else if (tableID == 'datagrid-body-id2') {
                            heights = $(`#${tableID} tbody:eq(0)`).innerHeight() * 1 + $(`.datagrid-view2 .datagrid-header`).innerHeight() * 1 + 22
                        }
                        $('.panel-body-noheader').css("height", `${heights}px`);
                        $('.datagrid-view').css("height", `${heights}px`);
                        $('.datagrid-body').css("height", `${heights}px`);
                    }
                });
            });
        }