登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

122 主题	1万帖子	1万积分

积分: 16481

131358
金币
122
主题
11583
帖子

最新发帖

实现自定义排序按钮弹出框

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

论坛元老 / 发表于：2022-8-24 15:30 / 查看：2196 / 回复：0

相信有看过下面这篇文章的朋友应该对应自定义筛选框的自定义不陌生了。
https://gcdn.grapecity.com.cn/showtopic-57729-1-21.html

那有的朋友除了想要自定义筛选，那么还有的朋友想要自定义排序，那么今天这个教程来了。背景是这样的，因为有的朋友用数据绑定，在数据源中会有id这样一些不需要展示的字段，但是排序过后，id和数据源就对不上了。就像下面的例子那样，因为我们的排序简单理解就是交换单元格。
image.png157829283.png

image.png157829283.png

想要解决这个问题，可以通过自定义的排序框实现。那自定义的排序逻辑就是把数据源拿出来，自己排一遍，排完在setDataSource回去。

与筛选弹窗类似，第1步，自定义弹框方法：customFilterDialog
image.png604610290.png

image.png604610290.png

2、初始化弹窗，也就是把弹窗用html+css“画出来”
image.png795280761.png

image.png795280761.png

3、实现open方法，通过样式控制筛选弹框的显示
image.png551557311.png

image.png551557311.png

4、选定升序或者降序后，关闭弹窗
image.png261216124.png

image.png261216124.png

、

另外，需要注意的是，如果想要点击之后筛选按钮能够正常显示下图的排序效果
image.png710776672.png

image.png710776672.png

需要维护一下的排序信息
image.png829692687.png

image.png829692687.png

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

自定义升降序_update.html (18.55 KB, 下载次数: 78)

收藏

回复

0 个回复