Question

我正在使用一个名为jQuery Sortable（http://johnny.github.io/jquery-sortable/）的jQuery插件。我正在使用页面上的最后一个示例，即＆＃34;排序表＆＃34;。我做了一张桌子，可以分类。文档并不详尽，我对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>

Answer 1

＆＃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;

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

1 个答案: