如何在 jqGrid 中提取并复用 recordtext 中的记录数占位符值-html教程-PHP中文网

如何在 jqGrid 中提取并复用 recordtext 中的记录数占位符值

本文介绍如何从 jqGrid 的 recordtext 配置中动态提取实际记录总数（如 {2} 对应的数值），并将其写入任意 HTML 元素（如按钮、标签），实现跨组件的数据复用。

本文介绍如何从 jqgrid 的 `recordtext` 配置中动态提取实际记录总数（如 `{2}` 对应的数值），并将其写入任意 html 元素（如按钮、标签），实现跨组件的数据复用。

在 jqGrid 中，recordtext: "{2} Results" 是一个格式化字符串，其中 {2} 会在渲染分页栏时被自动替换为当前数据集的总行数（即 records 值）。但该替换仅发生在 jqGrid 内部的 pager 渲染逻辑中，原始配置中的 {2} 并非实时变量——因此无法直接读取。若需在外部 HTML 元素（如）中同步显示相同数值，必须借助 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() 设置按钮值适用于；若目标是
多次调用（如分页/筛选）会自动触发 loadComplete，因此无需额外监听事件。

通过上述方式，你不仅实现了 {2} 数值的复用，更建立了 grid 状态与 UI 元素间的响应式绑定，为后续扩展（如条件禁用按钮、统计摘要展示等）打下坚实基础。