JQueryUISortable，然后将顺序写入数据库

我想使用 jQuery UI sortable函数来允许用户设置一个订单，然后在更改时，将其写入数据库并更新它。谁能举个例子说明一下这是怎么做到的？

226039 次浏览
小开

算你走运，我的 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();'/>

请记住，我删除了所有的验证和检查。

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}
?>
小开
最佳答案

JQueryUIsortable特性包括一个 serialize方法来完成这项工作。其实很简单。下面是一个快速示例，它在元素位置发生更改时立即将数据发送到指定的 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++;
}

JsFiddle 上的示例。

小开

我觉得这个也能帮上忙。A)它被设计成在每次排序后发送回服务器时将有效载荷保持在最小值。(而不是每次发送所有的元素或者遍历许多服务器可能丢弃的元素) B)我需要在不损害元素的 id/名称的情况下发送回自定义 id。这段代码将从 asp.net 服务器获取列表，然后在排序之后只返回2个值: 已排序元素的 db id 和被删除元素旁边的 db id。基于这两个值，服务器可以很容易地确定新的位置。

<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>
小开

这是我的例子。

Https://github.com/luisnicg/jquery-sortable-and-php

您需要捕捉更新事件中的订单

    $( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
update: function( event, ui ) {
var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
$.post( "form/order.php",{ 'choices[]': sorted});
}
});
小开

我可以通过遵循 jsFiddle 上接受的答案和相关的示例来更改行。但是由于某些未知的原因，在“停止或改变”动作之后，我无法得到 id。但是在 JQueryUI 页面中发布的示例对我来说很好用。你可以 看看这个链接。

小开

试试这个解决方案: < a href = “ http://phppot.com/php/sort-mysql-row-order-using-jquery/”rel = “ nofollow norefrer”> http://phppot.com/php/sorting-mysql-row-order-using-jquery/ 其中新顺序保存在某些 HMTL 元素中。 然后将包含此数据的表单提交给某个 PHP 脚本, 并使用 for 循环迭代它。

注意: 我必须添加另一个类型为 INT (11)的 db 字段，该字段在每次迭代中都会更新(时间戳为‘ ed)——它可以让脚本知道哪一行是最近更新的，否则就会得到混乱的结果。


提交答案