Filter保存筛选状态，再次加载表单数据时恢复筛选条件

收藏

本帖最后由 Lynn.Dou 于 2022-6-16 09:40 编辑

背景：

有一些小伙伴遇到这样的需求：
在表格加载的数据中，用户做了一些筛选的操作，并希望再次加载时还能保留这些加载项。
而我们一般不会把用户的每次操作的完整文档都执行保存，那么能否仅保留筛选状态呢？

答案是肯定的，我们可以通过以下代码来获取到当前sheet表单的filter：

var filter = sheet.rowFilter()

复制代码

然后我们可以发现，这个filter实际上是有一个toJSON方法的，如API所示：
https://demo.grapecity.com.cn/spreadjs/help/latest/content/SpreadJS~GC.Spread.Sheets.Filter.RowFilterBase~toJSON.html

通过调用这个toJSON方法，可以序列化出来一个json对象，对象结构如下：

image.png841687011.png

可以看到，包括筛选区域、筛选按钮是否可见、筛选列标、被筛选掉的行等信息都有，我没有完全展开它，
实际上这个对象就包含了所有与筛选器相关的属性，而且与sheet无关联。

我们只要把它保存起来，当再次加载数据，需要再次把它投射到指定区域然后执行筛选时，只需要调用：

sheet.rowFilter().fromJSON(json);

复制代码

需要注意的是，fromJSON后filter只是拿到了筛选状态，

还没有执行出最终结果集，所以需要再调用一下filter的filter()方法，如下：

sheet.rowFilter().filter();

复制代码

之后刷新sheet，即可重新载入筛选设置。

sheet.repaint()

复制代码

longyan1979 · longyan1979

我做了一个简单的demo还原rowFilter的toJSON和fromJSON的功能，但是发现fromJSON并不能还原筛选框之前存储的状态，能麻烦看看什么问题吗？

Fiooona · Fiooona

您好，在您的Demo中对table的筛选重置一下既可：

document.getElementById('FilterfromJSON').addEventListener('click',function () {
sheet.suspendPaint()
table.rowFilter().reset()
var filterjson=document.getElementById("stateText").value;
console.info(JSON.parse(filterjson));
table.rowFilter().fromJSON(JSON.parse(filterjson));
sheet.resumePaint()
});

复制代码