JSTREE, dnd - 通过拖放进行 SQL 数据库更新

Question

我在 laravel 中设置了一个分层 mysql 表，如下所示（带有示例数据）：

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

我正在使用带有 dnd 和 state 插件的 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);
});