javascript - JSTREE、dnd - 通过拖放更新 SQL 数据库

Question

我在 laravel 中设置了一个分层 mysql 表，如下(带有示例数据):

id | name   | parent_id
1  | test   | 0
2  | test 2 | 0
3  | test   | 2

我使用带有 dnd 和状态插件的 JSTree 显示此数据。问题是，当您使用 dnd (允许拖动/编辑列表)来移动列表对象时，sql 表也需要更新，以便编辑是永久性的，并且不会在刷新时丢失。

我不知道从哪里开始？有人有任何提示或可以帮助解决问题吗？

我相信我需要让 javascript 操作与 laravel 事件/监听器交互，以便动态更新 sql 表。

Answer 1

您需要以某种方式将操作发送到服务器，这通常是使用 ajax 调用来完成的。您将监听 move_node 事件，然后从树数据中获取所需的适当数据。以下是一些可能有帮助的代码:

var treeData = {your tree data};
$($tree).jstree({
    core: {
        data: treeData,
        check_callback: function (op, node, parent, position, more) {
            switch (op) {
                case 'move_node':
                    return moveNode(node, parent, position, more);
                case 'copy_node':
                    return copyNode(node, parent, position, more);
            }
        },
        multiple: false
    },
    plugins: ['dnd']
}).on('copy_node.jstree', function(e, data) {
    $app.debug('copy_node completed', data);
}).on('move_node.jstree', function(e, data) {
    // this is where you connect to the server!
    doMoveNode(data);
});