欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 23:29:21
最近有遇到需要对部门进行排序,使用的ztree插件,遂有了这么一篇,表结构就很正常那种树形结构,包含如下3个关键字段即可,数据是拖拽完排序后最终表里存放的数据形式IDPIDORDER100201302401005010160102首先我们初始化ztree时需要设置可编辑状态,然后初始化 var _setting = { check: { enable: false...

最近有遇到需要对部门进行排序,使用的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 数据集合<br>
     *      如果拖拽操作为 移动,treeNodes 是当前被拖拽节点的数据集合。<br>
     *      如果拖拽操作为 复制,treeNodes 是复制后 clone 得到的新节点数据。<br>
     * @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请求方式)见链接

本文地址:https://blog.csdn.net/qq_27331631/article/details/107417873