一看就会，超有用活字格技能：一百八十九、EL-树形控件拖拽排序服务端实现

sz_xd

本帖最后由 Simon.Sun 于 2023-11-14 18:14 编辑

在活字格 9.1 EL 插件更新了两个重要的组件，一个是树形控件（EL-树形控件），一个是树状表格（EL-虚拟表格），有了这两个组件后，展示树状结构的数据，就更加直观了。
EL-树形控件很好用的一个功能是支持拖拽，但是这个拖拽是前端的行为，要想一直保留拖拽的结果，就需要在拖拽树形图时，在服务端对拖拽的结果进行保存。这里用服务端命令实现了拖拽排序保存的逻辑，效果如下：
树形图拖拽排序保存.gif516903686.png

数据的排序规则约定为，同级节点第一个顺序号从 1 开始，依次递增。
下面来说说实现的思路：
image.png436599120.png

首先在 EL-树形图拖拽命令的上下文里有三个变量，分别为：

拖拽节点值：树形图拖动节点的值，比如树形图数据值绑定的为 ID，这里值就是拖拽数据的 ID；
目标节点值：拖拽到目标节点的值，比如树形图数据值绑定的为 ID，这里值就是目标数据的 ID；
拖拽类型：拖拽类型有三种，分别为：

inner 表示将一个树节点拖拽到目标节点里面，拖拽后拖拽节点作为目标节点的子节点；
before 表示将一个树节点拖拽到目标节点上面，拖拽后拖拽节点作为目标兄弟节点，拖拽节点可以和目标节点可能在同一个目标节点下，也可能不在；
after 表示将一个树节点拖拽到目标节点下面，拖拽后拖拽节点作为目标兄弟节点，拖拽节点可以和目标节点可能在同一个目标节点下，也可能不在；

拖拽排序的后端逻辑就依赖这三个参数实现。主要逻辑如下：
image.png386778869.png

如果拖拽类型为 inner，先将拖拽节点从原有位置移出来，然后将其放到目节点下，并将排序更新为目标节点子节点数量加 1。
如果拖拽类型为 before 或 after，先将拖拽节点当前位置移出操作，然后做目标节点的移入操作，最后更新拖拽节点的序号和上级节点。

顺序号的维护逻辑主要在移出和移入这两个私有的服务端命令里实现。
先说移出：
image.png84745482.png