0

我正在使用 Angular Ui-grid。尝试在其中实现多级嵌套。有人已经在uiGrid github中提出了这个问题。但该解决方案似乎不起作用。

我已经像这样更改了 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 时，它会抛出未定义。

到目前为止，有没有人成功实现了超过 2 或 3 个级别的可扩展 UI 网格。如果是，请分享 plunker 或 fiddle 或详细解释将非常有帮助！

4

1 回答 1

0

我现在有这个工作。我假设您已经构建了正确的数据来绑定 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 将包含一个 div 标记，该标记定义另一个“ui-grid”并具有指令“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

2级网格的expandableRowTemplate需要定义一个带有“ui-grid”的div标签，指示网格为每一行渲染一个嵌套网格。它不需要扩展指令（但您可以添加一个指令以达到 4 级深度）。我的叫做 MultiLevelTemplate 。

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

现在在同一个 angularJS 块中，您正在动态构建每一行的 gridOptions 和 columnDefs，您需要通过该数据级别进入另一个迭代级别。这将允许您为第 3 级网格定义 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

如果您执行了上述所有操作，那么如果您的数据设置正确，它应该可以正常工作。

于 2016-07-06T00:54:40.500 回答