如何在使用 kendo ui jquery 排序后保存 table 订单行顺序？我不知道如何将订单保存到数据库中

Question

// Kendo table sortable
var kendoSortable = grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: function (element) { // Customize the hint.
        var table = $('<table style="width: 600px;" class="k-grid k-widget"></table>'),
            hint;

        table.append(element.clone()); // Append the dragged element.
        table.css("opacity", 0.7);

        return table; // Return the hint element.
    },
    cursor: "move",
    placeholder: function (element) {
        return $('<tr colspan="4" class="placeholder"></tr>');
    },
    change: function (e) {
        var skip = grid.dataSource.skip(),
            oldIndex = e.oldIndex + skip,
            newIndex = e.newIndex + skip,
            data = grid.dataSource.data(),
            dataItem = grid.dataSource.getByUid(e.item.data("uid"));

        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);
    }
});

我正在尝试在拖动并重新排序后保存订单。到数据库，这样当我重新加载页面时，我订购的顺序将是我重新订购时的确切顺序

Answer 1

考虑将 change 事件用于 Sortable 小部件。此事件为已移动的项目提供 oldIndex 和 newIndex 位置。

下面是获取重新订购的商品然后将该数据发送到服务器以保存更改的一种方法的示例。希望这能帮助您开始解决问题。

change 事件触发表示项目已排序并且项目在 DOM 中的位置已更改。查看下面的 change 事件，我正在将网格当前页面的数据项放入 currentGridView。然后我使用 slice() 方法获取 oldIndex 和 newIndex 之间的项目。然后我调用 updateSequence 函数。

updateSequence函数创建一个数组来存储要传递给服务器的对象。这些对象基于 DataSequenceModel class。基本上，我只需要知道重新订购的每件商品的 ID 和新序列。在此之后，我使用基本的 Ajax POST 将数据发送到服务器。

Index.cshtml - 这是一个 dojo based on Telerik's Integration - Grid 演示并更新了我的更改。

<div id="grid"></div>

<script>
    $(document).ready(function () {
        var grid = $("#grid").kendoGrid({
            // ...Basic grid setup
        }).data("kendoGrid");

        grid.table.kendoSortable({
            filter: ">tbody >tr",
            hint: $.noop,
            cursor: "move",
            placeholder: function(element) {
                return element.clone().addClass("k-state-hover").css("opacity", 0.65);
            },
            container: "#grid tbody",
            change: function (e) {
                // Get the indexes and data items that have been reordered.
                var skip = grid.dataSource.skip(),
                    oldIndex = e.oldIndex + skip,
                    newIndex = e.newIndex + skip;

                var currentGridView = grid.dataSource.view();
                var dataChanged = currentGridView.slice(oldIndex, newIndex + 1);
                updateSequence(oldIndex, dataChanged);
            }
        });
    });

    function updateSequence(startIndex, dataChanged) {
        // Create array to be passed to Controller. Based on DataSequenceModel class.
        let data = [];
        let newSequence = startIndex;
        for (var i = 0; i < dataChanged.length; i++) {
            data.push({ Id: dataChanged[i].ProductID, NewSequence: newSequence });
            newSequence++
        }

        $.ajax({
            type: "POST",
            url: 'https://localhost:44395/Test/UpdateSequence',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.error(e);
            }
        });
    };
</script>

TestController.cs

public class TestController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public bool UpdateSequence(IEnumerable<DataSequenceModel> data)
    {
        // ...Logic to update sequence in database.
        return true;
    }
}

DataSequenceModel.cs

public class DataSequenceModel
{
    public int Id { get; set; }
    public int NewSequence { get; set; }
}

如何在使用 kendo ui jquery 排序后保存 table 订单行顺序？我不知道如何将订单保存到数据库中

How to save table order row order after reordering it using kendo ui jquery? I dont know how to save the order into the database

.net

c#

kendo-ui