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

我有一本书

我使用的是两级可扩展行的角度ui网格

人-可扩展

朋友-可扩展

宠物-普通

人员级别具有此可扩展行模板

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

好友级别具有以下可扩展行模板：

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

宠物等级有如下选项：

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

在Friends级别，我希望能够显示带有合并单元格和单个文本的groupname。有点像标题，但在列表中。列表将预先排序，因此我可以在需要的位置插入一些组名。 这是通过向该级别添加自定义行模板（见上文）并像这样测试行的id来完成的（实际上，我将测试一个属性）：

{{row.entity.name}

在其他示例中，当不使用可扩展行时，这种方法可以很好地工作

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

---

我怎样才能防止这种情况？我只希望文本在src中调试和挖掘后显示一次。我发现原因是可扩展网格。网格创建两个容器，一个用于可扩展图标，另一个用于内容。因此，当我们应用数据时，内容会复制到具有可展开按钮的容器和具有文本的容器中

唯一的解决方法是使用合并行功能并检查保存这些单元格的容器的属性，该属性可由范围中的colContainer访问

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

我对合并行所做的是将合并true和示例标题添加到数据集中

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>

{{row.entity.title}

或

{{row.entity.title}

根据要显示标题的位置选择其中一个。我更喜欢“主体”，因为在可扩展按钮单元上设置了宽度限制

普朗克例子

---

注意：Plunkr示例在行模板中同时具有“left”和“body”。这样你就能看到区别了

是否要将第一个条目（“Rosanne”）也包括在朋友列表中，然后使用自定义标题，或忽略第一个条目？忽略第一个条目我已添加了一个带有标题的解决方案，并列出了朋友列表中的所有条目。看看是否有帮助。为什么要省略第一个条目？你不需要将所有好友列表显示为可扩展网格吗？对不起，我误解了！你说得对，我以为你指的是左撇子。对于这个例子来说，省略第一个条目只是一种攻击。谢谢你的帮助！如果这不是太多的问题，你是如何找到这个解决方案的？我搜索了文档，发现在自定义模板中，如果他们想包含自定义页脚，他们正在做类似的事情。在那之后，当我调试它时，我在colContainer.btw中找到了范围变量，你显然得到了赏金，但还需要40分钟

<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>

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

<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>