Question

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

这个JSFiddle可以看到两个列表：https://jsfiddle.net/zs8bm237/。在底部，github代码添加了两个带有id＃nestable-ouput和＃nestable2-output的textarea。这些显示了两个列表的分层结构。每次拖放操作后，此输出会更改为新结构。对于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代码。我一直在进一步研究代码（参见代码中的注释）。

我想发送：

将创建的列表发送到名为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'函数调用：

        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')));

改变并发布Jquery数组

1 个答案: