如何使Div可以在数据库中进行排序和更新价值

时间:2016-01-14 05:45:37

标签: php jquery ajax

我想使用jquery使我的div可以排序并获取他们当前的新位置,以便我可以将其更新到数据库中。我试过但没有成功。我的代码是

<div id="d">
df
</div>

<div id="d">
df
</div>

<div id="d">
df
</div>

jquery代码是

$(document).ready(function(){
    $('#d').sortable({
    placeholder: "ui-state-highlight",
    helper: 'clone'
});

});
})

任何人都可以帮助我。谢谢

1 个答案:

答案 0 :(得分:0)

jQuery UI可排序功能包括serialize方法来执行此操作。真的很简单。这是一个快速示例,只要元素有更改位置,就会将数据发送到指定的URL。

$('#el1').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'
        });
    }
});

它使用元素id创建元素数组。所以,我通常做这样的事情:

<div id="el1" class="ui-sortable">
<div  id="item_1">
df
</div>

<div  id="item_2">
df
</div>

<div   id="item_3">
df
</div>
</div>

Serialize选项将创建一个POST查询字符串,如下所示:item [] = 1&amp; item [] = 2。因此,如果您在id属性中使用 - 例如 - 您的数据库ID,则可以简单地遍历POSTed数组并相应地更新元素的位置。

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}