Free-jqGrid navButtonAdd buttonColor

Question

使用free-jqgrid v4.13.1 在使用fontAwesome 时是否有任何参数可以设置按钮颜色？我可以通过在其上设置样式来更改图标颜色，但我想知道 navButtonAdd 中是否有参数来设置图标颜色，例如：

.jqGrid("navButtonAdd", {
    iconsOverText: true,
    caption:"<span class='ui-pg-button-text'>Filter</span>",
    buttonicon: "fa-filter",

buttoncolor: "red",

        onClickButton: function() {
            InitializeFilterDialog();
            $("#filter-dialog-form").dialog("open");
        },
    title:"Filter",
    position: "first"
})

我知道对于其他图标我可以做类似的事情：

filterButton.addClass("fa-ban");
filterButton.css("color", "red");

我也想知道 jqGrid 上是否有允许设置默认按钮颜色的参数，例如：

iconSet: "fontAwesome",

iconColor: "blue",

.....

Answer 1

这个问题很有趣。是的，一切皆有可能！

您需要定义 CSS 规则，例如

.red {
    color: red;
}

并使用

buttonicon: "fa-table red"

而不是 buttonicon: "fa-filter"。

见https://jsfiddle.net/OlegKi/7gfhyxgw/3/

要将所有按钮的默认颜色更改为蓝色，您需要定义一些 class 如

.myblue {
    color: blue;
}

然后应该根据现有的 "fontAwesome" 定义新的 iconSet like

$.jgrid.icons.blueFontAwesome = {
    baseIconSet: "fontAwesome",
    common: "fa myblue",
    nav: {}
};

并使用 iconSet: "blueFontAwesome" 而不是 iconSet: "fontAwesome"。这是结果，就像下一个演示中那样得到结果

https://jsfiddle.net/OlegKi/7gfhyxgw/4/

我稍微更改了上述 red 颜色的规则以提高其优先级：

.ui-pg-div .red {
    color: red;
}

REMARK: nav: {} 的用法似乎是不必要的。这是必需的，因为我将在接下来的几天修复小错误。问题是：我只针对特定图标测试了现有 iconSet 的扩展，从未测试过更改 common class.

Free-jqGrid navButtonAdd buttonColor

Free-jqGrid navButtonAdd buttonColor

css

jquery

jqgrid

font-awesome

free-jqgrid