保存排序状态，数据绑定后恢复排序

收藏

我们在前面这篇文章中可以了解到，区域的筛选条件是可以通过toJSON/fromJSON进行序列化的。可以用于再次加载数据时，直接应用筛选。
https://gcdn.grapecity.com.cn/showtopic-74149-1-19.html

那么除了sheet层级上的rowFilter可以执行这样的操作外，还可以在table上的筛选中进行序列化和反序列化。将rowFilter序列化成json，就是下图这样的一个对象，里面有筛选的区域range，有排序的信息sortInfo等。
image.png329979552.png

那这个时候有的用户有这样一个需求，因为数据本身就是无序的，加载进来也是没有顺序。那我们在设计模板的时候将某一列设为降序或者升序，然后绑定完数据之后就能够按照模板中的sortInfo进行排序。

怎么实现呢？首先我们需要获取对应的table，然后将其rowFilter进行序列化。

var table = sheet.tables.all()[0];
var filterJson = table.rowFilter().toJSON();

复制代码

我们在上面的sortInfo中可以看到range字段，里面有一个rowCount属性，写着是1，因为我们设计模板的时候本身就是没有数据的，所以行数就是1。因此如果直接fromJSON，那么筛选就不会成功。因此，我们还需要做一次深拷贝去根据数据源的长度修改range的rowCount。

var objString = JSON.stringify(filterJson);
var obj2 = JSON.parse(objString);
obj2.range.rowCount= data.table.length;

复制代码

这个时候我们再去通过setDataSource以及fromJSON将数据以及筛选信息给到新的区域的table。

sheet.setDataSource(source);
table.rowFilter().fromJSON(obj2);

复制代码

最后遍历table，通过getSortState获取原有的升降序信息，然后调用sortColumn进行排序。

var range = table.rowFilter().range;
for (var i = range.col; i < range.col + range.colCount; i++) {
var state = table.rowFilter().getSortState(i)
if (state !== 0) {
table.rowFilter().sortColumn(i, state === 1 ? true : false);
break;
}
}

复制代码

实现效果

下载附件即可查看完整demo。

mrlion · mrlion

本帖最后由 mrlion 于 2024-1-9 18:32 编辑

表格字段包含跨sheet页的复杂公式时，主sheet300条数据排序会慢大约10s呢，
重载比首次渲染慢一倍，排序时间段内页面会阻塞住（点击不了别处，定时器不更新）

这个操作相当于下图手动触发了table 的列过滤弹框里的排序，同样的卡的效果
image.png479410094.png

Joestar.Xu · Joestar.Xu

mrlion 发表于 2024-1-9 18:04
表格字段包含跨sheet页的复杂公式时，主sheet300条数据排序会慢大约10s呢，
重载比首次渲染慢一倍，排序 ...

您好，看上去您的问题和本帖的主题没有太大的关系，为了避免混淆，请您发一个新帖详细描述一下您的问题，最好附上可以复现这个问题的Demo或文件，如果有敏感数据可以做脱敏处理，我们后续在您的新帖子中给您回复。

		自动登录	找回密码
密码			立即注册

保存排序状态，数据绑定后恢复排序

2 个回复

【16.1.0】【表格排序慢卡顿的问题】

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证