jstree中如何回滚无法移动的节点

Question

我试图弄清楚如何仅回滚未成功移动的文件夹节点。下面的代码是我正在尝试做的事情的示例。当您选择了几个文件夹并将它们移动到另一个文件夹中时，就会出现问题。如果其中一个目录无法移动，我希望能够将其回滚到其原始父目录。 不幸的是 $.jstree.rollback(data.rlbk); 会将所有选择的文件夹回滚到之前的位置。

$("#tree").jstree({...}).bind("move_node.jstree", function (e, data) {
    // process all selected nodes directory
    data.rslt.o.each(function (i) {
         // Send request.
         var move = $.parseJSON($.ajax({
             url: "./jstree.php",
             type: 'post',
             async: false,
             data: {
                 operation:  "move_dir",
                 ....
             }
         }).responseText);
         // When everything's ok, the reponseText will be {success: true}
         // In all other cases it won't exist at all.
         if(move.success == undefined){
             // Here I want to rollback the CURRENT failed node.
             // $.jstree.rollback(data.rlbk); will rollback all 
             // of the directories that have been moved.
         }
    }
});

有办法做到这一点吗？

Answer 1

我以前看过使用 jstree，但没有在我的代码中使用它。因此，代码可能不正确，但概念应该正确。

根据您的代码，您似乎正在服务器端执行移动操作，并且希望更新树以反映结果。

根据 jsTree 文档，您似乎无法提交节点更新并回滚到上次提交。

您可以回滚树（所有更改）并随后执行移动，而不是仅回滚您不需要的更改。

为了更好地理解下面的代码，您可能需要阅读它（或创建副本），而不需要在“if”语句的条件中设置或引用“wasTriggeredByCode”的行。

$("#tree").jstree({...}).bind("move_node.jstree", function (e, data) {

    var jsTree = $(this);
    var successes = [];

    // Becomes true when function was triggered by code that updates jsTree to
    //  reflect nodes that were successfully moved on the server
    var wasTriggeredByCode = false;

    // process all selected nodes directory
    data.rslt.o.each(function (i) {

         // I'm not certain that this is how the node is referenced
         var node = $(this);

         wasTriggeredByCode = (wasTriggeredByCode || node.data('redoing'));

         // Don't perform server changes when event was triggered from code
         if (wasTriggeredByCode) {
             return;
         }

         // Send request.
         var move = $.parseJSON($.ajax({
             url: "./jstree.php",
             type: 'post',
             async: false,
             data: {
                 operation:  "move_dir",
                 ....
             }
         }).responseText);

         if(move.success){
             successes.push(node);
         }
    });

    // Don't continue when event was triggered from code
    if (wasTriggeredByCode) {
         return;
    }

    // Roll back the tree here
    jsTree.rollback(data.rlbk);

    // Move the nodes
    for (var i=0; i < successes.length; i++) {
        var node = successes[i];

        // According to the documentation this will trigger the move event,
        //  which will result in infinite recursion. To avoid this you'll need
        //  to set a flag or indicate that you're redoing the move.
        node.data('redoing', true);

        jsTree.move_node(node, ...);

        // Remove the flag so that additional moves aren't ignored
        node.removeData('redoing');
    }
});

Answer 2

我想过在 jstree 中有类似“onbeforenodemove”事件的东西，如下所示：

$("#tree").jstree({...}).bind("before_move_node.jstree", function (e, data) {...}

所以我查看了 jstree.js 文件（版本 jsTree 3.1.1）并搜索原始“move_node.jstree”处理程序的声明。它发现它声明了起始行 3689：

move_node: function (obj, par, pos, callback, is_loaded, skip_redraw, origin) {...}

该函数在其主体末尾包含以下行：

this.trigger('move_node', { "node" : obj, "parent" : new_par.id, "position" : pos, "old_parent" : old_par, "old_position" : old_pos, 'is_multi' : (old_ins && old_ins._id && old_ins._id !== this._id), 'is_foreign' : (!old_ins || !old_ins._id), 'old_instance' : old_ins, 'new_instance' : this });

上面的行实际上调用使用 .bind("move_node.jstree") 声明的回调。
所以在这个函数体的开头，我

var before_data = { "node": obj, "parent": new_par.id, "position": pos, "old_parent": old_par, "old_position": old_pos, 'is_multi': (old_ins && old_ins._id && old_ins._id !== this._id), 'is_foreign': (!old_ins || !old_ins._id), 'old_instance': old_ins, 'new_instance': this, cancelled: false };
this.trigger('before_move_node', before_data);
if (before_data.cancelled) {
    return false;
}

在before_data赋值的末尾添加了这样的内容：Mind "cancelled": false。

还请注意在分配 new_par 等值之后插入上述内容。

我页面上的代码（jsTree 实例化）现在如下所示：

$('#tree')
    .jstree({
        core: {...},
        plugins: [...]
    })
    .bind('before_move_node.jstree', function (e, data) {
        if (...) {
            data.cancelled = true;
        }
    })

传递给“before_move_node.jstree”的数据对象包含与您在标准“move_node.jstree”数据参数中收到的相同值，因此您可以根据一切来决定是否要取消移动或放开它。如果您决定取消，只需将附加的“已取消”属性设置为 true 即可。整个行动将不会发生。

Answer 3

正如文档所述 https://github.com/vakata/jstree/wiki# more-on-configuration，您可以查看more.core属性

示例

$('#jstree1').jstree({
    core: {
        check_callback: async (operation, node, node_parent, node_position, more) => {
            switch (true) {
                case operation === 'move_node':
                    let canmove = true
                    const dropped = more.core === true // not dragging anymore...
                    if (dropped) {
                        // before move..
                        const success = await yourHttpRequest()
                        if (!success) {
                            canmove = false
                        }
                    } else {
                        canmove = yourCheckHere()
                    }
                    return canmove
            }
        }
    }
})

示例2

document.addEventListener("DOMContentLoaded", function () {
    const bootstrap = (() => {
        myTree.mySetup()
    })

    const myTree = {
        mySetup: () => {
            $('#jstree1').jstree({
                core: {
                    check_callback: (operation, node, node_parent, node_position, more) => {
                        switch (true) {
                            case operation === 'move_node':
                                return myTree.myGates.canMove(node, node_parent, node_position, more)
                        }

                        // deny by default
                        return false
                    }
                },
                plugins: ['dnd']
            })
                .on('move_node.jstree', (node, parent, position, old_parent, old_position, is_multi, old_instance, new_instance) => {
                    myTree.myHandlers.onMove({
                        node, parent, position, old_parent, old_position, is_multi, old_instance, new_instance
                    })
                })
        },
        myGates: {
            canMove: (node, node_parent, node_position, more) => {

                const canmove = true
                const dropped = more.core === true

                if (dropped) {
                    const success = alberoSx.myHandlers.onBeforeMove({
                        node, node_parent, node_position, more
                    })
                    if (!success) {
                        canmove = false
                    }
                } else {
                    canmove = yourCheckHere()
                }

                return canmove
            }
        },
        myHandlers: {
            onBeforeMove: async () => {
                // try to update the node in database
                const success = await yourHttpRequestHere()
                return success
            },
            onMove: () => {
                // node moved in the ui
                // do other stuff...
            },
        }
    }

    bootstrap()
})