无法加载 Jqgrid onCellSelect答案

【问题标题】：unable to load Jqgrid onCellSelect无法加载 Jqgrid onCellSelect
【发布时间】：2018-05-13 01:16:16
【问题描述】：

我有一个 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 并且不会触发第二次操作方法。

【问题讨论】：

网格中有多少 total 行？ (100, 1000, 10000, 1000000, ...) 您使用（可以使用）jqGrid 的哪个版本以及 jqGrid 的哪个fork（free jqGrid，商业@ 987654323@ 或版本 rowNum: 10)。因此loadonce: true 场景（客户端排序、分页和搜索/过滤）将在总行数（总消息数）相对较大的情况下快速工作。
另外，我不确定我是否正确理解onCellSelect 的问题。每次用户选择第一个网格（主网格）上的行后，是否要重新加载第二个网格（详细网格）？在这种情况下，您可以只创建一次，然后只需在onCellSelect 或onSelectRow 内部触发reloadGrid 的reloadGrid 或第一个网格的onSelectRow 回调：$("#grid-table1").trigger("reloadGrid");
当前，当我的数据首次在 cellClick 上加载到网格中时。第二次加载但是，为了查看更新的数据，我必须手动按下第二个网格上的 Refresh 按钮，并且加载正常。为什么不点击第一个网格的单元格。而且，不是细节网格，而是另一个具有新表 ID 的网格。
我试图在我之前的评论中向您解释，您当前的代码是错误的。您创建ShowMessageDetail 内的第二个网格，但只能创建一次。创建初始空表后会转换为比较多的表和div（见here）。因此，如果二维网格已经创建，您必须使用$("#grid-table1").trigger("reloadGrid"); 而不是调用ShowMessageDetail。
感谢整理。但我认为代码没有错，因为我通过引入新按钮并单击来解决此问题，并且加载正常。我认为，OncellClick 并没有通过我这样做来获取刷新数据的方式来刷新它$('#grid-table1').trigger("reloadGrid", [{ page: 1 }]);

标签： c# jquery asp.net-mvc jqgrid jqgrid-asp.net

【解决方案1】：

感谢@Oleg。我已经在这段代码的帮助下解决了这个问题。希望这对其他人也有帮助。

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

【讨论】：

【解决方案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> 将转换为相对复杂的div 和表结构（参见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);
        }
    }
}

【讨论】：