Angular：DevExtreme DataGrid 状态存储答案

【问题标题】：Angular : DevExtreme DataGrid State StoringAngular：DevExtreme DataGrid 状态存储
【发布时间】：2017-07-31 09:57:22
【问题描述】：

我在我的 Angular 应用下使用 DevExtreme DataGrid 小部件。

这是我的 datGrid 的视图：

<dx-data-grid
    id="gridContainer"
    [dataSource]="employees"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true">
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>
    <dxi-column
        caption="Employee"
        [width]="230"
        [fixed]="true"
        [calculateCellValue]="calculateCellValue"
    ></dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
    <dxi-column dataField="HireDate" dataType="date"></dxi-column>
    <dxi-column dataField="Position" alignment="right"></dxi-column>
    <dxi-column dataField="Address" [width]="230"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column dataField="Zipcode" [visible]="false"></dxi-column>
    <dxi-column dataField="HomePhone"></dxi-column>
    <dxi-column dataField="MobilePhone"></dxi-column>
    <dxi-column dataField="Skype"></dxi-column>
    <dxi-column dataField="Email"></dxi-column>
</dx-data-grid>

正如你在这一行中看到的那样：

<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>

我正在使用自定义方法来加载 (tableStateLoad) 并保存 (tableStateSave) 我的 DataGrid 状态（列位置和大小）。

状态保存在每次更改操作后自动完成，超时时间为 2 秒。

但我想用一个简单的按钮手动操作替换此自动保存操作。

建议？？

【问题讨论】：

grid.instance.state() 返回可以保存的状态
@yurzui 不懂，怎么用
plnkr.co/edit/e6w27E8sjbx1elVHWbqv?p=preview
@yurzui 部分帮助了我，但 s.th 仍然缺失；如果我们消除了保存的超时，如果自动保存（savingTimeout=""），我怎样才能消除那个自动保存，只需要点击按钮就可以了

标签： javascript angular typescript devexpress devextreme

【解决方案1】：

您可以使用dxo-state-storing 指令而不指定自定义保存方法：

<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000"  [customLoad]="tableStateLoad"></dxo-state-storing>

或者只是将customSave 属性设置为一个空函数。这样状态会自动加载，但不会以任何方式保存。然后，您实现一个按钮，该按钮具有一个带有自定义保存逻辑的单击处理程序，使用grid.instance.state() 访问当前网格的状态。

【讨论】：