Question

您好我正在尝试创建一个在单击列数据时展开/ collaspe行的网格。我的网格看起来像

首先显示第一列数据，所有其他列数据为空白但他们的标题是显示。
接下来，点击第一列的“+”图标，然后点击下一行显示扩展和第二列数据，并且所有重新映射都是空白的。
接下来，当点击第二列的“+”图标时，它会展开并显示显示第三列数据，所有剩余都是空白。
所以......

为此我尝试创建第一级，我的样本是 - http://plnkr.co/edit/p7NHNCRiewHAvEEuByyK?p=preview

我的示例代码是 -

$scope.myData = [{icon:"",Domain: "Moroni", project:"" },
{icon:"",Domain: "Tiancum", project:"" },
{icon:"",Domain: "Jacob", project:"" },
{icon:"",Domain: "Nephi", project:"" },
{icon:"",Domain: "Enos", project: ""}];
$scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'icon',
        displayName: '',
        cellTemplate: '<div><i class="fa fa-plus-square" aria-hidden="true" ng-click="foo(row.entity.Domain)" ng-bind="row.getProperty(col.field)">></i></div>'
      },{
        field: 'Domain',
        displayName: 'Domain',
        cellTemplate: '<div  ng-click="foo(row.getProperty(col.field))" ng-bind="row.getProperty(col.field)"></div>'
      }, {
        field: 'project',
        displayName: 'project'
      }

    ]
  };

请建议我如何创建expand / collaspe功能，我只想使用Angular-Grid（ng-grid）。

Answer 1

我相信你想要UI-grid TreeView

将'ui.grid.treeView'添加到角度模块。

您的网格模板：

 <div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>

Demo Plunker

Expand-Collaspe使用Angular ng-grid

1 个答案: