web-dev-qa-db-ja.com

jqgridで単一の列ヘッダーテキストを複数の行に折り返す方法

列ラベルテキストが列幅よりも広い場合、ラベルテキストは切り捨てられます。一部のテキストが長いため、列の幅を大きくすることは適切ではありません。 Wordにテキストを複数行に折り返す方法は？ヘッダーの高さは、列の最大の高さで決定する必要があります。

私が見つけた唯一の解決策は

jQgrid：複数の列の行ヘッダー

ただし、これはテキストのワードラップを実装していません。

ヘッダーテキストのワードラップの実装方法

更新。キャラクターとワードラップにオレグスタイルを試しました。

キャラクターラップ

    th.ui-th-column div{
Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
    padding-top: 3px;
    padding-bottom: 3px

}

2行目の半分のみを表示します。 3行目はまったく表示されません。

Character wrap does not show third line

ワードラップ

  th.ui-th-column div{
   white-space:normal !important;
   height:auto !important;
   padding:2px;
   }

ラップされた列の列のサイズ変更を無効にします。これらの列で、マウスアイコンを列分割線に移動しても、マウスカーソルはサイザーに変わりません。ラップされた列はサイズ変更できません。

これらの問題を修正するには？

更新2

キャラクターラップを試してみました（オレグの返信の最後のサンプル）。列の幅を狭くしてヘッダーにより多くの行が表示されると問題が見つかりました。

  1. 列分割線の下部をドラッグすると、列のサイズを変更できません。サイズ変更時にサイズ変更の高さは増加しません。

  2. IE9では、ヘッダーの高さの増加は十分ではありません。サイズ変更後、最後のヘッダー行は表示されません。 fireFoxでは、この問題は発生しません。

jquery-uijqgrid
31
Andrus

文字の折り返しを使用した例では、!important設定の後にheight: autoを使用するのを忘れていました。

列のリサイザーの問題は、私の 古い回答 からの私のデモに本当に存在することに同意します。それで改善しました。さらに、Wordの折り返しの代わりに文字の折り返しを使用することが重要な状況を説明しようとします。

Wordラッピングを使用した新しいデモは here です。コードは次のとおりです。

var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;

grid.jqGrid({
    ...
});

// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
    .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
    'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
    this.style.cssText = resizeSpanHeight;
});

// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
    var ts = $(this);
    ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});

次のCSSを使用します

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

そして、次の画像を生成します

enter image description here

（最初の列のすべての文字の後に<br/>を含めて、多くの行に配置してテキストを「Inv No」にしました）。

すべてが非常によく見えますが、列ヘッダーで非常に長いWordoneを使用できる状況もあります。ドイツ語のようないくつかの言語は、多くの単語からなる「Softwareberetstellungsform」のような長い単語を作成することがあります。例では、「Software」、「bereitstellung」、および「form」でした。他の言語でも同じ状況が可能ですが、それほど頻繁ではありません。その結果、以下の（完全ではない）画像が表示されます（デモを参照してください here ）：

enter image description here

テキスト「AmountInEUR」、「TaxInEUR」、および「TotalInEUR」が途切れていることがわかります。列テキストに手動のラインブレーキ（<br/>）を含めるか、 回答 で説明した文字の折り返しを使用できます。 th.ui-th-column divの上記のCSSのみを次のように変更した場合

th.ui-th-column div {
    Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}

次の結果を受け取ります（デモを参照してください here ）

enter image description here

ちなみに、Googleのような一部のブラウザでは、文字の折り返しが機能します。テキストにスペースが含まれている場合、Word Chrome as Word wrapping（!!!）です。 the demo はGoogle Chrome、Safari、Opera、Firefoxは上の図のようにワードラッピングを使用していますが、IE（IE9を含む））と同じデモは次のように表示されます

enter image description here

絶対に完璧な方法はありませんが、Internet Explorer（バージョン<10）を除くすべての最新のWebブラウザーで、文字のラッピングにはいくつかの利点があります。列テキスト内での<br/>の使用、または現在使用されているWebブラウザーに依存するCSSの使用により、ソリューションがさらに改善されます。

37
Oleg
<style type="text/css">
    .ui-jqgrid .ui-jqgrid-htable th div
    {
        height: auto;
        overflow: hidden;
        padding-right: 4px;
        padding-top: 2px;
        position: relative;
        vertical-align: text-top;
        white-space: normal !important;
    }
</style>
19
d.Siva
Following code wraps row data

.ui-jqgrid tr.jqgrow td
    {           
        Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
    }

Following code wraps table header data    
    .ui-jqgrid .ui-jqgrid-htable th div
        {
          Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
        }
3
shalini