struts2 - struts 2 jquery grid插件仅更改一列标题样式

Question

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

sjg:gridColumn 有一个 cssClass 属性，但设置此 css 只会应用于列下的行，而不是列标题。

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

in your HTML page. If you want make the changes for one column only you can use setLabel method:

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

or

$("#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 这可以做我正在寻找的事情吗？!

Answer 1

没有声明性的方式来设置特定列的列标题的样式/类(我排除了明确设置 id 或列名称的 CSS 规则的定义)。所以你应该使用setLabel来设置它。

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

.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 规则一样复杂或更复杂。

同样，由于 CSS 规则也包含两个类，因此将应用 背景

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

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