struts 2 jquery grid插件只改变一个列标题样式

时间:2014-11-11 07:08:59

标签: struts2 jqgrid struts2-jquery struts2-jquery-grid

是否可以更改网格中只听到一列的样式?!

sjg:gridColumn具有cssClass属性,但设置此css仅适用于列下的行,而不是列标题。

JQGRID - Is it possible to change the background color of HTML header text in JavaScript?我的代码为:

  在您的HTML页面中

。如果要仅对一列进行更改   你可以使用setLabel方法:

     

$("#myGrid").jqGrid('setLabel','Price', '', {'background':'red'});

     

     

$("#myGrid").jqGrid('setLabel','Price', '', 'myColorClass');

但我无法使其发挥作用。

最后,由于列标题将具有唯一ID,我可以使用以下内容:

document.getElementById("gridtable_sampleColumn").style.backgroundColor = "#FF0000";

您认为有更好的方法吗?我正在寻找这样的事情:

<sjg:gridColumn name="sampleColumn" 
            cssClass="makeThisSmall" />

在我的CSS中

.makeThisSmall{
  font-size : smaller;
}

哪个不起作用,只更改行css而不是列标题。

另外,我发现gridColumn有一个formatoptions这可以做我正在寻找的事情吗?!

1 个答案:

答案 0 :(得分:2)

没有声明方法为特定列设置列标题的样式/类(我排除明确设置id或列名称的CSS规则的定义)。因此,您应该使用setLabel进行设置。

如果您需要更改背景颜色,则应考虑background-image也必须设置为none。此外,您不应忘记其他 CSS规则也将被应用,并且具有更具体 CSS选择器的规则将获胜。例如,由于来自font-size的以下规则,将应用列标题中的ui.jqgrid.css

.ui-jqgrid .ui-jqgrid-view {
    font-size: 11px
}

规则中包含两个类。如果要更改具有makeThisSmall类的列的值,则应定义CSS规则,如

.ui-jqgrid .ui-jqgrid-view .makeThisSmall {
    font-size: 8px
}

.ui-jqgrid-view .makeThisSmall {
    font-size: 8px
}

无论如何,它至少应该像你要覆盖的CSS规则那么复杂或复杂。

以同样的方式应用background因为CSS规则也包含两个类

.ui-widget-content .ui-state-default {
    background: ...
}

因此,您还需要定义相应的深层(或更深层次)CSS角色,以便能够通过class属性覆盖它。