1

入力に応じて、結果の dgrid の列数/列幅が異なるアプリケーションを作成しています。次の 2 つのスクリーンショットに注意してください。最初のものにはいくつかの選択フィールドしかなく、セル/データは水平方向にきれいにレンダリングされます。2 番目のクエリには多くの選択フィールドがあり、ご覧のとおり、すべてのセルを 1 つの画面に収めようとしてデータが乱雑になるため、望ましくないレンダリングが行われます。dgrid も dijit BorderContainer 内にあることに注意してください。

スクリーンショット 1 (小さい SELECT フィールドセット、正常にレンダリング) スクリーンショット 1 (小さい SELECT フィールドセット、正常にレンダリング)

スクリーンショット 2 (大きな SELECT フィールドセット、望ましくないレンダリング スクリーンショット 2 (大きな SELECT フィールドセット、望ましくないレンダリング)

ここには多くの問題がありますが、私の主な質問は次のとおりです。

  1. css ルール (または他の方法 - dgrid 関数/イベント) はありますか? これには、グリッドを水平スクロールバーで表示する必要があります。したがって、幅を設定するのではなく、データでグリッドの幅を駆動したいと思います。私は試し.dgrid-cell { white-space:nowrap; }ましたが、これは無視されたようです。セル内にスパンを追加する必要があるように思えますが、これには上記の css ルールがありますか?
  2. 第二に、次の問題は、上記のルールを適用する必要があるケースと、データが画面に収まるケースを決定することです。このような状況では、最初のスクリーンショットのようにテーブルに 100% の幅を使用させるのが最善かもしれません。これについて何か入力はありますか？

ありがとう

4

1 に答える 1

1

ここでは、データに基づいてグリッド セルの幅を設定する方法を説明します。これはdatagridobj 用ですが、おそらく obj 用にいくつかの調整を行う必要がありますdgrid。

いくつかの手順があります:

1) <div>HTML 呼び出しでタグを作成します。test

<div id="test"></div>

2) グリッド内の各列のデータをループし、次のような JavaScript を使用してその列のデータの最大幅をキャプチャします。

var fnt_sz = '9pt';
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = fnt_sz;
var widthPX = 45; //default px width
for (var i = 0; i < columns.length; i++) {
  tst_item.innerHTML = columns[i]; //columns array represents data that will display for the column
   widthPX = (tst_item.clientWidth + 1); //Give width in PX of the data pad it a bit as needed
}

ここでの重要な項目には、適切なフォント サイズ (fnt_sz) の設定、すべての列データをループして列の最大幅 (PX) を見つけることが含まれます。列の最大値を使用して、データグリッドのオブジェクトwidthPXの列幅を設定します。layout

3) データグリッドのレイアウト JSON データを作成するときは、各列の幅を設定します (列の最大データ幅PX)。何かのようなもの：

var build_layout = "    var layout = [[{'name': 'ID', 'field': 'id', 'width': '17px'},";
for (var i = 0; i < cols.length; i++) {
  build_layout += "\n{'name': '" + cols[i] + "', 'field': 'col" + (i+1) + "', 'width': '" + widths[i] + "px'},"; 
}
build_layout += "]];";
eval(build_layout);

/*create a new grid*/
var grid = new DataGrid({
  id: 'grid',
  store: store,
  structure: layout, //Use layout JSON data which has width: xxpx; set for each column
  rowSelector: '20px',
  style: 'font-size:9pt',
  rowsPerPage: 1000,
  columnReordering: true,
  autoWidth: true,
  autoHeight: autoH});

グリッドが表示されると、どのブラウザでも適切に表示され、列幅の PX 値がその列の最大データ項目よりも大きいため、すべてのデータが表示されるはずです。各列の最大 px 値を簡単に追加できるはずです。物事は幅で手に負えません。

これは $ss では少し面倒で、dojo datagrid オブジェクトのプロパティである必要がありますが......

これらの手順を実行して最終的に得られるものは次のとおりです。

ここに画像の説明を入力

于 2015-04-08T17:10:59.540 に答える