Angular:DevExtreme DataGrid状态存储
我正在使用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秒的超时内自动完成。
但是我想用一个简单的按钮来替换这个自动保存操作 。
建议?
您可以使用dxo-state-storing
指令而不指定自定义保存方法:
<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customLoad]="tableStateLoad"></dxo-state-storing>
或者只需将customSave
属性设置为空函数即可。 这样状态会自动加载,但不会以任何方式保存。 然后你实现一个按钮,该按钮带有你的自定义保存逻辑的点击处理程序,通过grid.instance.state()
访问当前网格的状态。