改变和后期的Jquery阵列 [英] Alter and post Jquery array
问题描述
https://github.com/dbushell/Nestable 我使用上面的源代码由大卫布舍尔来创建嵌套列表是拖放编辑。我有两个（互联）主要列出了与他们的id是#nestable和＃nestable2
这两个表可以看出在这的jsfiddle： https://jsfiddle.net/zs8bm237/ 。在底部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阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
