angular ui 具有多个可扩展级别和合并单元格的网格

Question

我有一个plunker.

我正在使用 angular-ui-grid 和 2 级可扩展行。

人 - 可扩展
好友 - 可扩展
宠物 - 常规

People 级别有这个 expandableRowTemplate

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

以及这些选项：

$scope.gridOptions = {
  expandableRowTemplate: 'expandableRowTemplate.html',
  expandableRowHeight: 150
}

Friends 关卡有这个 expandableRowTemplate:

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

以及这些选项：

data[i].subGridOptions = {
      columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
      data: friends,
      expandableRowTemplate: 'expandableRowTemplate2.html',
      rowTemplate: 'rowTemplate.html'
    }

宠物关卡有这样的选项：

friends[j].subGridOptions = {
      columnDefs: [ {name:"Name", field:"name"} ],
      data: friends[j].pets
    }

在好友级别，我希望能够显示包含合并单元格和一段文本的群组名称。有点像 header，但在列表中。该列表将预先排序，因此我可以在需要的地方插入一些组名。这是通过向该级别添加自定义 rowtemplate（见上文）并像这样测试行的 id（实际上我将测试属性）来完成的：

<div>
  <div ng-if="row.entity.id !== 0">
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell></div>
  </div>

  <div ng-if="row.entity.id === 0" >
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
         class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
         >
    </div>

     <div class="ui-grid-cell-contents">
        <div>
          {{row.entity.name}}
        </div>
      </div>

  </div>
</div>

这种方式在不使用可扩展行的其他示例中工作正常。

使用可扩展行时，我想显示组名的行似乎被渲染了两次，一次是正确的，一次是在行header 单元格中（见下图中的 Rosanne Barret）

我该如何防止这种情况发生？我只希望文本显示一次

Answer 1

在 src 中进行一些调试和挖掘之后。我发现原因是可扩展的网格。网格创建两个容器，一个用于可扩展图标，另一个用于内容。因此，当我们应用数据时，内容会复制到具有可扩展按钮的容器和具有文本的容器中。

解决的唯一方法是使用合并行功能并检查包含这些单元格的容器的属性，可以通过作用域中的 colContainer 访问。

可扩展按钮单元格的 colContainer 名称为 'left'，内容的 colContainer 名称为 'body'。

我对合并行所做的是将合并真实和样本标题添加到数据集中

var friends = data[i].friends;
friends.unshift({
  merge: true,
  title: 'Test',
  bodyTitle: 'Body Title'
});

接下来是修改rowtemplate.html

<div>
   <div ng-if="row.entity.merge && colContainer.name == 'left'">{{row.entity.title}}</div>
   <div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell></div>
</div>

或

<div>
   <div ng-if="row.entity.merge && colContainer.name == 'body'">{{row.entity.title}}</div>
   <div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell></div>
</div>

根据要显示的位置选择其中之一 header。我更喜欢 'body'，因为可扩展按钮单元的宽度限制。

Plunkr 示例 http://plnkr.co/edit/wGhvtVGwouO01thkx9Z6?p=preview

注意：Plunkr 示例在行模板中同时包含 'left' 和 'body'。以便您可以看到差异。

angular ui 具有多个可扩展级别和合并单元格的网格

angular ui grid with multiple expandable levels and merged cells

javascript

expandable

angularjs

angular-ui

angular-ui-grid