igGridのデータをCSVに変換する

igGridからデータソースを取り出して、CSVに整形して出力する関数を書いてみました。

ブラウザが古いとmap関数で使っている「=>」が使えないかもしれません(IE11ではフィルタ関数を代わりに渡すことで使えました)。

igGridのExcelのサンプルにあるようにFileSaver.jsのsaveAs関数をつかえばダウンロードもできます。

サンプル関数

/**
 * igGridの表からデータを取り出し、CSVに整形して文字列として返す
 * @param {string} id - igGridを初期化する時に指定したtableタグのid
 * @param {string} separator - 各セルの区切り文字。省略可(省略すると,)
 * @param {string} newLine - 改行文字。省略可(省略すると\r\n)
 */
function exportGridToCsv(id, separator, newLine) {
    if (separator == null) separator = ',';
    if (newLine == null) newLine = '\r\n';
    // CSV1行目のヘッダ行を取得する
    var columns = $('#' + id).igGrid('option', 'columns');
    var headerText = columns.map(c => c.headerText)
                            .join(separator) + newLine;
    // CSV2行目以降の本文を取得する
    // igGridからデータをオブジェクト配列として取得する
    var data = $('#' + id).igGrid('dataSourceObject');
    var rowCount = data.length;
    var columnKeys = columns.map(c => c.key);
    var columnCount = columnKeys.length;
    // 各オブジェクト(行データ)を順にテキストに変換する
    var bodyText = '';
    for (var row = 0; row < rowCount; row++) { 
        bodyText += columnKeys.map(columnKey => '' + data[row][columnKey])
                              .join(separator) + newLine;
    }
    return headerText + bodyText;
}

使い方(tableのidがgridの場合)

区切り文字「,」改行文字「\r\n」でCSVにする場合

exportGridToCsv('grid')

区切り文字「\t」改行文字「\n」でTSVにする場合

exportGridToCsv('grid', "\t", "\n")

グリッドから列定義を取得する

var columns = $('#' + id).igGrid('option', 'columns');

この部分です。

「igGrid API」をキーワードにして検索できる以下のサイトがAPIドキュメントになっています。

https://jp.igniteui.com/help/api/2017.1/ui.iggrid

URLにバージョン番号が入っているので自分が使用しているバージョンと合っているか確認しましょう。

igGridのcolumnsオプションを取得しています。igGridの機能を呼ぶ場合、jQueryのセレクタ.igGrid(“機能名”)のような形を使います。

headerTextやkeyなどのプロパティを持つオブジェクトが取れます。igGrid初期化時に指定した値ですね。

上のサンプル関数では対応していませんが、hiddenの列はCSVには出さない仕様も考えられます。

グリッドから値を取得する

グリッドからデータを抽出するメソッドは以下のようにします。

var data = $('#' + id).igGrid('dataSourceObject');

igGridに指定したデータがオブジェクト配列で取得できます。

また、配列に格納した各オブジェクトのプロパティ名は、上で取得しておいた列定義のkeyの値です。data[3][“ProductName”]と指定すれば4行目のkey=ProductNameのセルの値がとれます。

私のプロジェクトでは、オブジェクト配列としてdataが取れました。データソースに配列を使っていたからかもしれません。

APIドキュメントを見ると、DataSourceはいろいろな拡張があるようです。

ソースの書き方によっては違う形式のデータが取れるかもしれませんので、使う前に開発者ツールなどで確認してください。