如何更改 jqgrid 的列排序图标? [英] How do you change the column sort icons for a jqgrid?

问题描述

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

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

<小时>

解决方案

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

jqGrid 被包裹在带有 searchResults class 的 div 中.

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

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon{背景图像:url(../images/ui-icons_cd0a0a_256x240.png")；}

当只显示一个图标而隐藏另一个图标时，这会使图标居中:

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc{高度:12px；边距顶部:0px；}

这会隐藏非活动的排序图标:

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc{显示:无；}

解决方案

jqGrid 使用 jQuery UI 来排序图标.您可以在 和

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

和

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

和

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.

---

Solution

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

The jqGrid is wrapped in a div with a searchResults class.

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

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>

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

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.

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.

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).

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

and

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

and

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

and

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