jqgrid 4-4-3版本可以自定义asc desc

苏拉·班达里

是否可以在将数据加载到 jqgrid 时仅显示 asc 或 desc 图标？如何自定义图标的颜色？

奥列格

您遇到的主要问题是：您使用 jqGrid 的非常旧的 4.4.3 版本，它已经有将近 5 年的历史了。旧的 jqGrid 不允许只显示一个排序图标。此外，它只允许使用旧的 jQuery UI 图标，它使用 PNG 图像作为图标。无法为不同图标更改 png 图像的颜色，因为每个图标都是一个图像的一部分，如下所示：

您可以看到 Redmond 团队使用的上图所有图标都使用蓝色。实现您的要求变得更加复杂。

我建议您考虑升级到免费 jqGrid的当前版本 (4.15.1) - jqGrid的分支，我在 2014 年底开始开发。分支与 4.4.3 兼容。

免费的 jqGrid 支持许多新选项，例如showOneSortIcon: true您需要的 option 。此外，它还允许包含Font Awesome 4.x 的 CSSfont-awesome.min.css并添加iconSet: "fontAwesome"选项以将所有 jQuery UI 图标替换为基于矢量的 Font Awesome 图标。请参阅此处的使用示例。因此，您可以轻松地为任何图标指定任何颜色。例如，演示https://jsfiddle.net/OlegKi/2cgyL4qx/ 结合使用以下 CSS 规则showOneSortIcon: true和iconSet: "fontAwesome"选项：

.ui-jqgrid .s-ico > .ui-icon-desc.fa {
    color: green;
    top: -0.3em;
}
.ui-jqgrid .s-ico > .ui-icon-asc.fa {
    color: red;
    top: 0.1em;
}

结果 asc/desc 图标如下图所示

免费的 jqGrid 包含许多其他选项，允许自定义排序图标（请参阅此处）。例如，您可以将标准图标完全覆盖为您的自定义图标并使用这些图标，例如，取决于相应列中的数据类型。您可以尝试另一个演示https://jsfiddle.net/OlegKi/1c7rxfLn/并检查不同列中的排序图标。您将看到 3 组不同的图标：用于数字、字母和其他类型的数据。排序图标如下图所示：