jqGrid 更改折叠图标

Question

我们使用的是 jqGrid 4.6 版

我们想要更改折叠图标。所以下面的代码完成了这项工作

$(".ui-icon-circlesmall-plus")
          .removeClass("ui-icon-circlesmall-plus")
          .addClass("ui-icon-arrowstop-1-s");

我应该把这段代码放在哪里？

我已经把它放在gridCompletelike

gridComplete: function(){

      $(".ui-icon-circlesmall-plus")
          .removeClass("ui-icon-circlesmall-plus")
          .addClass("ui-icon-arrowstop-1-s");

}

但不起作用，但是通过添加超时代码可以正常工作：

gridComplete: function(){
              setTimeout( function(){
              (".ui-icon-circlesmall-plus")
                .removeClass("ui-icon-circlesmall-plus")
                .addClass("ui-icon-arrowstop-1-s");}, 1000);
        },

https://jsfiddle.net/jbb9173b/ 的示例，如果您取消超时，图标将不会改变！

为什么我需要时间？！我正在触发不良事件？我的意思是还有另一个事件可以消除超时功能的需要吗？

有没有更好的办法？

Answer 1

可以使用groupingView 的minusicon 和plusicon 属性来指定用于数据分组的图标。例如

groupingView: {
    minusicon: "ui-icon-arrowstop-1-n", // "ui-icon-circlesmall-minus"
    plusicon: "ui-icon-arrowstop-1-s",  // "ui-icon-circlesmall-plus"
    groupField: ["ProductName"],
    groupCollapse: true
}

结果如下图所示

查看修改后的演示https://jsfiddle.net/OlegKi/jbb9173b/2/

我仍然建议您使用free jqGrid fork 而不是旧的 jqGrid 4.6，它已经死了。它拥有全新的完全自定义图标系统（参见the wiki article），其中图标不仅可以是 jQuery UI 图标，还可以是 Bootstrap 的字形图标、Font Awesome 图标或任何其他图标。所有默认设置都可以看到here。可以使用iconSet 选项（例如iconSet: "fontAwesome"、iconSet: "glyph" 或默认图标集：“jQueryUI”）来指定更喜欢使用的图标集。您应该只包含带有图标的相应 CSS（font-awesome.min.css 或 bootstrap.min.css）。可以从现有图标集轻松更改任何图标，并以新的自定义集的方式定义。例如，可以定义

$.jgrid.icons.customjQueryUI = {
    baseIconSet: "jQueryUI",
    grouping: {
        plus: "ui-icon-arrowstop-1-s", //"ui-icon-circlesmall-plus"
        minus: "ui-icon-arrowstop-1-n" //"ui-icon-circlesmall-minus"
    }
};

并使用iconSet: "customjQueryUI" 选项。请参阅修改后的演示 https://jsfiddle.net/OlegKi/jbb9173b/3/，它使用 jqGrid 4.13.4。

只能使用 Bootstrap 的字形图标：

$.jgrid.icons.customGlyph = {
    baseIconSet: "glyph",
    grouping: {
        plus: "glyphicon-save", //"glyphicon-expand"
        minus: "glyphicon-open" //"glyphicon-collapse-down"
    }
};

查看https://jsfiddle.net/OlegKi/jbb9173b/5/，它会显示