排序表拖放样式并保存新订单

时间:2014-12-28 13:36:22

标签: javascript jquery mysql sorting html-table

我正在使用一个名为jQuery Sortable(http://johnny.github.io/jquery-sortable/)的jQuery插件。我正在使用页面上的最后一个示例,即"排序表"。我做了一张桌子,可以分类。文档并不详尽,我对jQuery的了解有限。

到目前为止,我已经设法对表拖放样式进行排序。我需要做的是以新的顺序从每个tr中检索id,将其存储在一个数组中并将其发布到服务器端脚本。

<table class="table table-hover sorted_table">
<tbody>

<tr id="1">
<td>Something</td>
<td>Information</td>
<td>Column</td>
</tr>

<tr id="2">
<td>Something</td>
<td>Information</td>
<td>Column</td>
</tr>

<tr id="3">
<td>Something</td>
<td>Information</td>
<td>Column</td>
</tr>

</tbody>
</table>

<script>
// Sortable rows
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
})
</script>

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
var table = $('.sorted_table').sortable({
    containerSelector: 'table',
    itemPath: '> tbody',
    itemSelector: 'tr',
    placeholder: '<tr class="placeholder"/>',
    onDrop: function (item, container, _super) {
        var ids = table.find('tr').map(function() {
            return this.id;
        }).get();
    
        console.log(ids);
        _super(item, container);
    }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>

<table class="table table-hover sorted_table">
    <tbody>
        <tr id="1">
            <td>Something1</td>
            <td>Information</td>
            <td>Column</td>
        </tr>
        <tr id="2">
            <td>Something2</td>
            <td>Information</td>
            <td>Column</td>
        </tr>
        <tr id="3">
            <td>Something3</td>
            <td>Information</td>
            <td>Column</td>
        </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;