无法加载JQGrid OncellSelect

Question

我有一个JQGRID，该JQGRID在单击搜索按钮上加载来自控制器的数据。可以在此处检查按钮点击事件的代码。

public JsonResult GetAllMessages(string sidx, string sord, int page, int rows, string messageType = "")
{
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        List<AllDBMessages> messages = _domain.GetMessages(messageType);
        var ListResults = messages.ToList().Select(
                a => new
                {
                    a.SerialNo,
                    a.MessageType,
                    a.TotalMessages,
                    a.Description,
                    a.Version,
                    a.MessageControlID,
                    a.SendingApplication,
                    a.SendingFacility,
                    a.ReceivingApplication,
                    a.ReceivingFacility,
                    a.DateTimeOfMessage,
                    a.DateInserted
                });
        int totalRecords = ListResults.Count();
        var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
        if (sord.ToUpper() == "DESC")
        {
            ListResults = ListResults.OrderByDescending(s => s.MessageType);
            ListResults = ListResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        else
        {
            ListResults = ListResults.OrderBy(s => s.MessageType);
            ListResults = ListResults.Skip(pageIndex * pageSize).Take(pageSize);
        }
        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = ListResults
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
}

在第一个网格上，我已经写了 oncellSelect jqgrid的事件，该事件是第一次发射但不是第二次发射的。用于获取第二个网格数据的控制器代码为;

public JsonResult GetMessagesDetail(string messageType, string sidx, string sord, int page, int rows)
{
        return GetAllMessages(sidx, sord, page, rows, messageType);
}

为什么我的数据未加载 oncellSelect 第二次。我在DevTools中看到了每次都会发射事件，但JQGrid并未刷新，而动作方法也没有第二次发射。

Answer 1

谢谢@oleg。我在此代码的帮助下修复了此问题。希望这也对他人也有帮助。

$('#grid-table1').trigger("reloadGrid", [{ page: 1 }]);

Answer 2

onCellSelect的当前代码如下：

onCellSelect: function (rowId, iCol, content, event) {
    if (iCol == 1) {
        var type = $(grid_selector).jqGrid('getCell', rowId, 'MessageType');
        var version = $(grid_selector).jqGrid('getCell', rowId, 'Version');
        ShowMessageDetail(type, version);
    }
}

其中ShowMessageDetail 创建网格

function ShowMessageDetail(type, version) {
    var grid_selector = "#grid-table1";
    var pager_selector = "#grid-pager1";
    $(grid_selector).jqGrid({
        url: "/Home/GetMessagesDetail",
        datatype: 'json',
        postData: {
            messageType: function () {
                var messageType = type;
                return messageType === "" ? null : messageType;
            }
        },
        ...
    };
    ...
}

在ShowMessageDetail的第一个呼叫之后，空表<table id="grid-table1"></table>将在Divs和表格的相对复杂结构中转换（请参见此处）。ShowMessageDetail的第二个调用将忽略创建网格。

您可以通过使用ShowMessageDetail或触发reloadGrid来修复代码：

onCellSelect: function (rowId, iCol, content, event) {
    if (iCol == 1) {
        var type = $(this).jqGrid('getCell', rowId, 'MessageType');
        var version = $(this).jqGrid('getCell', rowId, 'Version');
        var detailGrid = $("#grid-table1");
        if (detailGrid.length > 0 && detailGrid[0].grid) {
            // grid already exist
            detailGrid.trigger("reloadGrid", [{ page: 1 }]);
        } else {
            ShowMessageDetail(type, version);
        }
    }
}