php 将 jquery ui-sortable 位置保存到数据库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7097168/
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
save jquery ui-sortable positions to DB
提问by user899163
Im trying to replicate the functionality of this page (http://www.kissfm.ro/fresh-top-40/) for a friend who has a small web radio. The site is setup in wordpress fyi.
我正在尝试为拥有小型网络收音机的朋友复制此页面 (http://www.kissfm.ro/fresh-top-40/) 的功能。该网站是在 wordpress fyi 中设置的。
So my question is, after searching stackoverflow, how do i save/get the revised charts based on the users input? i found how to save single submittions but how do i get the final charts based on the user choice?
所以我的问题是，在搜索 stackoverflow 之后，我如何根据用户输入保存/获取修改后的图表？我找到了如何保存单个提交但如何根据用户选择获得最终图表？
Thanks in advance! (code or link to tutorial welcome!)
提前致谢！（欢迎使用代码或教程链接！）
回答by Mihai Iorga
make your HTML sortable, add javascript, and save to php on update.
使您的 HTML 可排序，添加 javascript，并在更新时保存到 php。
<ul id="sortable">
<li id="1">elem 1</li>
<li id="2">elem 2</li>
<li id="3">elem 3</li>
<li id="4">elem 4</li>
</ul>
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
$.get('saveSortable.php', {order:newOrder});
}
});
});
回答by Jon Koeter
I know this is old, but what I do is just add a hidden input element in every LI. They would all have a the same name with [] at the end. This way, when you post the form containing the UL, you will get an array in your post values in the order you just put your list.
我知道这很旧，但我所做的只是在每个 LI 中添加一个隐藏的输入元素。它们都将具有相同的名称，末尾带有 []。这样，当您发布包含 UL 的表单时，您将按照刚刚放置列表的顺序在发布值中获得一个数组。
回答by Svetoslav Marinov
According to the Sortable docs we have to prefix the LI's id with some string. Then if we serialize the sortable in the update method we'll get a nice array in php e.g. new_order[]=1&new_order[]=2 etc.
根据 Sortable 文档，我们必须在 LI 的 id 前面加上一些字符串。然后，如果我们在 update 方法中序列化 sortable，我们将在 php 中得到一个不错的数组，例如 new_order[]=1&new_order[]=2 等。
var data = $(this).sortable('serialize');
<ul id="sortable">
<li id="new_order_1">elem 1</li>
<li id="new_order_2">elem 2</li>
<li id="new_order_3">elem 3</li>
<li id="new_order_4">elem 4</li>
</ul>
回答by praguan
You may POST with input to DB and save it
Here we go:
<ul id="sortable">
<li id="1"><input type ="text" value="elem 1"/></li>
<li id="2"><input type="text" value="elem 2"/></li>
.
.
</ul>
<style>
#sortable{
border: hidden;
}
</style>
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
$.get('saveSortable.php', {order:newOrder});
}
});
});
Hope it helps ;)
希望能帮助到你 ;）
