【发布时间】：2021-04-29 04:57:42
【问题描述】：
我无法在 ag-grid 文档中找到有关服务器端行模型的导出数据的任何有用的详细信息。好像支持导出已经加载的数据。
我们是否可以通过 Excel 导出完整数据 我在用 银格 - 23.1.1 角 - 9.1.0
【问题讨论】：
标签： ag-grid
【发布时间】：2021-04-29 04:57:42
【问题描述】：
是的，AgGrid 仅导出加载在 Web 客户端上的数据。您将需要调用包含所有可能数据的请求（包含所有元素的单个页面），然后调用 exportAsExcel 方法。
这是一个延伸，因为在 web 客户端上导出超过 4000 行的 excel 是一个真正的痛苦，这将使您的浏览器在一段时间内完全无响应。
如果您正在寻找大量的数据表导出，您可以尝试以异步方式在服务器端进行导出，agGrid 在这里帮不了您那么多。
【讨论】：
-
如果有人感兴趣，现在我已经在下添加了一个隐藏的 ag-grid，我正在使用 ngIf 进行控制。然后使用 viewChild 在组件中获取网格实例。加载完整数据并将其设置在此网格中，然后调用 exportAsExcel。我没有对可见的服务器端分页 ag 网格做任何事情。
上面评论中的答案是这样的
function exportAllRowsAsExcel() {
var columnsHidden = [
{headerName: '<?php echo ENTERPRISE_CODE; ?>', field: 'code'},
{headerName: '<?php echo ENTERPRISE_NAME; ?>', field: 'name'},
{headerName: '<?php echo TAX_NO; ?>', field: 'tax_no'},
{headerName: '<?php echo Inditex; ?>', field: 'inditex',
cellRenderer: function(event) {
var inditex;
if(event.data.inditex == 0) {
inditex = '<?php echo ABSENT; ?>';
}
else if(event.data.inditex == 1) {
inditex = '<?php echo EXISTS; ?>';
}
return inditex;
},
valueFormatter: (data) => {
var inditex;
if(data.value == 0) {
inditex = '<?php echo ABSENT; ?>';
}
else if(data.value == 1) {
inditex = '<?php echo EXISTS; ?>';
}
return inditex;
},
},
{headerName: '<?php echo EcoVero; ?>', field: 'ecoVero',
cellRenderer: function(event) {
var ecoVero;
if(event.data.ecoVero == 0) {
ecoVero = '<?php echo ABSENT; ?>';
}
else if(event.data.ecoVero == 1) {
ecoVero = '<?php echo EXISTS; ?>';
}
return ecoVero;
},
valueFormatter: (data) => {
var ecoVero;
if(data.value == 0) {
ecoVero = '<?php echo ABSENT; ?>';
}
else if(data.value == 1) {
ecoVero = '<?php echo EXISTS; ?>';
}
return ecoVero;
},
},
{headerName: '<?php echo JoinLife; ?>', field: 'joinLife',
cellRenderer: function(event) {
var joinLife;
if(event.data.joinLife == 0) {
joinLife = '<?php echo ABSENT; ?>';
}
else if(event.data.joinLife == 1) {
joinLife = '<?php echo EXISTS; ?>';
}
return joinLife;
},
valueFormatter: (data) => {
var joinLife;
if(data.value == 0) {
joinLife = '<?php echo ABSENT; ?>';
}
else if(data.value == 1) {
joinLife = '<?php echo EXISTS; ?>';
}
return joinLife;
},
},
{headerName: '<?php echo BCI; ?>', field: 'bci',
cellRenderer: function(event) {
var bci;
if(event.data.bci == 0) {
bci = '<?php echo ABSENT; ?>';
}
else if(event.data.bci == 1) {
bci = '<?php echo EXISTS; ?>';
}
return bci;
},
valueFormatter: (data) => {
var bci;
if(data.value == 0) {
bci = '<?php echo ABSENT; ?>';
}
else if(data.value == 1) {
bci = '<?php echo EXISTS; ?>';
}
return bci;
},
},
{
headerName: '<?php echo CREATED_DATE; ?>', field: 'created_date',
valueFormatter: function(data) {
return ((data.value !== null && moment(data.value, 'YYYY-MM-DD',true).isValid()) && (data.value !== '0000-00-00')) ? moment(data.value).format('DD.MM.YYYY') : '';
},
cellRenderer: function (event) {
var created_date = new Date(event.data.created_date);
return moment(created_date).format('DD.MM.YYYY');
},
},
{headerName: '<?php echo UPDATED_DATE; ?>', field: 'updated_date',
valueFormatter: function(data) {
return ((data.value !== null && moment(data.value, 'YYYY-MM-DD',true).isValid()) && (data.value !== '0000-00-00')) ? moment(data.value).format('DD.MM.YYYY') : '';
},
cellRenderer: function(event) {
var updated_date = new Date(event.data.updated_date);
return moment(updated_date).format('DD.MM.YYYY');
},
},
];
var gridOptionsHidden = {
onGridReady: (e) => {
},
onDisplayedColumnsChanged: (e) => {
},
onColumnResized: (e) => {
},
onSortChanged: (e) => {
},
onRowDataChanged: function (params) {
setTimeout(() => {
gridOptions.api.exportDataAsExcel({
columnKeys: [
'code',
'name',
'tax_no',
'inditex',
'ecoVero',
'joinLife',
'bci',
'created_date',
'updated_date',
],
processCellCallback: myCellCallback,
})
}, 1000);
},
}
//myAgGrid is just a function that calls grid (new agGrid.Grid...)
App.myAgGrid(columnsHidden, gridOptionsHidden, {csrf_test_name: csrfTokenHash}, '/enterprises/enterprises_list_json', false, '#myGrid1');
}
辅助函数
function myCellCallback(params) {
if (params.column.colId === 'inditex' || params.column.colId === 'ecoVero' || params.column.colId === 'joinLife' || params.column.colId === 'bci') {
return (params.value > 0) ? '<?php echo EXISTS; ?>' : '<?php echo ABSENT; ?>';
}
else if (params.column.colId === 'created_date' || params.column.colId === 'updated_date') {
return moment(params.value).format('DD.MM.YYYY');
}
else {
return params.value;
}
}
不要忘记隐藏的 div
<div class="m-content" hidden>
<div class="row">
<div class="col-xl-12" id="refreshContent1">
<div id="myGrid1" class="ag-theme-balham" style="height: 100%;"></div>
</div>
</div>
</div>
经过测试，它适用于服务器端行模型。
【讨论】：