javascript 拖放项目并在数据库中更新后，如何在jQuery Nestable插件中获取子项和id？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31531817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get children and id in jQuery Nestable plugin after drag and drop item and update in database?
提问by DMS-KH
I'm using jQuery Nestable pluginto create a menu editor for a website. I've tried to get item IDand Childrenafter user clicks on menu items and change their position.
我正在使用jQuery Nestable 插件为网站创建菜单编辑器。在用户单击菜单项并更改其位置后，我尝试获取项ID和子项。
Issue: I don't know how to get ID and Children and update into database.
问题：我不知道如何获取 ID 和 Children 并更新到数据库中。
Here is jQuery Nestable plugin
这是jQuery Nestable 插件
<script>
$(document).ready(function () {
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));
} else {
output.val('JSON browser support required for this demo.');
}
console.log(list.nestable('serialize'));
console.log(window.JSON.stringify(list.nestable('serialize')));
};
$('#nestable').nestable({
group: 1,
maxDepth: 7,
}).on('change', updateOutput);
updateOutput($('#nestable').data('output', $('#nestable-output')));
});
</script>
Here is HTML for menus
这是菜单的 HTML
<div class="cf nestable-lists">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" data-id="1"> <div class="dd-handle">Item 1 when parent == 0</div> </li>
<li class="dd-item" data-id="44"> <div class="dd-handle"> Item 2 when this parent_id == its id </div>
<ol class="dd-list">
<li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
<li class="dd-item" data-id="4"><div class="dd-handle">Item 3</div></li>
<li class="dd-item" data-id="5"><div class="dd-handle">Item 3</div></li>
<li class="dd-item" data-id="6"><div class="dd-handle">Item 3</div></li>
</ol>
</li>
</ol>
</div>
</div>
The result on Console
控制台上的结果
[{"id":1},{"id":44,"children":[{"id":3},{"id":4},{"id":5},{"id":6}]}]
Edition
版
In my structure I want to update menus when Parent_id==idwhere menus idand create level of menus item bu number of M_order. But I don't know to create this structure.
在我的结构中，我想在Parent_id == idwhere menus id时更新菜单，并创建M_order的菜单项级别。但我不知道创建这个结构。
And here is var_dump($this->input->post('list'));
这是 var_dump($this->input->post('list'));
1 =>
array (size=1)
'id' => string '2' (length=1)
2 =>
array (size=1)
'id' => string '3' (length=1)
3 =>
array (size=1)
'id' => string '4' (length=1)
4 =>
array (size=1)
'id' => string '5' (length=1)
5 =>
array (size=2)
'id' => string '6' (length=1)
'children' =>
array (size=1)
0 =>
array (size=2)
...
Here is images of my Tablestructure and menus
这是我的表结构和菜单的图像
采纳答案by Marcos Dimitrio
To send the list to PHP, you have to change your updateOutputfunction to post the list via AJAX:
要将列表发送到 PHP，您必须更改updateOutput函数以通过 AJAX 发布列表：
<script>
$(document).ready(function () {
var updateOutput = function (e) {
var list = e.length ? e : $(e.target), output = list.data('output');
$.ajax({
method: "POST",
url: "saveList.php",
data: {
list: list.nestable('serialize')
}
}).fail(function(jqXHR, textStatus, errorThrown){
alert("Unable to save new list order: " + errorThrown);
});
};
$('#nestable').nestable({
group: 1,
maxDepth: 7,
}).on('change', updateOutput);
});
</script>
In PHP, you will receive $_POST['list'], which will look as shown below. In this case, I dragged the 4th item (id 6) to the 2nd place (after id 3) on the list, so the expected order is 3, 6, 4, 5:
在 PHP 中，您将收到$_POST['list']，如下所示。在这种情况下，我将第 4 个项目（id 6）拖到列表中的第 2 个位置（在 id 3 之后），因此预期顺序是3, 6, 4, 5：
Array (
[0] => Array (
[id] => 1
)
[1] => Array (
[id] => 44
[children] => Array (
[0] => Array (
[id] => 3
)
[1] => Array (
[id] => 6
)
[2] => Array (
[id] => 4
)
[3] => Array (
[id] => 5
)
)
)
)
Then you can just iterate over this array and update your database accordingly.
然后你可以迭代这个数组并相应地更新你的数据库。
Edit: In order to save the data in PHP, you'll have to use recursion to navigate all the children arrays that might exist. I wrote a simple script that will save on every ordering change:
编辑：为了将数据保存在 PHP 中，您必须使用递归来导航可能存在的所有子数组。我编写了一个简单的脚本，可以保存每次更改顺序：
index.php
索引.php
<?php
require "pdoConnection.php";
$list = getFullListFromDB($conn);
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/dbushell/Nestable/master/jquery.nestable.js"></script>
<script>
$(document).ready(function () {
var updateOutput = function (e) {
var list = e.length ? e : $(e.target), output = list.data('output');
$.ajax({
method: "POST",
url: "saveList.php",
data: {
list: list.nestable('serialize')
}
}).fail(function(jqXHR, textStatus, errorThrown){
alert("Unable to save new list order: " + errorThrown);
});
};
$('#nestable').nestable({
group: 1,
maxDepth: 7,
}).on('change', updateOutput);
});
</script>
</head>
<body>
<div class="cf nestable-lists">
<div class="dd" id="nestable">
<?php displayList($list); ?>
</div>
</div>
</body>
</html>
<?php
function getFullListFromDB($conn, $parent_id = 0) {
$sql = "
SELECT id, parent_id, description
FROM items
WHERE parent_id = :parent_id
ORDER BY m_order
";
$statement = $conn->prepare($sql);
$statement->bindValue(':parent_id', $parent_id, PDO::PARAM_INT);
$statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach($result as &$value) {
$subresult = getFullListFromDB($conn, $value["id"]);
if (count($subresult) > 0) {
$value['children'] = $subresult;
}
}
unset($value);
return $result;
}
function displayList($list) {
?>
<ol class="dd-list">
<?php foreach($list as $item): ?>
<li class="dd-item" data-id="<?php echo $item["id"]; ?>"><div class="dd-handle"><?php echo $item["description"]; ?></div>
<?php if (array_key_exists("children", $item)): ?>
<?php displayList($item["children"]); ?>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ol>
<?php
}
?>
saveList.php
保存列表.php
<?php
require "pdoConnection.php";
if ($_POST) {
saveList($conn, $_POST['list']);
exit;
}
function saveList($conn, $list, $parent_id = 0, &$m_order = 0) {
foreach($list as $item) {
$m_order++;
$sql = "
UPDATE items
SET
parent_id = :parent_id,
m_order = :m_order
WHERE id = :id
";
$statement = $conn->prepare($sql);
$statement->bindValue(":parent_id", $parent_id, PDO::PARAM_INT);
$statement->bindValue(":id", $item["id"], PDO::PARAM_INT);
$statement->bindValue(":m_order", $m_order, PDO::PARAM_INT);
$statement->execute();
if (array_key_exists("children", $item)) {
saveList($conn, $item["children"], $item["id"], $m_order);
}
}
}
?>
pdoConnection.php
pdoConnection.php
<?php
$server = "myServer"; $database = "DbName"; $username = "myself"; $password = "secret";
$conn = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
?>
Table definition (MSSQL)
表定义 (MSSQL)
CREATE TABLE [items](
[id] [int] NOT NULL,
[parent_id] [int] NOT NULL,
[description] [nvarchar](100) NOT NULL,
[m_order] [int] NOT NULL,
CONSTRAINT [PK_items] PRIMARY KEY CLUSTERED ([id] ASC)
) ON [PRIMARY]
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (1, 0, N'Item 1', 1)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (2, 0, N'Item 2', 2)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (3, 2, N'Item 3.1', 3)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (4, 2, N'Item 3.2', 4)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (5, 2, N'Item 3.3', 5)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (6, 2, N'Item 3.4', 6)
