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

我需要更改jqgrid的默认排序图标。目前它为每列显示一个向上和向下的箭头。我怎样才能用一个单击图标替换它，因为它被点击了？如何更改jqgrid的列排序图标？

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

解决方案

使用奥列格的回答，我改变了默认双箭头图标是一个红色的向上或向下箭头排序时切换。

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

来源

2010-09-01 GiddyUpHorsey

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

在初始化时，它将为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/的botom），比如，你可以做到这一点创建的jqGrid后直接（在jQuery("#list").jqGrid({/*...*/});之后）。如果您在背景图片中找不到您需要的图标，最好不要更改现有的图标。您可以在您使用的背景图像中添加一些新的部件。

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

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

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

和