一看就会，超有用活字格技能：一百六十八、EL-表格拖拽排序

收藏

本帖最后由 Simon.Sun 于 2023-1-6 16:20 编辑

一、背景
受 gczxxu 格友大佬的在格友杂谈中帖子（帖子见文末的参考链接）启发，就想能不能用 SortableJS 这个拖拽库去实现表格的拖拽排序。
首先提一点是这边使用的是 8.0.104.0 版本，表格使用的是 EL-表格。活字格内置的表格的表格体使用 canvas 绘制的，还没能想到结合这个拖拽库的实现方案。
先看下效果：
EL-表格拖拽.gif865131835.png

二、实现步骤
这里说明下实现上述效果的一些步骤设置。
1. 工程文件引入 SortableJS 拖拽库；
image.png578718261.png

2. 页面加载命令初始化 Sortable 对象：
image.png28006590.png

这里简单说下这段代码的含义，其中涉及到 SortableJS 类库的配置项，详细配置可以参考官网的说明。
这里先获取到 EL-表格表格体 DOM 对象，然后创建调用拖拽库的 API 初始化 Sortable 对象。
创建时传入了两个参数，一个就是表格体的 DOM 对象，另一个拖拽库的一些配置项目。
配置项目里的 handle 属性用来设置拖动手柄，可以不设置，这样整个表格的行都可以拖拽。
onEnd 函数里回调执行一些拖拽完毕后的逻辑，这里是将拖拽前后的序号分别设置到页面上的 oldIndex 和 newIndex 单元格上，另外一个单元格用来触发命令执行。
3. 创建服务端命令，在表格拖拽完毕后去更新数据序号，页面上通过拖拽标识单元格去触发，更新完序号后重新给表格设置数据：
image.png885948181.png

这里简单说明下序号的更新逻辑，更新使用了执行 SQL 命令。首先要判断是向上拖拽还是向下拖拽，如果是向上拖拽，
比如如果是将序号 5（旧序号）向上拖拽到序号 1（新序号），想实现的效果就是将 5 改成 1, 原本 1 至 4 的序号都依次增加 1：

先将序号 5 的的序号临时修改为 -1；
将 1、2、3、4 序号的数据都依次加 1；
最后将序号为 -1 的数据的序号改为 1。

向下拖拽的逻辑和向上拖拽类似，这里就不在展开说明。
这里附上 demo，仅供参考，格友们有其他的方案，或者有错误的地方欢迎发帖补充指正。

1-05-EL-表格拖拽.fgcc (1.05 MB, 下载次数: 101)

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

[易学技巧] 一看就会，超有用活字格技能：一百六十八、EL-表格拖拽排序

0 个回复

Wyn高级认证

Wyn认证

活字格认证

活字格高级认证