重新加载网格后恢复标题中的排序图标答案

【问题标题】：Restore the sort icons in the header after reloading the grid重新加载网格后恢复标题中的排序图标
【发布时间】：2020-02-24 09:57:32
【问题描述】：

我们应用程序中的网格允许用户对多列进行排序。我现在正在实现一个“收藏夹”功能，以轻松记住和恢复过滤器、排序和列顺序。我在正确刷新表头中的排序图标时遇到了一些问题。

代码大致如下：

thegrid.setGridParam({
  sortname: favorite_to_restore["sidx"],
  sortorder: favorite_to_restore["sord"]
  });
thegrid.trigger('reloadGrid');

这在后端可以正常工作（即我们数据库中 sql 查询的排序顺序反映了收藏），但标题行中的图标没有更新。

我可以做一个额外的 API 调用来更新排序图标吗？我查看了“sortGrid”，但这并没有提供一个简单的答案。

【问题讨论】：

标签： free-jqgrid

【解决方案1】：

您可以尝试在创建网格之前恢复用户偏好。请参阅为 the answer 创建的 the demo。在这种情况下，您根本不需要重新加载网格。

或者，您可以使用网格的 DOM 元素的sortData 方法。演示https://jsfiddle.net/OlegKi/1gpz4mat/使用如下代码调用：

$("#reload").click(function () {
    var $grid = $("#grid"),
        p = $grid.jqGrid("getGridParam"),
        newSortName = "amount",
        newSortOrder = "asc", // "asc", "desc"
        iCol = p.iColByName[newSortName],
        $th = $("#" + p.id + "_" + newSortName);

    $grid[0].sortData(newSortName, iCol, false, newSortOrder, $th[0]);
});

【讨论】：

当网格已经加载时，收藏夹会动态应用。我想避免重新加载整个页面。因此，第一个建议将不适用。我会和你的sn-p一起工作。我们正在使用多排序，所以看起来我需要对 sortData 进行一些拆分和解析以及重复调用。我希望有一个方便的快捷方式可用 - 不走运:-)
@jdetaeye：一般情况下，sortData 也可用于多排序。我想，你可能对colModel 元素的lso 属性有问题。如果用户在使用多重排序的情况下更改顺序，则相应colModel 列的lso 属性将被修改（从"asc" 到"asc-desc"、"desc-asc" 和"desc"）。多排序网格的状态不会用sortname 和sortorder 来描述，而是用网格所有列的lso 属性值来描述。我建议您检查调试器中列的lso 属性。

【解决方案2】：

我最终使用了以下代码：

        // From the favorite to restore I retrieve the fields to sort on
        var sortstring= "field 1 asc, field2 desc".split(",");

        // Reset the sort icons
        var p = thegrid.jqGrid('getGridParam');     
        for (var k of p.colModel) {
            var headercell = $("#" + p.id + "_" + k["name"]);
            headercell.find("span.s-ico").css("display","none");
            headercell.find("span.ui-grid-ico-sort").addClass("disabled");
            headercell.find("span.ui-jqgrid-sort-order").html("&nbsp;");
            k.lso = "";
        }

        // Update the sort icons
        for (var k in sortstring) {
            var s = sortstring[k].trim().split(" ");
            var colname = s[0].trim();
            var headercell = $("#" + p.id + "_" + colname);
            headercell.find("span.s-ico").css("display","");
            if (s[1].trim() == "asc") {
              headercell.find("span.ui-icon-asc").removeClass("disabled");
              p.colModel[p.iColByName[colname]].lso = "asc-desc";
            }
            else {
              headercell.find("span.ui-icon-desc").removeClass("disabled");
              p.colModel[p.iColByName[colname]].lso = "desc-asc";
            }
          headercell.find("span.ui-jqgrid-sort-order").html(parseInt(k)+1);
        }

【讨论】：