复杂表头

Posted 风之约

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复杂表头相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复杂表头</title>
</head>
<body>
    
    <script type="text/javascript">
        var data = [
            {
                key: ‘A‘,
                nodes: 4,
                children: [
                    { key: ‘A1‘ },
                    { key: ‘A2‘, nodes: 2,
                        children: [
                            { key: ‘A21‘ },
                            { key: ‘A22‘, nodes: 1, children: [{ key: ‘A221‘ }] }
                        ] 
                    },
                    { key: ‘A3‘ }
                ]
            },
            {
                key: ‘B‘,
                nodes: 4,
                children: [
                    { key: ‘B1‘, nodes: 2, 
                        children: [
                            { key: ‘B11‘, nodes: 1, children: [{ key: ‘B111‘ }] },
                            { key: ‘B12‘ }
                        ] 
                    },
                    { key: ‘B2‘ },
                    { key: ‘B3‘ }
                ]
            }
        ];

        

        function printColumn(row, layer, index = 0) {
            if (row.length === 0) return ‘‘;

            var nextRow = [];
            var tpl = ‘<tr>‘;

            row.forEach(v => {
                if (v.nodes) {
                    tpl += ‘<td colspan="‘ + v.nodes + ‘">‘ + v.key + ‘</td>‘;
                    nextRow = nextRow.concat(v.children);
                } else {
                        tpl += ‘<td rowspan="‘+(layer - index)+‘">‘ + v.key + ‘</td>‘;
                }

            });

            tpl += ‘</tr>‘;

            if (nextRow.length) {
                tpl += printColumn(nextRow, layer, index + 1);
            }

            return tpl;
        }

        function printRow(col, layer, index = 0) {
            if (layer === index) return ‘‘;

            col.forEach(v => {
                let size = layer - index - 1;
                tpl += ‘<tr>‘;
                if (v.nodes) {
                    tpl += ‘<td rowspan="‘ + (v.nodes) + ‘">‘ + v.key + ‘</td>‘;
                    printCell(v.children.shift(), layer, index + 1, size);
                    tpl += ‘</tr>‘;
                    if (v.children.length) {
                        printRow(v.children, layer, index + 1);
                    }
                } else {
                    tpl += ‘<td colspan="‘ + (size + 1) + ‘">‘ + v.key + ‘</td></tr>‘;
                }
            });
        }

        function printCell(col, layer, index, size) {
            if (col.nodes) {
                tpl += ‘<td rowspan="‘+ col.nodes +‘">‘ + col.key + ‘</td>‘;
                printCell(col.children.shift(), layer, index + 1, size - 1);
                if (col.children.length) {
                    printRow(col.children, layer, index + 1, size);
                }
            } else {
                tpl += ‘<td colspan="‘ + size + ‘">‘ + col.key + ‘</td>‘;
            }
        }


        var table = ‘<table border=1>‘;
        table += printColumn(data, 4);
        table += ‘</table>‘;
        
        var tpl = ‘<table border=1>‘;
        printRow(data, 4);
        tpl += ‘</table>‘;

        document.write(table + tpl);
    </script>
</body>
</html>

 

以上是关于复杂表头的主要内容，如果未能解决你的问题，请参考以下文章

解决layui-table复杂表头数据错位问题

excel表格中制作复杂斜线表头的教程

以下代码片段的算法复杂度

关于代码片段的时间复杂度

[转]ASP.NET 2.0中GridView无限层复杂表头的实现

代码片段使用复杂的 JavaScript 在 UIWebView 中插入 HTML？