3

多くの列を含むテーブルにデータを表示するdgridがあります。dgridのデフォルトのレイアウトでは、すべての列がページに表示されます。つまり、列が折りたたまれ、各列のヘッダー全体またはデータを表示できません。

デフォルトのレイアウトのテーブル

すべての列を展開して、そこに含まれるすべてのデータとヘッダー情報を表示したいと思います。次に、すべての列を表示するために横にスクロールするための水平スクロールバーが必要になります。デフォルトのレイアウトをdgrid-row-tableからtable-layout: fixedに変更することでこれを行うことができましtable-layout: autoたが、列が整列しませんでした。

整列していない完全な列を持つテーブル

dgrid/OnDemandGrid多くの列と水平スクロールでを使用する方法はありますか？

4

2 に答える 2

1

私のソリューションはdgrid/OnDemandGridを使用していませんが、それでも機能します。

1 /グリッドを次のようにコンテナに入れます：

<div id="container">
    <div id="grid" style="width:100%;height:100%"></div>
</div>

2 / cssで幅、高さ、スクロールを設定します：

#container{
    height: 200px;
    width: 800px;
    overflow: auto;
}

3 /グリッドの構造で、要素「width」を「auto」に配置します。

var gridLayout = [  
                  {
                      defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: right;'  },
                      cells:    [
                                 { name: "ID"               , field: "id"           , width: "auto" },
                                 { name: "Reg."             , field: "reg"          , width: "auto", editable: true },
                                 { name: "Type"             , field: "type"         , width: "auto" }
                  ];

（例えば）

行のサイズは、最大のコンテンツを完全に表示するのに十分な大きさであり、divコンテナにはスクロールがあります。

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

于 2013-01-25T13:03:23.837 に答える
1

dGridはこれをすぐにサポートします。dgridの幅を設定し、各列の最小値を設定するだけです。列の幅がdgridの幅よりも大きい場合、水平方向にスクロールします。

JSフィドル http://jsfiddle.net/e9jad/7/

 .dgrid-grid {
    width: 100%
 }
 .dgrid-cell {
    width: 400px;
 }

dgridの高さはデフォルトで30emに設定されているため、これを変更するか、スクロールがコントロールの下部から外れる可能性があることに注意してください。

また、dojoテストの例を見ることができます http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

于 2014-03-31T08:30:29.343 に答える