web-dev-qa-db-ja.com

JqG​​ridでのテキスト行の折り返し

JqGridでラップするテキスト行を取得できますか？見回してみましたが、何も見つかりません。

javascriptjqueryjqgrid
53
beakersoft

次のCSSを試してください。

    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
    }

これはjqGrid 3.6を使用することで機能します。

N30が指摘したように、jqGrid 4.0は cellattr colModelオプションをサポートするようになり、テキストの折り返しをより細かく制御できるようになりました。彼の例から：

cellattr: function (rowId, tv, rawObject, cm, rdata) { 
    return 'style="white-space: normal;"';
}
56
Justin Ethier

JQGrid 4.0では、これを行うためのより良い方法は、colmodelで次のようにcellattrを使用することです。

colModel: [
            { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' } },

            .... other columns

            ]

このようにして、個々の列に折り返しスタイルを適用でき、！importantを使用する必要はありません。

28
N30

私はヘッダーにこの問題があり、IEでそれを修正するためにこれをすべて必要とすることがわかりました。これはセル用ではなくヘッダー用です。これに関する問題は、おそらくあなたが望むよりも多くの影響を与えることです（後で発見するでしょうが）オプトインしてください。

.ui-jqgrid .ui-jqgrid-htable th div {
overflow: visible !important;
height: auto !important;
}

.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
  white-space: normal !important;  
}

.ui-jqgrid .ui-th-div-ie{
  white-space: normal !important;  
}
4
AaronLS

classes colModelオプションを使用して、CSSクラスを列に配置してから、CSSファイルにスタイルwhite-space: normal !important;そのクラスで...

クラス

ストリング

このオプションにより、列にクラスを追加できます。複数のクラスを使用する場合は、スペースを設定する必要があります。例classes:'class1 class2'は、その列のすべてのセルにclass1とclass2を設定します。

グリッドcssには、特定の行にEllipsisをアタッチできる定義済みのクラスui-Ellipsisがあります。また、これはFireFoxでも機能します。

0
lmcarreiro