一看就会，超有用活字格技能：一百八十九、EL-树形控件拖拽排序服务端实现
本帖最后由 Simon.Sun 于 2023-11-14 18:14 编辑在活字格 9.1 EL 插件更新了两个重要的组件，一个是树形控件（EL-树形控件），一个是树状表格（EL-虚拟表格），有了这两个组件后，展示树状结构的数据，就更加直观了。
EL-树形控件很好用的一个功能是支持拖拽，但是这个拖拽是前端的行为，要想一直保留拖拽的结果，就需要在拖拽树形图时，在服务端对拖拽的结果进行保存。这里用服务端命令实现了拖拽排序保存的逻辑，效果如下：
数据的排序规则约定为，同级节点第一个顺序号从 1 开始，依次递增。
下面来说说实现的思路：
首先在 EL-树形图拖拽命令的上下文里有三个变量，分别为：
[*]拖拽节点值：树形图拖动节点的值，比如树形图数据值绑定的为 ID，这里值就是拖拽数据的 ID；
[*]目标节点值：拖拽到目标节点的值，比如树形图数据值绑定的为 ID，这里值就是目标数据的 ID；
[*]拖拽类型：拖拽类型有三种，分别为：
[*]inner 表示将一个树节点拖拽到目标节点里面，拖拽后拖拽节点作为目标节点的子节点；
[*]before 表示将一个树节点拖拽到目标节点上面，拖拽后拖拽节点作为目标兄弟节点，拖拽节点可以和目标节点可能在同一个目标节点下，也可能不在；
[*]after 表示将一个树节点拖拽到目标节点下面，拖拽后拖拽节点作为目标兄弟节点，拖拽节点可以和目标节点可能在同一个目标节点下，也可能不在；
拖拽排序的后端逻辑就依赖这三个参数实现。主要逻辑如下：
如果拖拽类型为 inner，先将拖拽节点从原有位置移出来，然后将其放到目节点下，并将排序更新为目标节点子节点数量加 1。
如果拖拽类型为 before 或 after，先将拖拽节点当前位置移出操作，然后做目标节点的移入操作，最后更新拖拽节点的序号和上级节点。
顺序号的维护逻辑主要在移出和移入这两个私有的服务端命令里实现。
先说移出：
拖拽节点移走，相当于要包拖拽节点同级的下级节点（顺序号比拖拽节点大的节点）的顺序号减一，所以这里用执行 SQL 命令实现，对应 SQL：
UPDATE "分类表" SET "排序"="排序"-1 WHERE "上级分类"=@上级分类 AND "排序">@排序
然后是移入：
这时候需要判断拖拽类型，如果为 before，表示会拖拽到目标节点上面，就需要将目标节点即其同级下的节点的顺序号都加 1，对应的 SQL 类型为：
UPDATE "分类表" SET "排序"="排序"+1 WHERE "上级分类"=@上级分类 AND "排序">=@排序（大于等于）如果为 after，表示会拖拽到目标节点下面，就需要将除目标节点外下面的节点的顺序号都加 1，对应的 SQL 类型为：
UPDATE "分类表" SET "排序"="排序"+1 WHERE "上级分类"=@上级分类 AND "排序">@排序 （大于）
最后为了表格上可以展示树状数据，这里使用了 EL-虚拟表格，数据按照顺序号升序排列。
Demo 见附件，供大家参考:loveliness:。
页:
[1]