Question

我正在使用Angular Ui-grid。试图在其中实现多级嵌套。有人已经在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以获得第二级嵌套网格时，它会抛出未定义的内容。

到目前为止，是否有人成功实施具有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将包含一个div标签，用于定义另一个＆＃34; ui-grid＆＃34;并且有指令＆＃34; ui-grid-expandable＆＃34;。

<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需要定义一个带有＆＃34; ui-grid＆＃34;的div标签，指示网格为每一行渲染一个嵌套网格。它不需要扩展指令（但你可以添加一个进入4级深度）。我叫做MultiLevelTemplate。

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

现在，在同一个angularJS块中，您可以动态构建每一行的gridOptions和columnDef，您需要通过该级别的数据进行另一级迭代。这将允许您定义第3级网格的subGridOptions和columnDefs。所以你在＆＃34; i＆＃34;循环，并启动＆＃34; x＆＃34;循环在其中。请注意，在设置数据源时，它使用我自己的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

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

角度Ui-Grid多级嵌套

1 个答案: