本文介绍如何从 jqGrid 的 recordtext 配置中动态提取实际记录总数（如 {2} 对应的数值），并将其写入任意 HTML 元素（如按钮、标签），实现跨组件的数据复用。
本文介绍如何从 jqgrid 的 `recordtext` 配置中动态提取实际记录总数（如 `{2}` 对应的数值），并将其写入任意 html 元素（如按钮、标签），实现跨组件的数据复用。
在 jqGrid 中，recordtext: "{2} Results" 是一个格式化字符串，其中 {2} 会在渲染分页栏时被自动替换为当前数据集的总行数（即 records 值）。但该替换仅发生在 jqGrid 内部的 pager 渲染逻辑中，原始配置中的 {2} 并非实时变量——因此无法直接读取。若需在外部 HTML 元素（如 <input type="button">）中同步显示相同数值，必须借助 jqGrid 的生命周期钩子，在数据加载完成后主动解析并注入。
关键在于利用 loadComplete 回调函数：它在每次数据加载完毕（包括初始化、刷新、排序、筛选后）触发，此时网格参数与真实数据状态均已就绪。我们可通过 getGridParam() 获取当前 grid 实例的完整配置及运行时属性，并从中提取 records（真实总条数），或按需解析 recordtext 模板。
以下是推荐的实现方式（兼顾健壮性与可读性）：
$("#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",
toppager: true,
// ✅ 在数据加载完成后提取并写入 HTML 元素
loadComplete: function () {
const $grid = $(this);
const records = $grid.jqGrid('getGridParam', 'records') || 0;
// 方式一：直接使用真实记录数（推荐）
$('#htmlbutton').val(`${records} Results`);
// 方式二：若需严格复现 recordtext 模式（如支持多语言模板）
// const recordtext = $grid.jqGrid('getGridParam', 'recordtext') || '';
// const formattedText = recordtext.replace(/{2}/g, records);
// $('#htmlbutton').val(formattedText);
}
});⚠️ 注意事项：
- loadComplete 是唯一可靠时机：gridComplete 不保证 records 已准确计算；beforeProcessing 中数据尚未注入 grid。
- 若 grid 启用了 datatype: 'json' 或远程加载，请确保服务端返回的 records 字段正确（jqGrid 依赖此字段生成 {2}）。
- 使用 .val() 设置按钮值适用于 <input>；若目标是 <button> 或 <span>，请改用 .text() 或 .html()。
- 多次调用（如分页/筛选）会自动触发 loadComplete，因此无需额外监听事件。
通过上述方式，你不仅实现了 {2} 数值的复用，更建立了 grid 状态与 UI 元素间的响应式绑定，为后续扩展（如条件禁用按钮、统计摘要展示等）打下坚实基础。
