如何更改 jqgrid 的列排序图标？

Question

我需要更改 jqgrid 的默认排序图标。目前，它为每列显示一个向上和向下箭头。如何将其替换为单击时会发生变化的单个图标？

基本上，图标应该在升序、降序和未排序之间切换。

---

解决方案

使用 Oleg 的回答，我将默认的双箭头图标更改为单个红色向上或向下箭头，在排序时切换。

jqGrid 被包裹在 div 中，searchResults class。

这会使标题图标变为红色：

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon
{
    background-image: url("../images/ui-icons_cd0a0a_256x240.png");
}

当只显示一个图标而隐藏另一个图标时，这会使图标居中：

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc 
{
    height:12px;
    margin-top:0px;
}

这会隐藏非活动的排序图标：

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc
{
    display: none;
}

Answer 1

jqGrid 使用 jQuery UI 对图标进行排序。您可以在http://jqueryui.com/themeroller/ 上实现自己的主题 intaractive 并在自定义结束时下载它。如果您只想将排序图标更改为主题中已经存在的其他图标，您可以更轻松地完成此操作。但在此之前，您必须了解如何在列标题中使用图标。

在初始化时，它将为 jqGrid 的所有列创建标题。每个标题都包含带有排序图标的跨度。跨度块如下所示

<span class="s-ico" style="display: none;">
     <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" sort="asc" />
     <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" sort="desc" />
</span>

由于具有“ui-icon”类，元素具有来自您使用的 jQuery UI 主题的背景。从后台将使用对应于“ui-icon-triangle-1-n”和“ui-icon-triangle-1-s”图标的部分。 ui-icon、ui-icon-triangle-1-n 和 ui-icon-triangle-1-s 类定义如下

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }

如果您想将那里替换为其他图标（请参阅http://jqueryui.com/themeroller/ 底部的所有标准可用图标），您可以在创建 jqGrid 之后直接执行此操作（在jQuery("#list").jqGrid({/*...*/}); 之后）。如果您在背景图像中没有找到您需要的图标，则最好不要更改现有图标。您可以在您使用的背景图像中添加一些新部分。

jqGrid 中不直接支持三态排序图标（升序、降序和未排序）。如果您确实想实现这个，我建议您仔细阅读grig.base.js 的sortData 函数的实现，您可以在下载的jqGrid 源的src 子目录中找到它。此函数调用span.s-ico 的jQuery.hide() 或jQuery.show() 函数，从子跨度中添加或删除ui-state-disabled 类，并调用onSortCol 事件句柄（如果已定义）。因此，您可以在自定义 onSortCol 事件句柄中实现所有排序图标的更改。

更新： Free jqGrid fork 有很多选项可以自定义排序图标。首先是否支持Font Awesome 图标。只需要包含 Font Awesome CSS 和选项 .例如，可以使用threeStateSort: true 允许在3-d 单击列标题时以原始、未排序的顺序显示项目。可以使用sortIconsBeforeText: true 更改图标和文本的顺序。在列标题中使用长文本的情况下，在文本之前放置排序图标可能会有所帮助。可以使用showOneSortIcon: true 选项仅显示一个（desc 或 asc）排序图标，而不是两个排序图标（一个在第二个上方或在第二个附近）。

您甚至可以通过覆盖$.jgrid.builderSortIcons 方法来完全自定义排序图标。 The demo 展示了如何使用简单的自定义$.jgrid.builderSortIcons 方法为不同的列设置*不同的排序图标。 The demo 使用三个不同的图标，具体取决于列中的数据类型。默认排序类型sorttype: "text"的列显示

和

显示具有数字类型（sorttype: "integer"、sorttype: "int"、sorttype: "float"、sorttype: "number" 或 sorttype: "currency"）的列

和

以及所有其他列，例如具有sorttype: "date" 的列显示

和