AngularJS: Tabelle colspan rospan dynamische Berechnung

Question

Ich habe JSON-Struktur wie unten enthält jeweils Titel und SubColumns. Unterspalten können oder müssen nicht extra SubCloumns haben.

Von dass ich will Tabelle generieren Überschrift so brauche ich ColSpan und RowSpan entsprechend zu berechnen.

Was ich weiß, ist Rekursion zu verwenden, habe ich versucht, aber da ich neu bin, kann ich nicht herausfinden, wie es wird funktioniert.

So kann mir jemand sagen, wie werde ich eine rekursive Funktion verwenden?

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