AngularJS：表colspan rowspan动态计算

Question

我有JSON结构，如下面每个包含标题和 SubColumns 。 子列可能有也可能没有额外的SubCloumn 。

由此我想生成表格标题，因此我需要相应地计算 ColSpan 和 RowSpan 。

我所知道的是必须使用递归，我已经尝试了但是因为我是新手我无法弄清楚它是如何工作的。

那么任何人都可以指导我如何使用递归函数？

[
   {
      "Title":"Column 1",
      "SubColumns":[

      ]
   },
   {
      "Title":"Column 2",
      "SubColumns":[

      ]
   },
   {
      "Title":"Column 3",
      "SubColumns":[
         {
            "Title":"Column 3 : 1",
            "SubColumns":[

            ]
         },
         {
            "Title":"Column 3 : 2",
            "SubColumns":[
               {
                  "Title":"Column 3 : 2 : 1",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 2 : 2",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 2 : 3",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 2 : 4",
                  "SubColumns":[

                  ]
               }
            ]
         },
         {
            "Title":"Column 3 : 3",
            "SubColumns":[
               {
                  "Title":"Column 3 : 3 : 1",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 3 : 2",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 3 : 3",
                  "SubColumns":[

                  ]
               }
            ]
         }
      ]
   }
]

Answer 1

angular.module('myapp', []).controller('tableColSpanRowSpan', ['$scope', function($scope){

        $scope.finalArrayHTML = [];

        var jsonDATA = [
            {
                "Title":"Column 1",
                "SubColumns":[

                ]
            },
            {
                "Title":"Column 2",
                "SubColumns":[

                ]
            },
            {
                "Title":"Column 3",
                "SubColumns":[
                    {
                        "Title":"Column 3 : 1",
                        "SubColumns":[

                        ]
                    },
                    {
                        "Title":"Column 3 : 2",
                        "SubColumns":[
                            {
                                "Title":"Column 3 : 2 : 1",
                                "SubColumns":[

                                ]
                            },
                            {
                                "Title":"Column 3 : 2 : 2",
                                "SubColumns":[

                                ]
                            },
                            {
                                "Title":"Column 3 : 2 : 3",
                                "SubColumns":[

                                ]
                            },
                            {
                                "Title":"Column 3 : 2 : 4",
                                "SubColumns":[

                                ]
                            }
                        ]
                    },
                    {
                        "Title":"Column 3 : 3",
                        "SubColumns":[
                            {
                                "Title":"Column 3 : 3 : 1",
                                "SubColumns":[

                                ]
                            },
                            {
                                "Title":"Column 3 : 3 : 2",
                                "SubColumns":[

                                ]
                            },
                            {
                                "Title":"Column 3 : 3 : 3",
                                "SubColumns":[

                                ]
                            }
                        ]
                    }
                ]
            }
        ];

        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].Title, 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://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.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>
    </table>
</div>

</body>
</html>

Answer 2

angular.module('myApp', []);

function myAppController($scope) {

    $scope.treeData = [
   {
      "Title":"Column 1",
      "SubColumns":[

      ]
   },
   {
      "Title":"Column 2",
      "SubColumns":[

      ]
   },
   {
      "Title":"Column 3",
      "SubColumns":[
         {
            "Title":"Column 3 : 1",
            "SubColumns":[

            ]
         },
         {
            "Title":"Column 3 : 2",
            "SubColumns":[
               {
                  "Title":"Column 3 : 2 : 1",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 2 : 2",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 2 : 3",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 2 : 4",
                  "SubColumns":[

                  ]
               }
            ]
         },
         {
            "Title":"Column 3 : 3",
            "SubColumns":[
               {
                  "Title":"Column 3 : 3 : 1",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 3 : 2",
                  "SubColumns":[

                  ]
               },
               {
                  "Title":"Column 3 : 3 : 3",
                  "SubColumns":[

                  ]
               }
            ]
         }
      ]
   }
];

};

#nested-table{
    margin-bottom: 0px;
}
#expanded-data {
    margin-left: 20px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">

    <tr style="width:100%">
        <td>
                {{data.Title}}
                
            <div id="expanded-data">
                <table class="table table-bordered" id="nested-table">
                   <td ng-repeat="data in data.SubColumns" ng-include="'tree_item.html'">
                   </td>
                </table>
            </div>
        </td>
    </tr>
    
</script>


<table class="table table-bordered">
    <td ng-repeat="data in treeData" ng-include="'tree_item.html'">   
    </td>  
</table>
</div>