2

グリッドで聞いた 1 つの列だけスタイルを変更することは可能ですか?!

sjg:gridColumnにはプロパティがありcssClassますが、この css を設定すると、列ヘッダーではなく、列の下の行にのみ適用されます。

JQGRIDで - JavaScript で HTML ヘッダー テキストの背景色を変更することは可能ですか? 私はコードを次のように取得しました：

あなたのHTMLページで。1 つの列のみを変更する場合は、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ことを行うことができることがわかりました?!

4

1 に答える 1

2

特定の列の列ヘッダーのスタイル/クラスを設定する宣言的な方法はありません (id または列名が明示的に設定される CSS ルールの定義は除外します)。したがって、使用setLabelして設定する必要があります。

background-image背景色を変更する必要がある場合は、それも設定する必要があることを考慮する必要がありnoneます。さらに、他のCSS ルールも適用され、より具体的なCSS セレクターを持つルールが優先されることを忘れないでください。たとえばfont-size、 の次のルールにより、列ヘッダーの が適用されますui.jqgrid.css。

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

ルールに 2 つのクラスがあります。クラスを持つ列の値を変更したい場合は、次のmakeThisSmallような CSS ルールを定義する必要があります。

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

また

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

いずれにせよ、上書きしたい CSS ルールと同じかそれ以上に複雑でなければなりません。

同様に、background2 つのクラスを含む CSS ルールのために が適用されます。

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

したがって、属性を介して上書きできるようにするには、対応する深い (またはより深い) CSS ロールも定義する必要がありclassます。

于 2014-11-11T08:26:20.180 に答える