[英]Export data in ag-grid for cell renderer
我正在使用 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 Getters。
- 将不使用单元格格式化程序(改为使用 processCellCallback)。
如您所见,我已经在使用 valueGetter,但我总是在颜色列的导出数据中得到 undefined。
我该如何解决这个问题?
您可以在导出为 CSV 时使用processCellCallback来解决它。 通过这种方式,您可以准确地查看和控制将要导出的内容。
除了列定义,您还可以将其他参数传递给您的网格选项。
来自 ag-grid 文档: 导出的内容
将使用原始值,而不是单元渲染器的结果,这意味着:
- ...
- 不会使用单元格格式器(使用 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
函数。 现在(我知道这是大量信息)您拥有的选项之一是包含您的processCellCallback
函数,您可以在其中确保传递单元格值。 这样做非常有用,因为您可以根据需要操纵该值(例如,将 $ 符号添加到一个应该是钱的数字上)。
自定义按钮:
在您需要自定义按钮的情况下,没有什么可说的。 您唯一需要做的就是确保在触发 onclick 事件时调用 gridOptions.api 上的exportDataAsCsv
。
就像是:
onClick() {
gridOptions.api.exportDataAsCsv({
processCellCallback: ...
});
}
正如另一个答案所提到的,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;
}
聚会有点晚了,但我最近也遇到了同样的不便,因为四列需要 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;
}
我发现这些答案有点令人困惑。 希望能帮助下一位开发人员对此进行调查。 Vue JS 与 Vux 商店。
const actions = {
exportPurchaseOrderLines({ state: stateObject }) {
//set gridApi in state
stateObject.gridApi.exportDataAsCsv({
// nice file name
fileName: `${stateObject.order.number}-export`,
// select only selected rows
onlySelectedAllPages: true,
processCellCallback: (params) => {
// use the header name to determine which column to process
if (params.column.colDef.headerName === 'Linked bills') {
// if there are linked bills, return the bill numbers
if (params.node.data.bills.length > 0) {
return params.node.data.bills.map((bill) => bill.number).join(', ');
}
}
// return all the other cells without issues
return params.value;
},
});
},
// more actions .....
};
这就是我解决这个问题的方法:
当我调用导出函数时,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)
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.