在 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>
和 ts 喜欢:
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 中获得默认设置,而不是您保存的状态。