私は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を使用していますが、カラー列のエクスポートデータでは常に未定義になっています。
どうすればこれを解決できますか?
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: ...
});
}
これが私がこの問題を解決した方法です:
グリッドがロードされたときに、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)
を使用する理由です。
別の回答が言及しているように、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;
}