Question

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

人 - 可扩展
朋友 - 可扩展
宠物 - 定期

人级别具有此expandableRowTemplate

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

以及这些选项：

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

朋友级别具有此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
    }

在好友级别，我希望能够显示包含合并单元格和单个文本的组名。有点像标题，但在列表中。列表将事先排序，所以我可以在我想要的地方插入一些组名。这是通过向此级别添加自定义 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>

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

当使用可扩展行时，我想要显示组名的行似乎呈现两次，一次正确，一次在rowheader单元格中（参见下图中的Rosanne Barret）

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

Answer 1

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

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

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

我为merge行所做的是将merge true和sample title添加到数据集

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>

根据您要显示标题的位置选择其中一个。由于宽屏限制放在可扩展纽扣电池上，我更喜欢“主体”。

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

注意：Plunkr示例在行模板中同时包含“left”和“body”。这样你就可以看出差异。

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

1 个答案: