JQuery拖放排序列表答案

【问题标题】：JQuery Drag and Drop Sortable ListJQuery拖放排序列表
【发布时间】：2012-11-23 10:52:50
【问题描述】：

所以我有一点问题。我在我的 WordPress 插件中创建了一个拖放列表，它应该允许用户对类别进行排序，在大多数情况下我有这个工作......

该表是从 MySQL 数据库中填充的：

$results = $wpdb->get_results($sql);

    foreach($results as $result)
    {
    ?>
     <tr id="list_item_<?php echo $result->priority_order; ?>" class="list_item">
                <td>
                    <?php echo $result->name; ?>
                </td>
                <td>
                    <?php echo $result->priority_order; ?>
                </td>
            </tr>
    <?php
    }

我正在使用 'jquery-ui-sortable' 以允许表格可排序。

这是我的 JQuery，用于使列表可拖动并更新列表：

$('.list').sortable(
{
    items: '.list_item',
    opacity: 0.6,
    cursor: 'move',
    axis: 'y',
    update: function()
    {
        var order = $(this).sortable('serialize') + '&action=update_order';
        $.post(ajaxurl, order, function(response)
        {
            //alert(response);
        });
    }
});

这里是用新命令更新数据库的 PHP：

function save_order()
{
  global $wpdb;

  $table_name = $wpdb->prefix . "categories";
  $sql = "SELECT * FROM ".$table_name." ORDER BY priority_order ASC";

  $results = $wpdb->get_results($sql);
  $results = parseObjectToArray($results);

  $new_order = $_POST["list_item"];

  $counter = 0;
  foreach($new_order as $v)
  {
    if(isset($results[$v]["priority_order"]))
    {
        $update_sql = "UPDATE ".$table_name." SET priority_order='".$counter."' WHERE category_id='".$results[$v]["category_id"]."'";
        $wpdb->query($update_sql);

        $counter++;
    }
  }
  die();
}
add_action('wp_ajax_update_order','save_order');

// Converts StdObject to regular array
function parseObjectToArray($object)
{
$array = array();

  foreach($object as $o)
  {
    if (is_object($o))
    {
      $array[] = get_object_vars($o);
    }
  }
  return $array;
}

我的问题是，虽然列表第一次完美更新，但假设页面未手动刷新而发送的下一个序列化数组现在更新不正确。这是因为新列表和数据库中新更新的列表不再同步。

这是因为我使用数组索引来匹配需要更新的内容，但是在初始更改之后，新的列表索引和来自数组的索引不再匹配......

有人知道如何解决这个问题吗？我环顾四周，发现的大部分代码都与我的相似，我看不出任何可能导致我崩溃的明显差异。每次更新后是否需要刷新页面？

【问题讨论】：

标签： php jquery ajax wordpress jquery-ui

【解决方案1】：

我又自己找到了答案，哈哈……

我非常关注 pirority_order 字段，而是发送每个类别 ID 并使用 SQL 来 ORDER BY priority_id，然后只需使用一个计数器，我就可以分配一个新订单。

global $wpdb;

$table_name = $wpdb->prefix . "categories";
$sql = "SELECT * FROM ".$table_name." ORDER BY priority_order ASC";

$results = $wpdb->get_results($sql);
$results = parseObjectToArray($results);

$new_order = $_POST["ebs_list_item"];

$counter = 0;
foreach($new_order as $v)
{
    $update_sql = "UPDATE ".$table_name." SET priority_order=".$counter." WHERE id=".$v;
    $wpdb->query($update_sql);

    $counter++;
}
die();

<tr id="list_item_<?php echo $result->id; ?>" class="list_item">
    <td>
        <?php echo $result->name; ?>
    </td>
    <td>
        <?php echo $result->priority_order; ?>
    </td>
</tr>

【讨论】：