本文介绍如何从 jqGrid 的 recordtext 配置中提取实际渲染的总记录数（如 {2} 所代表的数值），并将其动态写入任意 HTML 元素（如按钮、标签），实现跨组件数据复用。
本文介绍如何从 jqgrid 的 `recordtext` 配置中提取实际渲染的总记录数（如 `{2}` 所代表的数值），并将其动态写入任意 html 元素（如按钮、标签），实现跨组件数据复用。
在使用 jqGrid 时，recordtext: "{2} Results" 是一种常见配置，用于在分页栏显示当前数据总条数（{2} 会被自动替换为实际记录数）。但该替换仅在 jqGrid 内部渲染时生效，原始字符串中的 {2} 并非实时变量——它无法直接被 JavaScript 访问或复用。若需将该数字同步显示在外部 HTML 元素（例如 ）中，必须在网格完成加载后，主动解析并提取该值。
关键在于利用 jqGrid 提供的 loadComplete 回调钩子：它在数据加载完毕、视图渲染完成后触发，此时所有内部状态（包括已解析的 recordtext 实际文本）均已就绪。我们可通过 getGridParam() 获取当前 grid 参数对象，并结合正则匹配提取 {2} 对应的数值。
以下是完整、可直接集成的实现方案：
$("#jqGrid").jqGrid({
datatype: 'local',
data: MaingridQueryResults_1,
colModel: [
{ name: 'id', label: 'id', align: 'left', hidden: true, width: 30 },
{ name: 'phone', label: 'Société', align: 'left', width: 90 },
{ name: 'last_name', label: 'Nom', align: 'left', width: 80 },
{ name: 'first_name', label: 'Prénom', align: 'left', width: 60 }
],
width: window.innerWidth - 50,
height: 300,
pager: "#jqGridPager",
pginput: false,
pgbuttons: false,
pgtext: null,
viewrecords: true,
recordtext: "{2} Results", // 此处 {2} 将被自动替换为总行数
toppager: true,
// ✅ 核心逻辑：在数据加载完成后提取并写入外部元素
loadComplete: function () {
const $grid = $(this);
const params = $grid.jqGrid("getGridParam");
// 获取当前 recordtext 的原始配置字符串
const recordTextTemplate = params.recordtext || "";
// 匹配 {数字} 模式（支持 {1}、{2}、{3} 等）
const match = recordTextTemplate.match(/\{(\d+)\}/);
if (match && match[1]) {
const totalCount = parseInt(match[1], 10);
// 获取真实总记录数：注意 {2} 表示 totalRecords（即 data.length 或服务端返回的 total）
const totalRecords = params.records || $grid.jqGrid("getGridParam", "data").length || 0;
// ✅ 将真实总数写入按钮 value 属性
$("#htmlbutton").val(`${totalRecords} Results`);
} else {
console.warn("recordtext does not contain a numbered placeholder like {2}");
}
}
});
⚠️ 重要注意事项：
- {2} 在 jqGrid 中特指 totalRecords（即数据源总条数），而非当前页显示条数（{1}）或起始序号（{0}）。确保你真正需要的是总量。
- 若 data 是动态加载的（如 datatype: 'json'），params.records 由服务器响应中的 records 字段决定；本地数据则默认为 data.length。
- 建议始终校验 match 和 totalRecords，避免空值或 NaN 导致 UI 异常。
- 如需实时响应筛选/刷新后的数量变化，请确保后续调用 trigger("reloadGrid") 后仍能触发 loadComplete ——该回调在每次重载后均有效。
通过上述方式，你不仅实现了 {2} 数值的跨元素复用，更掌握了 jqGrid 生命周期中获取关键状态数据的标准方法，为后续定制化开发（如联动统计面板、导出提示等）奠定了可靠基础。
