无法加载 Jqgrid onCellSelect

Question

我有一个 JqGrid，它在单击“搜索”按钮时从控制器加载数据。可以检查按钮单击事件的代码 here。

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

在第一个网格上，我为 Jqgrid 编写了 onCellSelect 事件，这是第一次触发但不是第二次。为 2nd Grid 获取数据的控制器代码是；

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<table id="grid-table1"></table>会转换成相对复杂的div和table结构（见here ). 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);
        }
    }
}

无法加载 Jqgrid onCellSelect

unable to load Jqgrid onCellSelect

c#

asp.net-mvc

jquery

jqgrid

jqgrid-asp.net