更改并发布 Jquery 数组

Question

https://github.com/dbushell/Nestable 我正在使用 David Bushell 的上述源代码来创建可拖放编辑的嵌套列表。我有两个（相互连接的）主列表，它们的 id 是 #nestable 和 #nestable2

这两个列表可以在这个 JSFiddle:https://jsfiddle.net/zs8bm237/ 上看到。在底部，github 代码添加了两个带有 id 的 #nestable-ouput 和 #nestable2-output 的文本区域。这些显示了两个列表的层次结构。每次拖放操作到新结构后，此输出都会更改。对于 JSFiddle 中显示的状态，显示的输出将是：

output #nestable-output: [{"id":2,"children":[{"id":1,"children":[{"id":8},{"id":9}]}]},{"id":4},{"id":5}]

output #nestable2-output: [{"id":3},{"id":6},{"id":7}]

下面给出了用于创建这些列表的 JQuery 代码。我一直在进一步研究代码（参见代码中的 cmets）。

我要发送：

• 将创建的列表添加到名为 process_update.php 的 php 文件中

• 最重要的是，我需要知道发送的是#nestable还是#nestable2，方法是发送一个额外的post变量，或在发送列表之前编辑列表到：

  output #nestable-output: [{"id":0,"children":[{"id":2,"children":[{"id":1,"children":[{"id":8},{"id":9}]}]},{"id":4},{"id":5}]}]
  
  output #nestable2-output: [{"id":'',"children":[{"id":3},{"id":6},{"id":7}]}]
  

javascript：

var updateOutput = function(e)
{
    var list   = e.length ? e : $(e.target),
        output = list.data('output');
    if (window.JSON) {
        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));

            //Need to send altered array through here!
            $.post('process_update.php', ???output???, function(data) {
            console.log('succes')
            });
    } else {
        output.val('JSON browser support required for this demo.');
    }
};

// activate Nestable for list 1
$('#nestable').nestable({
    group: 1
})
.on('change', updateOutput);

// activate Nestable for list 2
$('#nestable2').nestable({
    group: 1
})
.on('change', updateOutput);

// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
updateOutput($('#nestable2').data('output', $('#nestable2-output')));

我一直在尝试，但由于我对 JQuery 很糟糕，我不知道要更改哪个变量以及如何更改。

编辑：在 github 项目中定义的“序列化”函数调用：

        serialize: function()
    {
        var data,
            depth = 0,
            list  = this;
            step  = function(level, depth)
            {
                var array = [ ],
                    items = level.children(list.options.itemNodeName);
                items.each(function()
                {
                    var li   = $(this),
                        item = $.extend({}, li.data()),
                        sub  = li.children(list.options.listNodeName);
                    if (sub.length) {
                        item.children = step(sub, depth + 1);
                    }
                    array.push(item);
                });
                return array;
            };
        data = step(list.el.find(list.options.listNodeName).first(), depth);
        return data;
    },

Answer 1

您可以像这样在数据中发布多个变量：

        $.post('process_update.php', 
            { 'whichnest' : 'nestable2', 'output' : output }, 
            function(data) {
                console.log('succes')
            }
        );

然后在服务器端，引用$_POST['whichnest'] 和$_POST['output']

根据您在下面的评论问题进行更新。我使用了全局 last_touched，我们在 change() 上使用适当的值对其进行修改

var last_touched = '';
var updateOutput = function(e)
{
    var list   = e.length ? e : $(e.target),
        output = list.data('output');
    if (window.JSON) {
        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));

            //Need to send altered array through here!
            $.post('process_update.php', 
                { 'whichnest' : last_touched, 'output' : output.val() }, 
                function(data) {
                    console.log('succes')
                }
            );
    } else {
        output.val('JSON browser support required for this demo.');
    }
};

// activate Nestable for list 1
$('#nestable').nestable({
    group: 1
})
.on('change', function(){ last_touched = 'nestable'; })
.on('change', updateOutput );

// activate Nestable for list 2
$('#nestable2').nestable({
    group: 1
})
.on('change', function(){ last_touched = 'nestable2'; })
.on('change', updateOutput );

// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
updateOutput($('#nestable2').data('output', $('#nestable2-output')));