使用 Ajax jQuery 按日期重新排序答案

【问题标题】：Reorder by date with Ajax jQuery使用 Ajax jQuery 按日期重新排序
【发布时间】：2012-02-12 08:30:05
【问题描述】：

我有一个<li>，可以拖放每个项目以重新排序并将新排名存储到 DB

代码如下：

$(document).ready(function () {

    $('#reorder').sortable({
        opacity: 0.6, 
        data:$(this).sortable("serialize"),
        cursor: 'move', 
        tolerance: 'pointer', 
        revert: true, 
        placeholder: 'state', 
        forcePlaceholderSize: true,
        update: function(e, ui){
            newRank = $(this).sortable("serialize");
                console.log(newRank);
                $.ajax({
                url: base_url + "/admin/rank/",
                type: "POST",
                data: newRank,
                complete: function(success){
                     $("#message").html('<span class="success">file ordered</span>'); 
                },
                error: function(error){
                     $("#message").html('<span class="success">file not ordered</span>');
                }
                });
        }
    });

});

然后调用控制器：

function save_rank()
{
    $items = $this->input->post('item');
    $total_items = count($this->input->post('item'));

    for($item = 0; $item < $total_items; $item++ )
        {

        $data = array(
            'project_id' => $items[$item],
            'rank' => $item
        );

        $this->db->where('project_id', $data['project_id']);
        $this->db->update('ft_projects', $data);
    } 
}

这很好用，并按它们的等级重新排序我的项目（在 DB 中，我有一个名为 RANK 的列，其中包含每个项目的位置）

但现在我想制作一个按钮来按日期重新排序项目（也存储在数据库中）所以实际上将RANK COLUMN 更改为按DATE 排序的项目而不是实际排名（由用户为例子）

【问题讨论】：

如果重新排序是在客户端，我猜我们需要查看您的标记。

标签： jquery ajax codeigniter date

【解决方案1】：

要重新排列您的lis，您只需将它们detach 并再次在父元素中重新插入 (append)。如果日期在您的数据库中，则必须在按下 REORDER 按钮时进行 ajax 调用来检索它们，并在其回调中执行以下操作：

分离每个li；
循环遍历您的 ajax 数据，找出哪个 li 对应于已排序的项目；
将其附加回来。

虽然最好缓存此日期信息，恕我直言，因此“按下按钮”和“元素重新排序”之间的延迟不会太长。如果你想在一个元素中存储额外的数据，但不显示它，你可以使用 jQuery 的data 函数。

【讨论】：