データグリッド - ヘッダ行とフッタ行のコントロール

この例ではData Grid 2.0の新しいコマンドを使用しています。この新しいデータグリッドを使用して、 開発者はグリッドにヘッダやフッタを追加できます。 重要なことは、グリッドのすべての行は複数行のテキストを表示できるようになったことです。

var myDataGrid = new dax_dataGrid(selection, location, headerRows, lockedLeftColumns, useControlColumn);

このコマンドはonAfterInit()関数から呼ばれ、グリッドを作成します。 headerRows引数はヘッダ行を何行表示するか指定します。 この例では二行のヘッダを表示しています。

myDataGrid.setFooterRows(number of footer rows);

このコマンドは表示するフッタの行数を指定します。この例では一行のフッタを表示しています。

myDataGrid.setHeaderHeight(row number, height in units);

このコマンドは、ヘッダ行の高さを設定します。ヘッダ行番号は0から開始されることに注意してください。さらに、 ヘッダ行に複数行のテキストを表示することができます。 この例では高さに3を設定し、三行のテキストデータを表示可能にしています。

NOTE: テキストを改行するには、CSSの呼び出しが必要です。 ファイルdemotoolbar.cssがこの呼び出しを提供しています。

myDataGrid.setFooterHeight(row number, height in units);

このコマンドは、フッタ行の高さを設定します。フッタ行番号は0から開始されることに注意してください。さらに、 フッタ行に複数行のテキストを表示することができます。

var realRowNumber = myDataGrid.getFooterRowNumber(footerRowNumber);

このコマンドはフッタ行番号を取得します。例えば、一番目のフッタ行参照を取得するには、 footerRowNumber引数に0を渡します。関数はグリッド全体に関連して、行番号を返します。その後、結果を以下のコマンドで使用できます。

myDataGrid.setCellValue (row, col, content);

行の高さを設定した後、行に内容やデータを挿入できます。 この例では、ヘッダ行に複数行のテキストデータが入力されています。さらに列を参照する際には、 行と同じ原則が適用されることに注意してください。列参照は0から始まります。1ではありません。

onBeforeDataDisplayイベントもそれぞれの列のフッタエリアにカスタム値を挿入するために使用されています。

  myDataGrid.onBeforeDataDisplay = function() {
    var custValue = this.getCustomValuesFrom4D();
    var len = custValue.length;
    for (var i=0;i>len;i++) {
      this.setCellValue (realRowNumber, i+1, '総計<br>' + custValue[i].value);
    }
  };