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

问题描述

我需要更改 jqgrid 的默认排序图标.当前，每列显示一个向上和向下箭头.如何将其替换为单击后会更改的单个图标?

I need to change the default sort icons for the jqgrid. Currently it has an up and down arrow shown for each column. How can I replace it with a single icon that changes as it is clicked on?

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

Basically, the icon should toggle between ascending, descending and unsorted.

解决方案

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

Using Oleg's answer I changed the default double arrow icons to be a single red up or down arrow that toggles when sorted.

jqGrid用 searchResults class包裹在div中.

这会使标题图标变为红色:

This makes the header icons red:

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon
{
    background-image: url("../images/ui-icons_cd0a0a_256x240.png");
}

当仅显示一个图标而另一个图标被隐藏时，这将使图标居中:

This centers the icons when only one icon is showing and the other is hidden:

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc
{
    height:12px;
    margin-top:0px;
}

这会隐藏无效的排序图标:

This hides the inactive sort icon:

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc
{
    display: none;
}

推荐答案

jqGrid使用jQuery UI进行排序.您可以在 http://jqueryui.com/themeroller/上实现自己的主题插图，并在以下位置下载定制的结束.如果仅要将排序图标更改为主题中已经存在的其他图标，则可以更轻松地完成此操作.但是首先，您必须了解如何在列标题中使用图标.

jqGrid use jQuery UI for the sort icons. You can implement your own theme intaractive on the http://jqueryui.com/themeroller/ and download it at the end of customization. If you only want to change the sort icons to other icons already existing in the theme you can do this more easy. But before all you have to understand how the icons will be used in the column headers.

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

At the initialization time it will be created headers for all columns of jqGrid. Every header contain spans with the sort icons. The span blocks looks like following

<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类的定义如下

Because of having "ui-icon" class the elements has background which come from the jQuery UI theme which you use. From the background will be used the parts corresponds to "ui-icon-triangle-1-n" and "ui-icon-triangle-1-s" icons. Classes ui-icon, ui-icon-triangle-1-n and ui-icon-triangle-1-s is defined as following

.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({/*...*/});之后)直接执行此操作.如果在背景图像中找不到所需的图标，则最好不要更改现有的图标.您可以在使用的背景图像中添加一些新零件.

If you want to replace there to other icons (see all standard available icons at the botom of http://jqueryui.com/themeroller/) you can do this for example directly after creating the jqGrid (after jQuery("#list").jqGrid({/*...*/});). If you don't find in the background image the icons which you need you should better not change an existing icons. You can add some new parts in the background image which you use.

jqGrid中不直接支持三态排序图标(升序，降序和未排序).如果确实要实现此功能，建议您仔细阅读grig.base.js的sortData功能的实现，该功能在已下载的jqGrid源代码的src子目录中找到.此函数为span.s-ico调用jQuery.hide()或jQuery.show()函数，从子范围中添加或删除ui-state-disabled类，并调用onSortCol事件句柄(如果已定义).因此，您可以在自定义onSortCol事件句柄中实现所有排序图标更改.

There are no direct support for 3-state sort icons (ascending, descending and unsorted) in jqGrid. If you do want to implement this I'll recommend you to read carefully implementation of sortData function of grig.base.js which you find in src subdirectory of downloaded jqGrid sources. This function call jQuery.hide() or jQuery.show() functions for the span.s-ico, add or remove ui-state-disabled class on one from the child spans and call onSortCol event handle if it is defined. So you can implement all changeing of sort icons inside of your custom onSortCol event handle.

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

UPDATED: Free jqGrid fork have many options to customize sorting icons. First of all if supports Font Awesome icons. One need just include the Font Awesome CSS and the option . One can, for example, use threeStateSort: true to allow to display the item in original, unsorted order on th 3-d click on the column header. One can use sortIconsBeforeText: true to change the order of icons and the text. Placing of the sorting icons before the text could be helpful in case of usage long textes in the column headers. One can use showOneSortIcon: true option to show only one (desc or asc) sorting icons instead of two sorting icons (one over the second one or one near the second one).

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

One can even full customize the sorting icons by overwriting $.jgrid.builderSortIcons method. The demo shows how one can use simple custom $.jgrid.builderSortIcons method to set *different sorting icons for differents columns. The demo uses three different icons depend on the type of data in the column. The columns with the default sorting type sorttype: "text" displays

，

显示具有数字类型(sorttype: "integer"，sorttype: "int"，sorttype: "float"，sorttype: "number"或sorttype: "currency")的列

the columns having numeric types (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" or sorttype: "currency") displays

和

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

and all other column, for example, the column having sorttype: "date" displays

和

这篇关于如何更改jqgrid的列排序图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！