复杂表头 

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

 

posted @ 2017-11-12 21:04  风之约  阅读(202)  评论(0)    收藏  举报