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/上实现自己的主题插图，并在自定义结束时下载它。如果您只想将排序图标更改为主题中已存在的其他图标，则可以更轻松地完成此操作。但在此之前，您必须了解如何在列标题中使用图标。

在初始化时，将为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中没有直接支持3状态排序图标（升序，降序和未排序）。如果您确实希望实现此功能，我建议您仔细阅读sortData grig.base.js函数的实现，该函数位于已下载的jqGrid源的src子目录中。此函数为jQuery.hide()调用jQuery.show()或span.s-ico函数，在子跨度上添加或删除ui-state-disabled类，并调用onSortCol事件句柄（如果是定义。因此，您可以在自定义onSortCol事件句柄中实现排序图标的所有更改。

更新： Free jqGrid fork有很多选项来自定义排序图标。首先，如果支持Font Awesome图标。只需要包含Font Awesome CSS和选项。例如，可以使用threeStateSort: true允许在列标题的三维点击上以原始的未排序顺序显示项目。可以使用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"列显示

和

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

1 个答案: