web-dev-qa-db-ja.com

Jquery JQGrid-グリッドヘッダーセルの配置を設定する方法

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.

「ヘッダーセルにない」と表示されていることに注意してください。ヘッダーセル（グリッドタイトルセル）に対してこれを行うにはどうすればよいですか？ドキュメントでは、この小さな詳細について言及していません。..

jqueryjqgrid
24
JK.

列ヘッダーの配置を変更するための最も良い文書化された方法は、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をパディングとして定義しました。あなたの場合により良いパディング値を選択できます）。

24
Oleg

Jqgridのcssファイルに移動するだけです。

探す：

ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{overflow:hidden;white-space:nowrap;text-align:center; ...

そして、テキストの配置を変更します。

私は通常のオプションではそれを見つけられませんでした。

これがお役に立てば幸いです。

ブルーノ

7
bruno

これを試してください

loadBeforeSend: function () {
    $(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left");
}
2
Shailesh R

「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'}, ...]
1
Stefan

ColModelのColumnにalign属性を追加するだけです：

colModel: [
          {name: 'MyColumn', index: 'MyColumn', align: 'center'}
      ],
0
Mehdi Souregi

ソースを参照して、グリッドが参照しているcssを見つけたら、これを試すことができます。

setTimeout(function(){
   jQuery('.ui-th-column').css('text-align','center');
},1);
0
user3404584