复杂表头

时间：2017-11-12 21:53:20 阅读：149 评论：0 收藏：0 [点我收藏+]

标签：text function javascrip col var log har htm color

<!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>

复杂表头

标签：text function javascrip col var log har htm color

原文地址：http://www.cnblogs.com/zhoulingfeng/p/7822908.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行