jsTree调整排序前端页面实现及遇到的一些问题

问题：刚刚完成了一个关于树（jsTree）节点的排序调整的功能（上移一个或者下移一个）。

解决思路：使用jsTree 中的move_node() 方法（移动节点到新的父节点）。获取到选中树节点（selectedNode）的索引值（selectedNodeIndex）及其父节点（ParentNode），然后使用move_node(selectedNode，ParentNode，newNodeIndex) 方法移动该节点其父节点的新位置即可。

move_node() 详细说明可见https://blog.csdn.net/Zhu_daye/article/details/104496687

代码（仅前端 js ）：

// flag=1：下移一个位置，flag=-1:上移一个位置
function MoveJsTreeNode(flag)
{
    var RosterTree = $('#treeview1').jstree(true);
    var selectedNode = RosterTree.get_selected(); //获选中节点
    var parentID = selectedNode.parent;//当前选择节点的父节点ID
    var parentNode = RosterTree.get_node(parentID);//父节点
    var RosterNodeIDs = RosterTree.get_node(parentID).children//选中节点的所有同级节点
    //获取当前选择节点的索引值
    if (RosterNodeIDs.length > 0) {
        var selectedNodeIndex = $.inArray(selectedNode.id, RosterNodeIDs);//选择节点索引值
        // 上/下 移一个位置
        RosterTree.move_node(selectedNode, parentNode, selectedNodeIndex + flag);
    }
}

测试时发现将选中节点上移一个位置成功，下移一个位置则失效。

调试发现 回调函数可以正常运行，也没有报错，且 selectedNodeIndex + flag 的值也是正确的。可见是move_node()是已经成功执行的。

 RosterTree.move_node(selectedNode, parentNode, selectedNodeIndex + flag, function () { alert( selectedNodeIndex + flag); });

  百度也没发现相关内容，无奈翻了 jsTree.js 中  move_node()方法的源码，虽然看不懂，但也发现了一些眉目。

根据推测 move_node() 源码中 tmp 应该是所选择节点 （selectedNode） 的索引值（即本人所写的函数 MoveJsTreeNode()中的selectedNodeIndex），而 pos 应该是 selectedNode 移动后新的索引（MoveJsTreeNode()中的selectedNodeIndex + flag）。源码中判断 pos > tmp 时 pos 进行自减一。本人所写的函数 MoveJsTreeNode(flag) ，下移时传给 flag 的 值 为 1 （下移一个位置），如果move_node()方法中 tmp 是所选择节点selectedNode索引值的话，对应pos = tmp + 1。此时pos > tmp，故pos自减后就等于所选节点原索引。就相当于没有进行移动。

试了试将下移节点操作中的 flag 的值设置为 2 ，成功将选中节点下移一个位置（同理可得想要使节点下移两个位置时应将 flag  值设置为3，依次类推），成功下移 ！

function MoveDownJsTreeNode(flag)
{
    flag = 2;
    var RosterTree = $('#treeview1').jstree(true);
    var selectedNode = RosterTree.get_selected(); //获选中节点
    var parentID = selectedNode.parent;//当前选择节点的父节点ID
    var parentNode = RosterTree.get_node(parentID);//父节点
    var RosterNodeIDs = RosterTree.get_node(parentID).children//选中节点的所有同级节点
    //获取当前选择节点的索引值
    if (RosterNodeIDs.length > 0) {
        var selectedNodeIndex = $.inArray(selectedNode.id, RosterNodeIDs);//选择节点索引值
        // 上/下 移一个位置
        RosterTree.move_node(selectedNode, parentNode, selectedNodeIndex + flag);
    }
}

关于这个问题还有另一种思路，既然节点上移一个能成功，那就将所选节点的下一个节点往上移一个位置这样能达到同样的效果。当然这个办法不适用于一次移动两个及以上位置的情况。

//下调一个位置
function MoveDownJsTreeNode()
{
    var RosterTree = $('#treeview1').jstree(true);
    var selectedNode = RosterTree.get_selected(); //获选中节点
    var parentID = selectedNode.parent;//当前选择节点的父节点ID
    var parentNode = RosterTree.get_node(parentID);//父节点
    var RosterNodeIDs = RosterTree.get_node(parentID).children//选中节点的所有同级节点
    //获取当前选择节点的索引值
    if (RosterNodeIDs.length > 0) {
        var selectedNodeIndex = $.inArray(selectedNode.id, RosterNodeIDs);//索引值
        /******重点******/
        var nextNode = RosterTree.get_node(RosterNodeIDs[selectedNodeIndex + 1]);
        RosterTree.move_node(nextNode, parentNode, nodeIndex);
    }
}