通过拖放来排序jqGrid行

时间:2014-12-22 13:07:05

标签: javascript jquery jqgrid

通过拖放有没有jqGrid行排序的选项?我想在DB中保存订单。我检查了所有与jqGrid drag& amp相关的现有解决方案。下降。但是,没有任何工作正常。

1 个答案:

答案 0 :(得分:1)

以下是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;
}