jQuery UI可排序，然后将订单写入数据库
我想使用jQuery UI sortable函数来允许用户设置订单，然后在更改时将其写入数据库并进行更新。有没有人可以写一个例子，说明如何做到这一点？
回答 6
Stack Overflow用户
发布于 2013-03-26 18:51:49
jQuery UI sortable功能包括一个用于执行此操作的serialize method。这很简单，真的。这里有一个简单的示例，一旦元素的位置发生变化，它就会将数据发送到指定的URL。
$('#element').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: '/your/url/here'
});
}
});这样做的目的是使用元素id创建一个元素数组。所以，我通常会这样做：
<ul id="sortable">
<li id="item-1"></li>
<li id="item-2"></li>
...
</ul>当您使用serialize选项时，它将创建如下的POST查询字符串：item[]=1&item[]=2等。因此，如果您在id属性中使用-例如-您的数据库ID，那么您可以简单地迭代POSTed数组并相应地更新元素的位置。
例如，在PHP中：
$i = 0;
foreach ($_POST['item'] as $value) {
// Execute statement:
// UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
$i++;
}Stack Overflow用户
发布于 2014-03-20 17:01:01
我想这也会有帮助。A)它的设计目的是在每次排序后将有效负载保持在最小，同时将其发送回服务器。(而不是每次都发送所有元素，或者迭代许多服务器可能会丢弃的元素) B)我需要在不影响元素的id /名称的情况下发回自定义id。这段代码将从asp.net服务器获取列表，然后在排序时只返回两个值:已排序元素的db和它被拖放到的下一个元素的db。基于这两个值，服务器可以很容易地识别新的位置。
<div id="planlist" style="width:1000px">
<ul style="width:1000px">
<li plid="listId1"><a href="#pl-1">List 1</a></li>
<li plid="listId2"><a href="#pl-2">List 1</a></li>
<li plid="listId3"><a href="#pl-3">List 1</a></li>
<li plid="listId4"><a href="#pl-4">List 1</a></li>
</ul>
<div id="pl-1"></div>
<div id="pl-2"></div>
<div id="pl-3"></div>
<div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
$(function () {
var tabs = $("#planlist").tabs();
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function () {
tabs.tabs("refresh");
},
update: function (event, ui) {
//db id of the item sorted
alert(ui.item.attr('plid'));
//db id of the item next to which the dragged item was dropped
alert(ui.item.prev().attr('plid'));
//make ajax call
}
});
});
</script>Stack Overflow用户
发布于 2013-03-26 17:28:09
你走运了，我在我的CMS里用的东西
当您想要存储订单时，只需调用JavaScript方法saveOrder()。它将向saveorder.php发出一个AJAX POST请求，当然，您也可以始终将其作为常规表单发布。
<script type="text/javascript">
function saveOrder() {
var articleorder="";
$("#sortable li").each(function(i) {
if (articleorder=='')
articleorder = $(this).attr('data-article-id');
else
articleorder += "," + $(this).attr('data-article-id');
});
//articleorder now contains a comma separated list of the ID's of the articles in the correct order.
$.post('/saveorder.php', { order: articleorder })
.success(function(data) {
alert('saved');
})
.error(function(data) {
alert('Error: ' + data);
});
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
?>
<li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
<?
}
?>
</ul>
<input type='button' value='Save order' onclick='saveOrder();'/>在saveorder.php中，请记住我删除了所有的验证和检查。
<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}
?>https://stackoverflow.com/questions/15633341
复制相似问题