Блог

 // 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);
    }
});
 

Я пытаюсь сохранить заказ после перетаскивания и изменения порядка. в базу данных, чтобы при перезагрузке страницы порядок, в котором я ее заказал, был точным порядком, когда я ее переупорядочиваю

Рассмотрите возможность использования события изменения для сортируемого виджета. Это событие предоставляет позиции oldIndex и newIndex для перемещенного элемента.

Ниже приведен пример одного из способов получения переупорядоченных элементов, а затем отправки этих данных на сервер для сохранения изменений. Надеюсь, это поможет вам приступить к решению вашей проблемы.

Запуск change события указывает, что элемент был отсортирован и его положение в DOM изменилось. Глядя на change событие ниже, я получаю элементы данных для текущей страницы сетки currentGridView . Затем я использую slice() метод, чтобы получить элементы между oldIndex и newIndex . Затем я вызываю updateSequence функцию.

updateSequence Функция создает массив для хранения объектов, которые будут переданы на сервер. Эти объекты основаны на DataSequenceModel классе. В принципе, мне просто нужно знать идентификатор и новую последовательность для каждого элемента, который был переупорядочен. После этого я использую базовую запись Ajax для отправки данных на сервер.

Index.cshtml — Вот додзе, основанное на демо — версии Telerik с интеграционной сеткой и обновленное с учетом моих изменений.

 <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; }
}