AngularJS：表colspan rowpan动态计算

Question

I have JSON structure like below each contains Title and SubColumns . 我有JSON结构，如下所示，每个结构都包含Title和SubColumns 。 Subcolumns may or may not have extra SubCloumns . 子列可能有也可能没有额外的子列 。

From that I want to generate table Heading so I need to calculate ColSpan and RowSpan accordingly. 据此，我想生成表标题，因此需要相应地计算ColSpan和RowSpan 。

What I know is have to use recursion , I have tried but as I'm new I can't figure out how it will works. 我知道必须使用递归，但我已经尝试过了，但是由于我是新手，所以我不知道它如何工作。

So can any one guide me how will I use a recursive function? 那么任何人都可以指导我如何使用递归函数吗？

[
   {
      "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>

AngularJS：表colspan rowpan动态计算

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-12-14 10:03:13

解决方案2
0 2016-12-14 09:51:42

AngularJS：表colspan rowpan动态计算

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-12-14 10:03:13

解决方案2 0 2016-12-14 09:51:42

解决方案1
2 已采纳 2016-12-14 10:03:13

解决方案2
0 2016-12-14 09:51:42