Question

我有<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的列，其中包含每个项目的位置）

但是现在我想按DATE（也存储在DB中）设置一个按钮来重新设置项目，所以实际上更改RANK COLUMN以使项目按DATE排序而不是实际排名（用户制作的例如）

Answer 1

要重新排序li，您只需要detach，然后重新插入（append）父元素。如果日期在您的数据库中，您将必须进行ajax调用以在按下REORDER按钮时检索它们，并在其回调中执行以下操作：

分离每li;
遍历您的ajax数据，找出哪个li对应于已排序的项目;
追加回来。

虽然最好缓存这个日期信息，恕我直言，所以“按下按钮”和“元素重新排序”之间的延迟不会太长。如果要将其他数据存储到元素中，但不显示它，则可以使用jQuery的data函数。

使用Ajax jQuery按日期重新排序

1 个答案: