Angular Ui-Grid多级嵌套

Question

我正在使用Angular Ui-grid.Trying在其中实现多层嵌套。已经有人在uiGrid github中提出了这个问题。但这个解决方案似乎行不通。

我已经像this一样修改了JSON。我正在尝试形成嵌套子网格。

下面是我的代码

  $scope.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    enableGridMenu: true,
    expandableRowHeight: 150,
    paginationPageSizes: [5, 10, 15],
    paginationPageSize: 5,
    //subGridVariable will be available in subGrid scope
    expandableRowScope: {
      subGridVariable: 'subGridScopeVariable'
    }
  }

  $scope.gridOptions.columnDefs = [
    { name: 'id', enableHiding: false },
    { name: 'name' },
    { name: 'age' },
    { name: 'address.city' }
  ];

  $http.get('http://private-7a7085-getfriends1.apiary-mock.com/getfriends')
    .success(function (data) {
      for (i = 0; i < data.length; i++) {
        //for(i = 0; i < 50; i++){
        data[i].subGridOptions = {
          columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }],
          data: data[i].friends,
          expandableRowTemplate: 'expandableRowTemplate1.html',
          enableGridMenu: true,
          expandableRowHeight: 150
        }

        for (j = 0; j < data[i].friends.length; j++) {
          data[i].subNestedGridOptions = {
            columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }],
            data: data[i].friends[j].friends
          }
        }
      }
      $scope.gridOptions.data = data;
    });

第二级嵌套的html(expandableRowTemplate1.html)如下所示

<div ui-grid="row.entity.subNestedGridOptions" style="height:150px;"></div>

当我将数据传递给第二级嵌套网格的ui-grid时，它抛出了undefined。

到目前为止，有没有人成功地实现了2级或3级以上的可扩展UI网格？如果是，请分享plunker或小提琴或详细的解释将是非常有帮助的！

Answer 1

我现在已经开始工作了。我假设你已经构建了正确的数据来绑定到3个级别。我假设您有一个2级网格也在工作(父网格的行将展开以显示子网格)。以下是我为使其工作而添加的几个关键部分：

顶级网格在定义它的div标记中具有指令ui- grid -expandable。它位于我的html视图中。

<div ui-grid="gridThreeLayer" ui-grid-expandable></div>

顶层网格在其gridOptions (angularJS)中定义一个expandableRowTemplate。

$scope.gridThreeLayer = { ........
expandableRowTemplate: '..your path.../expandableRowTemplate.html' }

顶级网格的expandableRowTemplate将包含一个定义另一个"ui-grid“的div标记，并具有指令"ui-grid-expandable”。

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable></div>

当数据被绑定到angularJS中时，第二级网格有它的subGridOptions和columnDefs动态构建(对于我来说是通过$http.get() )。此时，您需要在第二级网格上指定一个expandableRowTemplate属性，该属性告诉它展开并显示第三级网格。

for (i = 0; i < response.data.length; i++) {
response.data[i].subGridOptions = { .....
columnDefs: [ ............],

data: response.data[i].IP, // note that this is my 2nd level of data objects - yours will differ
expandableRowTemplate: 'AngularApp/Templates/MultiLevelTemplate.html

二级网格的expandableRowTemplate需要定义一个带有“ui-expandableRowTemplate”的div标签，指示网格为每一行呈现一个嵌套网格。它不需要用于扩展的指令(但您可以添加一个指令以深入4层)。我的名字叫MultiLevelTemplate。

<div ui-grid="row.entity.subGridOptions"></div>

现在，在同一个angularJS块中，您正在动态构建每一行的gridOptions和columnDefs，您需要对该级别的数据进行另一个级别的迭代。这将允许您定义第三级网格的subGridOptions和columnDefs。所以你在"i“循环中，并在其中开始一个"x”循环。请注意，在设置数据源时，它使用了我自己的3级数据对象。你需要在那里使用你自己的。

for (x = 0; x < response.data[i].IP.length; x++) {
response.data[i].IP[x].subGridOptions = {
columnDefs: [........],
response.data[i].IP[x].subGridOptions.data = response.data[i].IP[x].BOM; // my data

如果您完成了上述所有操作，如果您的数据设置正确，则它应该可以正常工作。