ztree拖拽排序后维护数据库中的排序字段

最新推荐文章于 2024-03-15 16:57:10 发布

Hafywang

最新推荐文章于 2024-03-15 16:57:10 发布

阅读量1.9k

点赞数 2

分类专栏： web，互联网文章标签： jq js ztree

本文链接：https://blog.youkuaiyun.com/weixin_36728104/article/details/74931580

版权

web，互联网专栏收录该内容

8 篇文章

订阅专栏

本文介绍使用zTree插件实现拖拽排序的方法，重点在于如何通过回调函数控制拖拽行为，确保仅在同一父节点下进行排序，并在排序后通过算法自动调整节点的排序值(seq)，最后触发AJAX请求更新数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//捕获节点被拖拽放下之前的事件回调函数，并且根据返回值确定是否允许拖拽完成（只允许同一父节点下的拖拽排序）
function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
    var parentTreeNode = treeNodes[0].getParentNode();
    var parentTargetNode = targetNode.getParentNode();
    if (parentTreeNode.tId !== parentTargetNode.tId) {
        return false;
    }
    return true;
};

//拖拽排序结束后的回调（维护seq）
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var node = treeObj.getNodeByTId(treeNodes[0].tId);
    //获取父节点 保存父节点真实id
    var parentNode = node.getParentNode();
    objPId = parentNode.TrueId;
    //获取拖拽后节点前一个节点（没有的话preNodeSeq赋值0）
    var preNode = node.getPreNode();
    var preNodeSeq = 0.00;
    var nextNodeSeq = 0.00;
    if (preNode !== undefined && preNode !== null && preNode !== "") {
        preNodeSeq = preNode.Seq;
    }
    //获取拖拽后节点后一个节点(没有的话nextNodeSeq赋值前一个节点+1)
    nextNodeSeq = preNodeSeq + 1;
    var nextNode = node.getNextNode();
    if (nextNode !== undefined && nextNode !== null && nextNode !== "") {
        nextNodeSeq = nextNode.Seq;
    }
    //根据前一节点和后一节点的seq维护当前节点的新seq
    node.Seq = (preNodeSeq + nextNodeSeq) / 2;
    treeObj.updateNode(node);
    $.ajax({
        type: "post",
        dataType: "json",
        data: {
            'Type': node.TrueType,
            'ObjectId': node.TrueId,
            'Seq': node.Seq,
        },
        url: "/IndustryCategory/UpdateIndustryCategorySeq",
        success: function (data) {
        }
    });
};

拖拽排序后拖动的节点的seq（排序字段）值为目标位置上一节点和下一节点的seq取算数平均值（这样就不影响其他节点的seq，只需要更新一条数据即可完成排序）在通过回调函数触发ajax更新数据库的对应字段