Question

我在下面有这个代码，它会自动生成带有colspan和rowspan的thead，但我无法生成与thead相关的tbody。我怎样才能做到这一点？谢谢！

我试图复制代码只转换为新的json内容但不会工作。

返回如下所示：return

所以任何人都可以指导我如何使这项工作？

angular.module('myapp', []).controller('tableColSpanRowSpan', ['$scope', function ($scope) {
    $scope.finalArrayHTML = [];
    var jsonDATA = [
            {
                "rotulo":"Simple 1",
                "SubColumns":[

                ],
                "valor":[
				"simples 0",
				"simples 1",
				"simples 2",
				"simples 3",
				"simples 4",
				"simples 5",
				"simples 6",
				"simples 7",
				"simples 8",
				"simples 9"
                ]
            },
            {
                "rotulo":"Simple 2",
                "SubColumns":[

                ],
                "valor":[
				"simples 0",
				"simples 1",
				"simples 2",
				"simples 3",
				"simples 4",
				"simples 5",
				"simples 6",
				"simples 7",
				"simples 8",
				"simples 9"
                ]
            },
            {
                "rotulo":"Multi 1",
                "SubColumns":[
                    {
                        "rotulo":"Sub 1",
						"SubColumns":[

						],
						"valor":[
						"sub 0",
						"sub 1",
						"sub 2",
						"sub 3",
						"sub 4",
						"sub 5",
						"sub 6",
						"sub 7",
						"sub 8",
						"sub 9"
						]
                    },
                    {
                        "rotulo":"Sub 2",
						"SubColumns":[

						],
						"valor":[
						"sub 0",
						"sub 1",
						"sub 2",
						"sub 3",
						"sub 4",
						"sub 5",
						"sub 6",
						"sub 7",
						"sub 8",
						"sub 9"
						]
                    }
                ]
            }
        ];
    var getColSpan = function (data, count) {
        if (data.length > 0) {
            for (var c = 0; c < data.length; c++) {
                if (data[c].SubColumns.length > 0) {
                    count = getColSpan(data[c].SubColumns, count);
                } else {
                    ++count;
                }
            }

        }
        return count;
    };

    var getDepth = function (obj) {
        var depth = 0;
        if (obj.SubColumns) {
            obj.SubColumns.forEach(function (d) {
                var tmpDepth = getDepth(d)
                if (tmpDepth > depth) {
                    depth = tmpDepth
                }
            })
        }
        return 1 + depth
    };

    var getRowSpan = function (allData, index, count) {
        if (allData[index].SubColumns.length > 0) {

        } else {
            var depth = 0;
            for (var j = 0; j < allData.length; j++) {
                var depthTmp = getDepth(allData[j]);
                if (depthTmp > depth) {
                    depth = depthTmp;
                }
            }
            return depth;
        }
        return count;
    };

    var rowIndex = 0;
    var RecursiveFunction = function (data, currentRow) {

        for (var i = 0; i < data.length; i++) {
            var tmp = { title: data[i].rotulo, conteudo: data[i].valor, colSpan: getColSpan(data[i].SubColumns, 0), rowSpan: getRowSpan(data, i, 0) };
            if (typeof $scope.finalArrayHTML[rowIndex] == 'undefined') {
                $scope.finalArrayHTML[rowIndex] = [];
            }
            $scope.finalArrayHTML[rowIndex].push(tmp);

            if (data[i].SubColumns.length > 0) {
                ++rowIndex;
                RecursiveFunction(data[i].SubColumns, data[i]);
                --rowIndex;
            }
        }

    };

    RecursiveFunction(jsonDATA, 0);

}]);

<!doctype html>
<html ng-app="myapp">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
</head>

<body>
    <div ng-controller="tableColSpanRowSpan">
        <table border="1" cellspacing="2" cellpadding="3">
            <thead>
                <tr data-ng-repeat="t in finalArrayHTML">
                    <th colspan="{{h.colSpan}}" rowspan="{{h.rowSpan}}" data-ng-repeat="h in t">{{h.title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="f in finalArrayHTML">
                    <td data-ng-repeat="j in f">{{j.conteudo}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

具有动态thead angularjs的动态tbody

0 个答案: