我使用的是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格式导出网格时,我未定义颜色列,这是一个单元格渲染器,我搜索了一个解决方案,我在官方文档中找到了这个:
将使用原始值,而不是单元格渲染器的结果, 意思是:
- 不会使用Cell Renderers。
- 将使用Value Getters。
- 不会使用Cell Formatters(改为使用processCellCallback)。
正如您所看到的,我已经使用了valueGetter,但我总是在颜色列的导出数据中未定义。
我该如何解决这个问题?
答案 0 :(得分:1)
导出为CSV时,可以使用 processCellCallback 解决此问题。通过这种方式,您可以准确地查看和控制要导出的内容。
除了列定义之外,您还可以将其他参数传递给网格选项。
来自ag-grid文档:What gets exported
原始值(而不是单元格渲染器的结果)将被使用, 含义:
- ...
- 不使用单元格格式化程序(改为使用processCellCallback )。
因此,假设您将列定义包含在名为columnDefs
的变量中。现在,将其传递给您的gridOptions
。
const gridOptions = {
columnDefs: columnDefs,
}
后面的代码应该起作用。因此,现在您想处理上下文菜单上的CSV Export
的单击(如果可能,也可以使用自定义按钮来完成此操作)。
导出为CSV:
现在,您必须将提供的getContextMenuItems
函数添加到gridOptions
对象中。有关更多信息:Configuring the Context Menu
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
中进行的操作。在操作上,您需要从exportDataAsCsv
调用gridOptions.api
函数。现在(我知道这是大量信息),您需要选择的一个选项是包括processCellCallback
函数,在此函数中您可以确保传递单元格值。这样做非常有用,因为您可以根据需要进行操作(例如,在应该是钱的数字上加$号)。
自定义按钮:
在需要自定义按钮的情况下,没什么可说的。您唯一需要做的就是确保在触发onclick事件时调用gridOptions.api上的exportDataAsCsv
。
类似:
onClick() {
gridOptions.api.exportDataAsCsv({
processCellCallback: ...
});
}
答案 1 :(得分:0)
这就是我解决这个问题的方法:
当我调用导出函数时,在加载网格时,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""
,这就是我使用{的原因{1}}。
答案 2 :(得分:0)
正如另一个答案提到的那样,ag-grid文档特别声明“将不使用Cell Renderer”: 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;
}
答案 3 :(得分:0)
参加聚会很晚,但最近我也有同样的不便之处,因为有四列需要cellRenderer,所以缺少原始值,并且您根据文档知道这些值将不会使用。在我的示例中,我需要插入in_progress,complete,unanswered和needs_review的原始值
gridApi.exportDataAsExcel({
...
processCellCallback: (params) => processCells(params)
});
const processCells = (cell) => {
let cellVal = cell.value;
const {
in_progress,
complete,
unanswered,
needs_review
} = cell.node.data.percentageStatus; // raw data source
if(!cell.value){ // for the 4 cols this was always undefined
switch(cell.column.colId){
case "in_progress":
cellVal = in_progress;
break;
case "completed":
cellVal = complete;
break;
case "unanswered":
cellVal = unanswered;
break;
case "needs_review":
cellVal = needs_review;
break;
default:
cellVal = "n/a";
}
}
return cellVal;
}