时间戳

首页 > 解决方案 > 使用分页从 Devextreme 组列中删除分组名称

angular - 使用分页从 Devextreme 组列中删除分组名称

问题描述

TL;博士

从分组行中删除列名时，如何将内容的文本保持到下一页。

问题解释

我正在使用 Devextreme 数据网格来显示数据（带分页），我注意到当按列对数据进行分组时，组名将始终显示如下：

groupingColumnName: columnValue

因此，例如，如果我有一张带有 的表格ID，Name并说Age并决定按年龄分组，我的表格将看起来像这样：

| ID    | Name   |
|----------------|
|Age: 21       v | <---- grouping row (expanded)
|----------------|
| 1     | Elise  | <---- grouping's content
| 5     | Mary   |
|----------------|
|Age: 24       v |
|----------------|
| 2     | Joseph |
|----------------|
|Age: 17       > | <---- grouping row (collapsed)
|----------------|
|----------------|
|Age: 30        v|
|----------------|
| ...            |

我尝试使用并设法仅获取该值，但现在如果行已展开但内容在下一页上，groupCellTemplate我不会得到它旁边的文本，这通常是默认情况下工作的。(Continues on the next page)

如何在删除用于分组的列名称的同时保留转到下一页的内容的文本？

标签： angulardevextreme

解决方案

我意识到一旦使用groupCellTemplate绑定，您必须手动添加通常有条件显示的任何文本，否则网格将始终按原样显示您的模板。

因此，您需要在需要时自己添加(Continues on the next page)或(Continued from previous page)文本。

我这样做的方式是使用groupContinuedMessageandgroupContinuesMessage属性。这些通常是未定义的，所以如果不是，我可以将它们附加到我的分组行文本中：

模板

<dxi-column 
  [groupCellTemplate]="formatGroupCell" 
  caption="Age"
  dataField="Age" 
  [groupIndex]="0">
</dxi-column>

.ts

formatGroupCell(elem, data) {
    let formattedValue = data.displayValue;
    formattedValue += data.groupContinuedMessage ? ` (${data.groupContinuedMessage}) ` : ''
    formattedValue += data.groupContinuesMessage ? ` (${data.groupContinuesMessage}) ` : ''
    elem.append(formattedValue);  
  }

或全部在模板中：

<dxi-column 
  [groupCellTemplate]="groupCellTemplate" 
  caption="Age"
  dataField="Age" 
  [groupIndex]="0">
</dxi-column>
<div *dxTemplate="let data of 'groupCellTemplate'">
   {{data.displayValue}}
   {{data.groupContinuesMessage ? ' ('+data.groupContinuesMessage+')' : ''}} 
   {{data.groupContinuedMessage ? ' ('+data.groupContinuedMessage+')': ''}}
</div>

现在我不必查看用于分组的列的名称，我仍然可以使用分页并知道内容何时在下一页上继续。

推荐阅读