Devexpress ColumnChooser 在 Angular 中导航时跟踪所选列

Question

我有一个场景，用户可以使用列选择器隐藏/显示列，导航离开，然后当他/她返回到带有网格的页面时，在导航点隐藏的列仍然是隐藏的。

我考虑了一项服务，为每一列设置该列的可见性。我的问题是，当用户选中列选择器的框时，我无法检测到哪一列被隐藏。

只是举个例子。我有一个包含 3 列的表：Id、FirstName、LastName。该表的columnChooser 配置为“选择”模式。当用户单击 Id 的复选框时，我需要检测该“检查事件”并读取哪个复选框触发了它以及它关联的列。在本例中，类似于“列 Id 触发了事件”。

有没有办法可以实现这一点？有什么建议或解决办法吗？

Answer 1

在 DxDataGrid 中，您不需要跟踪列，您可以跟踪整个网格。存在StateStoring的可能性。这是存储列可见性，如果有任何分组，排序，列宽度，来自搜索面板的值等。如果您使用默认保存和加载，您可以将其存储在浏览器本地存储中，或者您可以通过 customSave 和 customLoad 覆盖它，然后可以使用自己的服务并将其存储在数据库中。

HTML 的样子：

<dx-data-grid [dataSource]="friends" [allowColumnReordering]="true" 
      showRowLines="true" height="100%" [allowColumnResizing]="true" 
      [hoverStateEnabled]="false" [width]="'100%'"
      [(selectedRowKeys)]="selectedRowKeys">

      <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
      <dxo-state-storing [enabled]="true" type="custom" [customSave]="saveGridState" 
             [customLoad]="loadGridState">
      </dxo-state-storing>

      <dxi-column dataField="Id" dataType="number" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="FirstName" dataType="string" [visible]="true">
      </dxi-column>
      <dxi-column dataField="LastName" dataType="string" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="Age" dataType="number" [visible]="false">
      </dxi-column>
</dx-data-grid>

就像：

export class FriendsGridsComponent
friends: any[] = [];
stateKey = 'friendsGrid';

constructor(pageConfigService: PageConfigService){}

 saveGridState(state) {
    console.log('saving grid state');
    this.pageConfigService.saveState(this.stateKey, state);
  }

  async loadGridState(): Promise<Object> {
    return this.pageConfigService.restoreState(this.stateKey);
    
    }
  }

PageConfigService 的实现由您负责。我的项目很大，所以我不想将其全部添加到这里，而且它对于我的项目来说也非常具体。保存状态非常简单，只需将其保存在某个地方即可。恢复有点复杂，因为您需要等待状态加载回来。如果您不等待，它将赢得 HTML 的默认设置，而不是您保存的状态。

Answer 2

@Wasullda描述的解决方案很棒。 然而，还有一种替代方法，无需在服务中创建逻辑。为了进行比较和更好地理解，我将使用上面的示例来展示该方法。

在 HTML 的

dx-grid

 中只需插入：

[stateStoring]="stateSorting"

还有

对于

dxo-column-chooser

，您可以添加选择模式：

                <dxo-column-chooser
                            [enabled]="true"
                            mode="select">
                </dxo-column-chooser>

如以下 HTML 所示：

<dx-data-grid 
      [dataSource]="friends"
      [stateStoring]="stateSorting"
      [allowColumnReordering]="true" 
      showRowLines="true" 
      height="100%" 
      [allowColumnResizing]="true" 
      [hoverStateEnabled]="false" 
      [width]="'100%'"
      [(selectedRowKeys)]="selectedRowKeys">

      <dxo-column-chooser
            [enabled]="true"
            mode="select">
      </dxo-column-chooser>

      <dxi-column dataField="Id" dataType="number" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="FirstName" dataType="string" [visible]="true">
      </dxi-column>
      <dxi-column dataField="LastName" dataType="string" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="Age" dataType="number" [visible]="false">
      </dxi-column>
</dx-data-grid>

在您的打字稿文件中，您可以简单地导入以下内容：

import DevExpress from "devextreme";
import StateStoring = DevExpress.common.grids.StateStoring;

并添加状态存储功能：

    public stateSorting: StateStoring = {
        type: 'localStorage',
        enabled: true,
        storageKey: 'stackOverflowGridStorage'
    }