Jqgridでグリッド列ヘッダーを揃えることは可能ですか?たとえば、左右または中央に揃えますか?
Jqridドキュメントでは http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options と言います:
align: Defines the alignment of the cell in the Body layer, not in header cell.
Possible values: left, center, right.
「ヘッダーセルにない」と表示されていることに注意してください。ヘッダーセル(グリッドタイトルセル)に対してこれを行うにはどうすればよいですか?ドキュメントでは、この小さな詳細について言及していません。..
列ヘッダーの配置を変更するための最も良い文書化された方法は、jqGridのsetLabel
メソッドの使用です( http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methodsを参照 )。
次のコードを使用して、'name': 'Name'
で識別される列の配置を変更できます。
grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'});
コードで
grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'},
{'title':'My ToolTip for the product name column header'});
ヘッダー名を「製品名」に変更し、「製品名の列ヘッダーのMy ToolTip」を対応する列ヘッダーのツールヒントとして設定できます。
また、CSSでいくつかのクラスを定義し、setLabel
メソッドに関しても列ヘッダーに設定できます。
ところで、jqGridのcolNames
パラメーターを定義することはできませんが、colModel
で追加の'label'
オプションを使用して列を定義するため、関数 'setLabel'の名前が選択されます'name'
値としてのその他のヘッダー。
[〜#〜] updated [〜#〜]:クラスを使用して'text-align'
または'padding'
を定義できます。 。フォローしてみてください
.textalignright { text-align:right !important; }
.textalignleft { text-align:left !important; }
.textalignright div { padding-right: 5px; }
.textalignleft div { padding-left: 5px; }
そして
grid.jqGrid ('setLabel', 'Name', '', 'textalignright');
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft');
(結果をより良く見るために、5pxをパディングとして定義しました。あなたの場合により良いパディング値を選択できます)。
Jqgridのcssファイルに移動するだけです。
探す:
ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{overflow:hidden;white-space:nowrap;text-align:center; ...
そして、テキストの配置を変更します。
私は通常のオプションではそれを見つけられませんでした。
これがお役に立てば幸いです。
ブルーノ
これを試してください
loadBeforeSend: function () {
$(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left");
}
「setLabel」メソッドを使用することは実行可能ですが、ヘッダーセルをセルと同じように揃えたいと常に思っています。だから私はこの関数を使用します:
function pimpHeader(gridObj) {
var cm = gridObj.jqGrid("getGridParam", "colModel");
for (var i=0;i<cm.length;i++) {
gridObj.jqGrid('setLabel', cm[i].name, '',
{'text-align': (cm[i].align || 'left')},
(cm[i].titletext ? {'title': cm[i].titletext} : {}));
}
}
これは、セルの配置を使用してヘッダーを配置します。このように呼び出すには:
pimpHeader(jQuery("#grid"));
必要に応じて、「titletext」でColumn-Modelを拡張できます。これは、次のようにツールヒントヘッダーとして表示されます。
colModel: [{ name: 'name', label: 'Name', align: 'right', titletext: 'Name-Tooltip'}, ...]
ColModelのColumnにalign属性を追加するだけです:
colModel: [
{name: 'MyColumn', index: 'MyColumn', align: 'center'}
],
ソースを参照して、グリッドが参照しているcssを見つけたら、これを試すことができます。
setTimeout(function(){
jQuery('.ui-th-column').css('text-align','center');
},1);