Question

我刚刚为一组图像实现了jQuery UI可排序插件。我的标记如下：

<ul id="images" class="ui-sortable">
  <li id="7884029"><img src="/images/member/4698568/7884029_t.jpg" alt="" /></li>
  <li id="7379458"><img src="/images/member/4698568/7379458_t.jpg" alt="" /></li>
  <li id="1704208"><img src="/images/member/4698568/1704208_t.jpg" alt="" /></li>
  <li id="1750715"><img src="/images/member/4698568/1750715_t.jpg" alt="" /></li>
  <li id="4364912"><img src="/images/member/4698568/4364912_t.png" alt="" /></li>
</ul>

<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
  jQuery('#images').sortable({'delay':'100'});
});
/*]]>*/
</script>

LI id是数据库表中的'name'列 - 我不想显示ID列。

现在我的问题是如何捕获排序？我知道这将是一个AJAX请求，但我不知道如何做到这一点。我在我的数据库表中设置了一个sort_order列，我使用PHP作为我的脚本语言。我可以用代码示例。

编辑：

理想情况下，我更喜欢在移动项目时应用排序顺序，即我不想将其全部包含在表单中。

Answer 1

基本上，这样做：

首先，将商品的ID格式更改为sortable所需的强调格式：

<li id="image_7884029"><img ...
<li id="image_7379458"><img ...

然后，在serialize事件中使用sortable的stop方法：

... // Within your sortable() setup, add the stop event handler:
stop:function(event, ui) {
  $.ajax({
    type: "POST",
    url: path/to/your/ajax/reorder.php,
    data: $("#images").sortable("serialize")
  });
}
...

当您使用$("#images").sortable("serialize")时，sortable的serialize方法将遍历#images的子项，即所有li元素，并转换它找到的所有ID（image_7884029，{{ 1}}等等在image_7379458，之类的项目列表中按照它们现在出现在列表中的顺序排序（因为您是从{{1}调用它}）。基本上它的工作方式类似于发布表单时发送一系列复选框。

然后，您可以在服务器端“reorder.php”中选择此项，为sort_order列分配新值：

image[]=7884029&image[]=7379458...

你已经完成了。

Answer 2

我刚刚做到了这一点。我是这样做的：

使用表单覆盖#images元素，操作指向您的ajax脚本。在每个图像旁边，都有一个隐藏的输入字段，例如：

重新排序图像时，捕获jQuery可排序更新并停止事件，类似于：

$("#images").sortable({

  // configuration
  delay: 100,
  items: 'li',
  update: function(event, ui) {

    // Update order indexes
    updateOrderIndexes();
  },
  stop: function(event, ui) {

    // fire off the update method
    postUpdateOrder();
  }
});

function updateOrderIndexes()
{
  // Update the order index on each item
  var orderIndex = 1;
  $("#images li").each( function() {

    $(this).find("input[type=hidden]:first").val(orderIndex);
    orderIndex++;
  })    
}

在您需要编写的postUpdateOrder()函数中，您可以使用jQuery的$.post函数将AJAX发布请求发送回服务器。然后，每个字段将在您的PHP脚本的$ _POST数组中可用，该数组根据ID命名，其值为新索引。根据需要进行验证，保存新值，然后将OK /错误发送回浏览器。

更新根据您未将其封装在表单中的编辑要求，您仍然可以通过在所有与订单相关的输入字段中添加类来实现此目的，将AJAX网址放入您的Javascript中某处，例如var myRoute = '/some/path/to/script.php'，并根据$("input.myclass").each()样式代码和jQuery构建要自己发送给服务器的数据。基本上我使用的输入字段都是数据存储客户端 - 你可以随心所欲地完成这个。

也只是为了澄清，你不需要为表单提供一个提交按钮等，它只是更容易序列化数据以发送到你的AJAX脚本 - 当你停止拖动一个项目时会自动触发如果你使用上面的代码。

jQuery UI可排序 - 排序图像

2 个答案: