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

Question

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

代码大致如下：

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

这在后台工作正常(即数据库中sql查询的排序顺序反映了收藏夹(，但标题行中的图标不会更新。

有没有一个额外的API调用可以用来更新排序图标？我研究了"sortGrid"，但这并不是一个简单的答案。

Answer 1

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

或者，您可以使用网格的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]);
});

Answer 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(" ");
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);
}