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

Question

我需要更改jqgrid的默认排序图标.目前,它为每列显示了向上和向下箭头.如何将其替换为单击图标时更改的图标？

基本上,图标应在升序,降序和未分类之间切换.

---

解

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

该jqGrid被包裹在一个div与SearchResult所 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 中不直接支持三态排序图标（升序、降序和未排序）。如果您确实想实现此功能，我建议您仔细阅读在下载的 jqGrid 源代码的子目录中找到sortData的功能的实现。此函数调用或函数用于在子跨度中添加或删除其中一个类，并调用事件句柄（如果已定义）。因此，您可以在自定义事件句柄内实现所有排序图标的更改。grig.base.jssrcjQuery.hide()jQuery.show()span.s-icoui-state-disabledonSortColonSortCol

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

人们甚至可以通过覆盖方法完全自定义排序图标$.jgrid.builderSortIcons。该演示展示了如何使用简单的自定义$.jgrid.builderSortIcons方法为不同的列设置*不同的排序图标。该演示根据列中数据的类型使用三个不同的图标。sorttype: "text"显示具有默认排序类型的列

和

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

和

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

和