改变和后期的Jquery阵列 | 改变和后期的Jquery阵列

本文介绍了改变和后期的Jquery阵列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用上面的源代码由大卫布舍尔来创建嵌套列表是拖放编辑。我有两个（互联）主要列出了与他们的id是#nestable和＃nestable2

这两个表可以看出在这的jsfiddle：。在底部GitHub的code加了两个textarea的具有ID的＃嵌套，输出中和＃nestable2输出。这些数据显示了两个列表的层次结构。每个拖放动作到新的结构之后，该输出变化。在的jsfiddle所示输出将是所示的状态：

 输出＃嵌套输出：[{ID：2，孩子：[{ID：1，孩子：[{ID：8} {ID：9}]}]}，{ID：4}，{ID：5}]输出＃nestable2输出：[{ID：3}，{ID：6}，{ID：7}]

用于创建这些列表jQuery的code如下。我一直在code进一步的工作（见code注释）。

我想送：

创建的列表发送到名为process_update.php php文件

重要的是，我需要知道，如果它是一个被发送至#nestable或＃nestable2顶部，无论是由之前编辑列表发送一个额外的变量后，或他们通过发送至：

 输出＃可嵌套的输出： [{\"id\":0,\"children\":[{\"id\":2,\"children\":[{\"id\":1,\"children\":[{\"id\":8},{\"id\":9}]}]},{\"id\":4},{\"id\":5}]}]输出＃nestable2输出：[{ID：，孩子：[{ID：3}，{ID：6}，{ID：7}]}]

JavaScript的：

  VAR updateOutput =功能（E）
{
    VAR列表= e.length？ E：$（e.target）
        输出= list.data（'输出'）;
    如果（window.JSON）{
        output.val（window.JSON.stringify（list.nestable（'序列化'）））; //，空，2））;            //需要通过这里给改变阵！
            .post的$（'process_update.php'，??? ???输出，功能（数据）{
            的console.log（'更迭'）
            }）;
    }其他{
        output.val（'需要这个演示JSON的浏览器支持。'）;
    }
};//激活嵌套的列表1
$（'＃嵌套'）。可嵌套（{
    组：1
}）
。对（'变'，updateOutput）;//激活嵌套的列表2
$（'＃nestable2'）。可嵌套（{
    组：1
}）
。对（'变'，updateOutput）;//输出初始序列数据
updateOutput（$（'＃嵌套）的数据（产出，$（'＃嵌套输出'）））;
updateOutput（$（'＃nestable2'）的数据（产出，$（'＃nestable2输出'）））;

我一直在努力，但我可怕与jQuery我不知道改变哪些变量，以及如何。

编辑：'序列化'函数调用在GitHub的项目中定义的：

 连载：功能（）
    {
        VAR的数据，
            深度= 0，
            名单=这一点;
            步长=功能（水平，深度）
            {
                变种数组= []，
                    项目= level.children（list.options.itemNodeName）;
                items.each（函数（）
                {
                    VAR李= $（本），
                        项= $ .extend（{}，li.data（）），
                        分= li.children（list.options.listNodeName）;
                    如果（sub.length）{
                        item.children =步骤（子，深度+ 1）;
                    }
                    的Array.push（项目）;
                }）;
                返回数组;
            };
        数据=步骤（list.el.find（list.options.listNodeName）。首先（），深度）;
        返回的数据;
    }，

解决方案

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

  $。员额（'process_update.php'，
            {'whichnest'：'nestable2，输出：输出}，
            功能（数据）{
                的console.log（'更迭'）
            }
        ）;

然后在服务器端，参照 $ _ POST ['whichnest'] 和 $ _ POST ['输出']

根据您在下面的评论的问题更新。我用一个全球性的 last_touched 这是我们与适当的值修改变化（）

  VAR last_touched ='';
VAR updateOutput =功能（E）
{
    VAR列表= e.length？ E：$（e.target）
        输出= list.data（'输出'）;
    如果（window.JSON）{
        output.val（window.JSON.stringify（list.nestable（'序列化'）））; //，空，2））;            //需要通过这里给改变阵！
            .post的$（'process_update.php'，
                {'whichnest'：last_touched，输出：output.val（）}，
                功能（数据）{
                    的console.log（'更迭'）
                }
            ）;
    }其他{
        output.val（'需要这个演示JSON的浏览器支持。'）;
    }
};//激活嵌套的列表1
$（'＃嵌套'）。可嵌套（{
    组：1
}）
。对（'变'，函数（）{last_touched ='嵌套';}）
。对（'变'，updateOutput）;//激活嵌套的列表2
$（'＃nestable2'）。可嵌套（{
    组：1
}）
。对（'变'，函数（）{last_touched ='nestable2';}）
。对（'变'，updateOutput）;//输出初始序列数据
updateOutput（$（'＃嵌套）的数据（产出，$（'＃嵌套输出'）））;
updateOutput（$（'＃nestable2'）的数据（产出，$（'＃nestable2输出'）））;

https://github.com/dbushell/Nestable I am using above source by David Bushell to create nested lists that are drag-drop editable. I have two (interconnected) main lists with their id's being #nestable and #nestable2

The two lists can be seen on this JSFiddle:https://jsfiddle.net/zs8bm237/ . At the bottom the github code added two textarea with id's #nestable-ouput and #nestable2-output . These show the hierarchal structure of the two lists. This output changes after each drag-drop action to the new structure. For the state shown in the JSFiddle the shown output would be:

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}]

The JQuery code used to create these lists is given below. I have been working further on the code(see comments in code).

I want to send:

the created list to a php file called process_update.php

on top of that I need to know if it is #nestable or #nestable2 that is being send through, either by sending an extra post variable, or by editing the lists just before they are send through to:

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}]}]

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

I have been trying, but as I am awful with JQuery I do not know which variable to alter and how.

EDIT: The 'serialize' function called as defined in the github project:

        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;
    },

解决方案

You can POST multiple variables in data like so:

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

Then on server side, reference $_POST['whichnest'] and $_POST['output']

Update based on your comment question below. I've used a global last_touched which we modify with the appropriate value on 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阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！