JqGrid实现：仅当两个数据列表匹配时加载子网格

1. 预处理子网格数据（优化匹配效率） #

先将子网格数据转换为以idref为键的映射对象，后续判断和过滤数据会更高效：

// 预处理子网格数据，建立idref到对应子数据的映射
const subDataMap = subavailable_lessons_json.reduce((map, item) => {
  const key = item.idref;
  if (!map[key]) {
    map[key] = [];
  }
  map[key].push(item);
  return map;
}, {});

2. 配置isHasSubGrid控制子网格显示 #

在主网格配置中添加isHasSubGrid函数，根据当前行的id判断是否存在匹配的子网格数据：

$("#jqGrid").jqGrid({
  // 原有配置...
  subGrid: true,
  isHasSubGrid: function(rowData) {
    // 判断当前行id是否在子数据映射中有对应数据
    return !!subDataMap[rowData.id];
  },
  subGridRowExpanded: showChildGrid,
  // 其他配置...
});

3. 修改子网格加载逻辑，过滤匹配数据 #

更新showChildGrid函数，仅加载当前父行id对应的子网格数据，同时移除无用的url配置（本地数据无需请求接口）：

function showChildGrid(parentRowID, parentRowKey) {
  const childGridID = parentRowID + "_table";
  const childGridPagerID = parentRowID + "_pager";

  // 获取当前父行对应的子数据
  const filteredSubData = subDataMap[parentRowKey] || [];

  $('#' + parentRowID).append(`<table id=${childGridID}></table><div id=${childGridPagerID} class=scroll></div>`);

  $("#" + childGridID).jqGrid({
    datatype: 'local',
    data: filteredSubData, // 使用过滤后的子数据
    page: 1,
    colModel: [
      {name: 'idref', label : 'idref'},
      {name: 'flavour', label : 'flavour'},
      {name: 'temp', label : 'temp'}
    ],
    loadonce: true,
    width: 500,
    height: '100%',
    pager: "#" + childGridPagerID,
  });
}

完整修改后的代码 #

整合后的完整代码如下：

var available_lessons_json = {{available_lessons|safe}}
var subavailable_lessons_json = {{subavailable_lessons|safe}}

// 预处理子网格数据，建立idref到对应子数据的映射
const subDataMap = subavailable_lessons_json.reduce((map, item) => {
  const key = item.idref;
  if (!map[key]) {
    map[key] = [];
  }
  map[key].push(item);
  return map;
}, {});

$("#jqGrid").jqGrid({
  datatype: 'local',
  data: available_lessons_json,
  colModel: [
    {name: 'id', label : 'id'},
    {name: 'first_name', label : 'first_name'},
    {name: 'last_name', label : 'last_name'}
  ],
  loadonce: true,
  viewrecords: true,
  width: 780,
  height: 200,
  rowNum: 20,
  rowList : [20,30,50],
  altRows: true,
  rownumbers: true,
  rownumWidth: 25,

  subGrid: true,
  isHasSubGrid: function(rowData) {
    // 判断当前行id是否存在匹配的子数据
    return !!subDataMap[rowData.id];
  },
  subGridRowExpanded: showChildGrid,
  subGridOptions : {
    plusicon: "ui-icon-triangle-1-e",
    minusicon: "ui-icon-triangle-1-s",
    openicon: "ui-icon-arrowreturn-1-e"
  },
  pager: "#jqGridPager"
});

function showChildGrid(parentRowID, parentRowKey) {
  const childGridID = parentRowID + "_table";
  const childGridPagerID = parentRowID + "_pager";

  // 获取当前父行对应的子数据
  const filteredSubData = subDataMap[parentRowKey] || [];

  $('#' + parentRowID).append(`<table id=${childGridID}></table><div id=${childGridPagerID} class=scroll></div>`);

  $("#" + childGridID).jqGrid({
    datatype: 'local',
    data: filteredSubData,
    page: 1,
    colModel: [
      {name: 'idref', label : 'idref'},
      {name: 'flavour', label : 'flavour'},
      {name: 'temp', label : 'temp'}
    ],
    loadonce: true,
    width: 500,
    height: '100%',
    pager: "#" + childGridPagerID,
  });
}

关键说明 #

• 预处理子数据映射：避免每次判断和过滤都遍历整个子数据数组，提升数据量大时的性能。
• isHasSubGrid函数：返回布尔值，决定当前行是否显示子网格展开图标（无匹配数据的行不会显示展开按钮）。
• 子网格数据过滤：仅加载当前父行对应的子数据，确保子网格只显示匹配内容。

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