改变和后期的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阵列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-04 20:33