AngularJS：テーブル列スパン行スパン動的計算

Question

以下のようなJSON構造があります。タイトルおよびサブ列です。 サブ列には余分なサブクラスがある場合とない場合があります。

私はので、私はそれに応じて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>