Jqgrid 5.2.0付费版：如何仅展开主行时加载子网格数据

针对主网格数据量大时同时加载子网格速度慢的问题，核心思路是仅在用户展开主网格行时，才通过AJAX从服务器获取该行对应的子网格数据，而非提前加载所有子数据。以下是修改后的完整代码及关键说明：

修改后的代码 #

function createsamplegrid() {
    jQuery("#grid").jqGrid({
        url: '',
        datatype: 'local',
        colNames: ['Id', 'StoreName', 'Department'],
        colModel: [
            { name: 'ID', index: 'ID', width: 20, stype: 'text' },
            { name: 'StoreName', index: 'StoreName', width: 150 },
            { name: 'Department', index: 'Department', width: 150 }
        ],
        rowNum: 10,
        sortname: 'ID', // 修正原代码排序字段大小写不一致问题
        viewrecords: true,
        sortorder: "desc",
        caption: "List Employee Details",
        subGrid: true,
        subGridRowExpanded: function (subgridDivId, rowId) {
            var subgridTableId = subgridDivId + "_t";
            // 获取当前主行数据，提取ID用于请求子网格数据
            var localRowData = $(this).jqGrid("getLocalRow", rowId);
            var parentId = localRowData.ID;

            $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
            
            // 初始化子网格框架
            var subGrid = $("#" + subgridTableId).jqGrid({
                datatype: 'local',
                colNames: ['ID', 'Employee Name'],
                colModel: [
                    { name: 'ID', index: 'ID', width: 70, align: "left", hidden: true },
                    { name: 'EmployeeName', index: 'EmployeeName', stype: 'text', align: "left" }
                ],
                jsonReader: {
                    root: 'gridModel',
                    repeatitems: false
                },
                idPrefix: rowId + "_"
            });

            // 异步请求当前主行对应的子网格数据
            $.ajax({
                type: "POST",
                url: 'Sample.aspx/GetEmployeeDetails', // 新增后端方法，根据主ID获取子数据
                data: JSON.stringify({ parentId: parentId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Result) {
                    var subGridData = $.parseJSON(Result.d);
                    // 加载子网格数据
                    subGrid.jqGrid('clearGridData');
                    subGrid.jqGrid('setGridParam', { data: subGridData.gridModel }).trigger('reloadGrid');
                },
                error: function (jqXHR, exception) {
                    console.error("子网格数据加载失败:", exception);
                }
            });
        }
    });
}

function GetSampleData() {
    $.ajax({
        type: "POST",
        url: 'Sample.aspx/GetSampleDetail',
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true, // 改为异步请求，避免阻塞页面
        success: function (Result) {
            var myjsongrid = $.parseJSON(Result.d);
            SampleData = myjsongrid;
            $('#grid').jqGrid('clearGridData');
            $("#grid").jqGrid('setGridParam', { data: myjsongrid, datatype: 'local' }).trigger('reloadGrid');
        },
        error: function (jqXHR, exception) {
            console.error("主网格数据加载失败:", exception);
        }
    });
}

function ReinstantiateGrid() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    
    function InitializeRequest(sender, args) {
        // 可添加请求前逻辑，比如禁用按钮防止重复提交
    }
    
    function EndRequest(sender, args) {
        // 局部回发后重新初始化网格
        createsamplegrid();
        GetSampleData();
    }
}

关键修改说明 #

1. 子网格懒加载：在subGridRowExpanded回调中，用户展开主行时才发起AJAX请求，根据主行ID获取对应子数据，避免一次性加载所有子网格数据。
2. 修正排序字段：原代码sortname与colModel中字段大小写不一致，统一为ID避免排序异常。
3. 异步请求优化：将主网格数据请求改为异步，避免同步请求阻塞页面导致假死。
4. 子网格数据填充：获取子数据后，清空子网格并加载新数据，确保数据准确对应当前主行。

后端补充代码 #

需要在Sample.aspx.cs中新增获取子网格数据的WebMethod：

[WebMethod]
public static string GetEmployeeDetails(int parentId)
{
    // 根据parentId从数据库查询对应员工数据
    List<EmployeeModel> employeeList = YourDataAccess.GetEmployeesByParentId(parentId);
    
    // 包装成符合前端jsonReader的结构
    var result = new { gridModel = employeeList };
    return new JavaScriptSerializer().Serialize(result);
}

// 员工模型示例
public class EmployeeModel
{
    public int ID { get; set; }
    public string EmployeeName { get; set; }
}

内容的提问来源于stack exchange，提问作者user12127308