jqGrid复制过滤器后数据生效但表头UI异常，如何更新表头UI？

我之前也碰到过一模一样的问题——把第一个jqGrid的过滤器和排序同步到第二个时，数据能正确加载但表头的排序箭头、搜索选项全不对。其实光更新数据参数是不够的，必须手动同步UI层面的状态，下面是一套完整的解决步骤：

1. 提取第一个Grid的完整状态 #

先从第一个Grid里把所有关键的过滤、排序参数都拿出来：

// 替换成你的第一个Grid ID
const $grid1 = $("#firstGrid");
// 获取过滤条件（包含所有列的搜索值）
const filterParams = $grid1.jqGrid("getGridParam", "postData");
// 获取当前排序的字段和方向
const sortField = $grid1.jqGrid("getGridParam", "sortname");
const sortDir = $grid1.jqGrid("getGridParam", "sortorder");
// 拿到列模型，后续用来同步搜索控件
const colModel = $grid1.jqGrid("getGridParam", "colModel");

2. 给第二个Grid设置数据参数 #

把第一个Grid的状态同步到第二个Grid，注意要深拷贝postData，避免两个Grid的参数互相影响：

// 替换成你的第二个Grid ID
const $grid2 = $("#secondGrid");
// 设置排序和过滤参数
$grid2.jqGrid("setGridParam", {
    sortname: sortField,
    sortorder: sortDir,
    // 深拷贝参数，防止后续修改联动第一个Grid
    postData: $.extend(true, {}, filterParams)
});

3. 同步排序箭头的UI样式 #

调用reloadGrid能更新数据，但有时候排序箭头不会自动切换样式，这时候得手动调整：

// 重新加载第二个Grid的数据，回到第一页
$grid2.trigger("reloadGrid", [{page: 1}]);

// 先清除所有列的排序样式
$grid2.find(".ui-jqgrid-sortable").removeClass("ui-state-sort ui-icon-triangle-1-s ui-icon-triangle-1-n");

// 给当前排序的列添加对应方向的样式
const targetHeader = $grid2.find(`th[aria-describedby="${$grid2[0].id}_${sortField}"]`);
targetHeader.addClass(`ui-state-sort ui-icon-triangle-1-${sortDir === "asc" ? "n" : "s"}`);

4. 同步表头搜索控件的状态 #

如果你的Grid用了表头搜索（header searching），还要把第一个Grid的搜索值同步到第二个Grid的搜索输入框/下拉框里：

// 遍历每一列，同步搜索值
colModel.forEach(col => {
    // 只处理开启了搜索的列，且有搜索值的情况
    if (col.search && filterParams[col.name]) {
        const searchInput = $grid2.find(`input[name="${col.name}"]`);
        const searchSelect = $grid2.find(`select[name="${col.name}"]`);
        
        if (searchInput.length) {
            searchInput.val(filterParams[col.name]);
        } else if (searchSelect.length) {
            searchSelect.val(filterParams[col.name]);
        }
    }
});

额外：如果用了工具栏搜索（Toolbar Search） #

要是你的Grid用的是顶部工具栏的搜索表单（配置了toolbar: [true, "top"]），还要同步工具栏的表单值：

// 获取第一个Grid的工具栏表单数据
const toolbarData = $grid1.find(`#t_${$grid1[0].id}`).serializeArray();
// 拿到第二个Grid的工具栏表单
const grid2Toolbar = $grid2.find(`#t_${$grid2[0].id}`);

// 逐个设置表单字段值
toolbarData.forEach(item => {
    grid2Toolbar.find(`[name="${item.name}"]`).val(item.value);
});

按这个流程操作后，第二个Grid的排序箭头、搜索选项就会和第一个完全一致，不会再出现UI和数据状态脱节的问题了。

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