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

Question

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

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

<小时/>

解决方案

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

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 的所有列创建标题。每个标题都包含带有排序图标的跨度。跨度 block 如下所示

<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 函数的实现，您可以在 src 中找到该函数> 下载的 jqGrid 源的子目录。此函数调用 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" 的列

和