javascript AngularJS：table colspan rowspan动态计算

qq24tv8q 于 11个月前发布在 Java

关注(0)|答案(2)|浏览(102)

我有JSON结构，如下所示，每个包含标题和子列。子列可能会或可能不会有额外的SubCloumns。
从那里我想生成表标题，所以我需要相应地计算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":[

                  ]
               }
            ]
         }
      ]
   }
]

字符串

JavaScript

来源：https://stackoverflow.com/questions/41139027/angularjs-table-colspan-rowspan-dynamic-calculation

2条答案

按热度按时间

qlzsbp2j1#

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);

    }]);

个字符

赞(0）回复(0）举报 11个月前

zbq4xfa02#

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>

赞(0）回复(0）举报 11个月前

我来回答

javascript AngularJS：table colspan rowspan动态计算

2条答案

相关问题

热门标签

最新问答