jq网格行排序通过拖放

jqGrid row ordering by drag and drop

本文关键字：拖放 排序 网格 jq      更新时间：2023-09-26

有没有通过拖放对jqGrid行进行排序的选项？我想将订单保存在数据库中。我已经检查了与jqGrid拖放相关的所有现有解决方案。但是，没有任何工作正常。

这是我

对ASP.NET MVC的方法。但是您应该知道，只有当您没有寻呼机时，这才易于实现。

主要思想是在删除后获取网格中的所有 id，并在数据库中更改item_order。

.HTML

<table id="jqgTopMenu" cellpadding="0" cellspacing="0"></table>
<div id="jqgpTopMenu" style="text-align: center;"></div>

脚本

$('#jqgTopMenu').jqGrid({
    url: '@Url.Action("TopMenus")',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Id', 'ItemOrder', 'Name', 'Short name'],
    colModel: [
                { name: 'Id', index: 'Id', hidden: true },
                { name: 'ItemOrder', index: 'ItemOrder', hidden: true },
                { name: 'PostName', index: 'PostName', align: 'left', width: 430 },
                { name: 'PostNameShort', index: 'PostNameShort', align: 'left', width: 500 },
    ],
});
//sort Part
$('#jqgTopMenu').jqGrid('sortableRows',
{
    update: function (e, ui) {
        var ids = $("#jqgTopMenu").jqGrid('getDataIDs');
        $.ajaxSettings.traditional = true;
        $.ajax({
            url: '@Url.Action("SortTopMenu","Admin")',
            type: 'post',
            dataType: 'json',
            data: { ids: ids },
            success: function (data) {
                $('#jqgTopMenu').trigger("reloadGrid")
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("status: " + textStatus + " Error: " + errorThrown);
            }
        });
    }
});

控制器

[HttpPost]
public JsonResult SortTopMenu(List<int> ids)
{
    return Json(_dataManager.TopMenu.Sort(ids));
}

管理器数据库方法

public bool Sort(List<int> ids)
{
    for (int i = 0; i < ids.Count; i++)
    {
        top_menu t = _dataContext.top_menu.FirstOrDefault(tm => tm.id == ids[i]);
        t.item_order = i;
        _dataContext.SubmitChanges();
    }
    return true;
}
相关文章：