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

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

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

解

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

jqGrid包含在一个带有searchResults class的div 。

这使标题图标变为红色：

 .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; }

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

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

由于具有“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中没有直接支持3状态排序图标（升序，降序和未排序）。如果你想实现这个，我建议你仔细阅读sortData函数的grig.base.js ，你可以在下载的jqGrid源的src子目录中找到它。此函数为span.s-ico调用jQuery.hide()或jQuery.show()函数，在子跨度上添加或删除ui-state-disabled类，如果已定义则调用onSortCol事件句柄。因此，您可以在自定义onSortCol事件句柄中实现排序图标的所有onSortCol 。

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

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

在此处输入图像描述和