12

新しいMVC3WebGridを使用しています。これまでのところ、列ヘッダーのスタイル設定/フォーマットに問題があるだけです。私が得た最善の方法は、WebGridの最初の行からテーブルヘッダーに同じcssクラスを適用する回避策です。

var headerCells = $("#grid tr:eq(0) th");
var firstRowCells = $("#grid tr:eq(1) td");

$.each(firstRowCells, function (index, value) {
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});

この例には、行または実際に指定された要素IDがあることを確認するためのチェックが明らかに欠けていますが、最初の行からヘッダー行にcssクラスが適用されるため、互いに独立してスタイルを設定できます。

td.my-column-style { width:100px }
th.my-column-style { text-align:right;}

（headerStyleプロパティを使用するだけでなく）列ヘッダー要素のスタイルを設定する組み込みの方法はありますか？

4

3 に答える 3

5

いいえ、現時点では、ヘッダーセルを個別にスタイル設定する組み込みの方法はなく、headerStyleプロパティを介したヘッダー行のみです。

回避策は十分だと思います。

于 2011-02-05T22:28:47.213 に答える
4

これは古い質問だと思いますが、これは、つまずいた視聴者にとっては役立つかもしれません。クラスをコピーするためにjavascriptに依存したくない場合は、：nth-​​childcss疑似セレクターが友だちです。tableStyleプロパティを使用してWebグリッドにクラスを追加するのは簡単です。次に、次のcssビットを使用して個々のヘッダーのスタイルを設定できます。

.webgridclass tr th:nth-child(1){
    background:#ff0;
}

.webgridclass tr th:nth-child(2){
    background:#f60;
}

残念ながら、これはIE8以前のIEではサポートされていませんが、すべての適切なブラウザー（FF3より新しい）で完全にサポートされています。

于 2013-07-04T13:39:40.343 に答える
1

Javascript以下のコードを使用してこれを行うことができます。

JsFiddleの例

$("table tr th:nth-child(n)").addClass("col-md-1");
于 2015-11-06T13:58:18.137 に答える