Question

我一直在关注这个问题，但我还没有得到它。

我有一个从SQL中提取List的表。我使用JQuery.sortable来处理客户端上的行。

理想情况下，我想以不同的顺序拖动和排序行，并使用AJAX通过我的控制器自动将它们保存在SQL中。

这是我的代码：

<div class="container">

    <table id="example" class="table table-responsive table-striped sorted_table">
        <thead>
            <tr>
                <th>Display Order</th>
                <th>Image/Video</th>
                <th>Title</th>
                <th>Meta Data</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                order++;
                <tr id="@item.Id">
                    <td>@order</td>
                    <td><img src="~/Images/Home/@item.Location" style="width: 100px;" /></td>
                    <td>@item.Title</td>
                    <td>@item.Meta</td>
                    <td>
                        <a href="@Url.Action("HomeBgDelete", "Admin", new {id = item.Id})">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div class="col-sm-4">@Html.ActionLink("Add Another", "HomeBG", "Admin")</div>
    <div><button id="submit-list" class="btn btn-default">Save Order</button></div>


</div>


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


</script>

我查看了一个方法，它遍历DOM并构建新订单的数组，然后通过AJAX调用将数组传递给控制器进行处理。我尝试了一些代码但没有成功。

任何帮助都会很棒！

Answer 1

作为一个粗略的想法（与您的问题下的评论有关），您可以迭代Sortable的update回调中的表行。在那里，您可以根据需要访问当前元素，获取ID，其他属性和索引。

var ids = [];
$('#example tbody').sortable({
  update: function(event, ui) {
    $('#example tbody tr').each( function(index) {
      ids.push($(this).attr('id'));
    });
  }
});

使用ASP.NET MVC将JQuery.Sortable结果保存到SQL

1 个答案: