web-dev-qa-db-ja.com

セルレンダラーのag-gridにデータをエクスポートする

私はag-gridを使用しており、次のような列定義があります。

{
    headerName: "Color",
    valueGetter: function (params) {
        return JSON.parse(params.data.color).name;
    },
    field: 'color',
    cellRenderer: function (params) {
        if (angular.isDefined(params.data) && angular.isDefined(params.data.color)) {
            var color = JSON.parse(params.data.color);
            return '<div style="width: 50px; height: 18px; background-color:' + color.htmlValue + ';"></div>';
        }
    },
    suppressMenu: true,
    suppressSorting: true
}

グリッドをCSV形式でエクスポートすると、セルレンダラーである色の列が未定義になり、これの解決策を検索したところ、公式のドキュメントで見つかりました。

セルレンダラーの結果ではなく、生の値が使用されます。

  • セルレンダラーは使用されません。
  • Value Getterが使用されます。
  • セルフォーマッタは使用されません（代わりにprocessCellCallbackを使用してください）。

ご覧のとおり、すでにvalueGetterを使用していますが、カラー列のエクスポートデータでは常に未定義になっています。

どうすればこれを解決できますか？

javascriptangularjsag-grid
11
Renaud is Not Bill Gates

CSVにエクスポートするときにprocessCellCallbackを使用して解決できます。このようにして、何がエクスポートされるかを正確に確認および制御できます。

列定義に加えて、グリッドオプションに他のパラメーターを渡すことができます。

Ag-grid docsから： 何がエクスポートされるか

  • セルレンダラーの結果ではなく、生の値が使用されます。

    • ...
    • セルフォーマッタは使用されません（代わりにprocessCellCallbackを使用してください）。

したがって、columnDefsという変数に列定義があるとします。次に、それをgridOptionsに渡します。

const gridOptions = {
  columnDefs: columnDefs,
}

後者のコードは機能するはずです。したがって、コンテキストメニューのCSV Exportのクリックを処理する必要があります（カスタムボタンを使用して行うこともできます）。

CSVにエクスポート：

次に、提供されているgetContextMenuItems関数をgridOptionsオブジェクトに追加する必要があります。詳細情報： コンテキストメニューの構成

const gridOptions = {
  columnDefs: columnDefs,
  getContextMenuItems() {
    return [
      {
        name: 'CSV Export',
        action: function(params) {
          gridOptions.api.exportDataAsCsv({
            processCellCallback: function(cell) {
              // Manipulate the value however you need.
              return cell.value;
            },
          });
        },
      },
    ];
  },
};

CSV Exportを取得し、プログラムでactionに必要なことを追加するという考え方です。アクションでは、gridOptions.apiからexportDataAsCsv関数を呼び出す必要があります。さて（これは大量の情報であることはわかっています）、オプションの1つは、セルの値を確実に渡すことができるprocessCellCallback関数を含めることです。必要に応じて値を操作できるため、そうすることは非常に便利です（たとえば、お金になるはずの数値に$記号を追加します）。

カスタムボタン：

カスタムボタンが必要な場合は、特に言うことはありません。必要なことは、onclickイベントが発生したときにgridOptions.apiでexportDataAsCsvを呼び出すことだけです。

何かのようなもの：

onClick() {
  gridOptions.api.exportDataAsCsv({
    processCellCallback: ...
  });
}
1
MauricioLeal

これが私がこの問題を解決した方法です：

グリッドがロードされたときに、cellRenderer関数のparams argがエクスポート関数を呼び出すと同じではありません。エクスポートすると、params argは次のようになります。

_{export:true, value: "{...}"}
_

valueはフィールドキーの値なので、cellRenderer関数では次のようにしなければなりません。

_if(angular.isDefined(params.export)){
    return JSON.parse(params.value.slice(1, -1)).name;
}
_

奇妙に見える二重引用符が常に追加されることに注意してください。フィールドに文字列値がある場合、_params.value_は次のようになります：_""theStringValue""_、それがparams.value.slice(1, -1)を使用する理由です。

0
Ichigo Kurosaki

別の回答が言及しているように、ag-gridのドキュメントには「セルレンダラーは使用されません」と明記されています。 https://www.ag-grid.com/javascript-grid-Excel/#what-gets-exported

次のように、processCellCallback関数からcellRendererを呼び出す回避策を実行しました。

processCellCallback: function (cell) {
    var cellVal = cell.value;
    if(_.get(cell, 'column.colDef.cellRenderer')) {
        cellVal = cell.column.colDef.cellRenderer({value: cell.value});
    }
    return cellVal;
}
0
Andrew