我想使用 jQuery UIsortable功能来允许用户设置订单，然后在更改时将其写入数据库并更新它。有人可以写一个关于如何做到这一点的例子吗？
问问题
221495 次
6 回答
236
jQuery UIsortable特性包括一个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'
});
}
});
它的作用是使用 elements 创建一个元素数组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++;
}
于 2013-03-26T10:51:49.097 回答
12
认为这也可能有所帮助。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>
于 2014-03-20T09:01:01.337 回答
9
你很幸运，我在我的 CMS 中使用了确切的东西
当您要存储订单时，只需调用 JavaScript 方法即可saveOrder()。它将POST向 saveorder.php 发出 AJAX 请求，但当然您可以将其作为常规形式发布。
<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>';
}
?>
于 2013-03-26T09:28:09.377 回答
7
这是我的例子。
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});
}
});
于 2014-03-26T05:39:09.170 回答
0
我可以按照 jsFiddle 上接受的答案和相关示例来更改行。但是由于一些未知的原因，在“停止或更改”操作后我无法获得 ID。但是 JQuery UI 页面中发布的示例对我来说效果很好。您可以在此处查看该链接。
于 2015-07-02T14:50:01.307 回答
0
试试这个解决方案：http ://phppot.com/php/sorting-mysql-row-order-using-jquery/ 新订单保存在一些 HMTL 元素中。然后，您将包含此数据的表单提交给某个 PHP 脚本，并使用 for 循环遍历它。
注意：我必须添加另一个 INT(11) 类型的 db 字段，该字段在每次迭代时都会更新（时间戳） - 它用于让脚本知道最近更新了哪一行，否则你最终会得到混乱的结果。
于 2017-01-06T17:40:07.227 回答