php ztree 拖拽排序,zTree通用拖拽排序，实时保存数据库，批量更新部分节点

最近有遇到需要对部门进行排序，使用的ztree插件，遂有了这么一篇，

表结构就很正常那种树形结构，包含如下3个关键字段即可，数据是拖拽完排序后最终表里存放的数据形式

ID

PID

ORDER

10

0

20

1

30

2

40

10

0

50

10

1

60

10

2

首先我们初始化ztree时需要设置可编辑状态，然后初始化

var _setting = {

check: {

enable: false

},

data: {

simpleData: {

enable: true

}

},

// 开启拖拽

edit: {

drag: {

// 打开复制功能，Ctrl+鼠标左键点击后拖拽

isCopy: false,

// 打开移动功能，鼠标左键点击后拖拽

isMove: true

},

// 打开编辑

enable: true,

// 关闭删除

showRemoveBtn: false,

// 关闭修改名称

showRenameBtn: false

},

callback: {

//节点点击事件

onClick: _treeDepOnClick,

//拖拽结束事件

onDrop: _zTreeOnDrop

}

};

jQuery.fn.zTree.init(jQuery("#tree"), _setting, _zNodes)

拖拽的核心是思考节点的关系，比如同级排序变更节点范围，跨级拖拽影响节点等，原则上尽可能使其操作改动范围小

当同级别排序和跨节点拖拽时，通过判断拖拽节点的父节点，获取其所有子节点的下标位置

当子节点拖拽到根节点时，只取节点层级level为0的树节点，通过其对应的getIndex获取所处位置

具体实现如下

/**

*

* @param event 标准的 js event 对象

* @param treeId 目标节点 targetNode 所在 zTree 的 treeId，便于用户操控

* @param treeNodes 被拖拽的节点 JSON 数据集合

* 如果拖拽操作为 移动，treeNodes 是当前被拖拽节点的数据集合。

* 如果拖拽操作为 复制，treeNodes 是复制后 clone 得到的新节点数据。

* @param targetNode 成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。如果拖拽成为根节点，则 targetNode = null

* @param moveType 指定移动到目标节点的相对位置."inner"：成为子节点，"prev"：成为同级前一个节点，"next"：成为同级后一个节点.如果 moveType = null，表明拖拽无效

*/

var _zTreeOnDrop = function (event, treeId, treeNodes, targetNode, moveType) {

if (!moveType) {

return false;

}

var zTree = $.fn.zTree.getZTreeObj(treeId);

var paramData = [];

var nodeData = [];

//子节点拖拽到跟节点 和 根节点的相互排序

if (targetNode == null || treeNodes[0].level == 0) {

nodeData = zTree.getNodesByParam("level", 0);

} else {

// 拖拽自己成为子节点

var node = zTree.getNodeByTId(treeNodes[0].parentTId);

if (node.isParent) {

nodeData = zTree.transformToArray(node.children);

}

}

$.each(nodeData, function (i, item) {

var dept = {};

dept["id"] = item.id;

dept["pid"] = item.pId;//根目录则为null

dept["order"] = item.getIndex();//核心：当前节点同级的下标位

paramData.push(dept);

});

//得到这次操作需要变更的数据范围

console.log(JSON.stringify(paramData));

//请求后台批量处理即可...

};

需要注意的是： 假如当跟节点现在的顺序是0、1、2、3，当把1拖拽入3下方成为子节点时，一级节点的排序则为0、2、3，不是0、1、2，只有当节点变更需要一级排序时才会变更一级的序号，同理位于子节点跨节点拖拽完成后，也不改变原先子节点的顺序排列，只有当该层级再次发生拖拽排序改变才会重新计算顺序，对于结果展示和业务逻辑都不影响，旨意在于尽可能少改动数据

简单来说： 只改动拖拽后的层级顺序，不影响原来位置的层级顺序

可能会遇到的问题：

关于SpringBoot 接收List参数问题(POST请求方式)见链接