我在项目中使用来自http://ui-grid.info/的网格。我创建了一个分层网格，效果很好，但是当我进行导出时，它只导出顶层网格中的数据。
这是设计使然，并且是网格的标准功能，因此我没有必要提供任何示例代码。http://ui-grid.info/docs/#/tutorial中的任何示例都可以。
有没有办法导出子网格（最好是主网格和子网格一起出现在网格中）？
问问题
1946 次
3 回答
4
可悲的是，答案是否定的。
正如您在此处看到的，该函数getData遍历所有行，然后遍历所有列，添加到extractedFields要提取的列数组中，并将这些列聚合到extractedRows.
这意味着除了gridOptions'中定义的数据之外，columnDef不会读取、转换和提取任何数据。
按照设计，子网格信息存储在任何行实体的属性中，subGridOptions但此属性永远不会在导出器功能内部访问。
这种行为背后的动机是可扩展网格功能仍处于 alpha 阶段，因此，在其他功能中支持这一点并不是一个引人注目的优先事项。
此外，如果我们想提供一个通用解决方案（例如，如果主网格和子网格中有不同数量的列，我什至认为它不符合标准，那么将子网格添加到 aCSV可能很难设计）CSV）。
也就是说，ui-grid 是一个开源项目，因此，如果您有一个可行的设计，请随时在项目 gitHub 页面上讨论它，或者更好的是，如果您可以设计一个可行的（并经过测试） ) 解决方案并创建拉取请求，甚至更好！
于 2015-12-09T09:47:24.180 回答
2
我设法让它工作，虽然如果我有时间我会做得比我通过实际创建代码分支并正确执行它所做的更好，但考虑到时间限制，我所拥有的是工作得很好。
仅供参考，这就是我最终让它做我想做的事情的方式：
在我的网格选项中，我关闭了网格菜单中的 CSV 导出选项（因为我只实现了对 PDF 的更改）。
我制作了 exporter.js 的副本，将其命名为 custom.exporter.js 并将我的引用更改为指向新文件。
在 custom.exporter.js 中，我复制了 getData 函数并将其命名为 getGridRows。getGridRows 与 getData 相同，只是它只返回行对象，而没有获取列的所有内容等等。现在，我正在对其进行编码以使用一组已知的列，所以我不需要所有这些。
我将 pdfExport 函数修改为如下：
pdfExport: function (grid, rowTypes, colTypes) {
var self = this;
var exportData = self.getGridRows(grid, rowTypes, colTypes);
var docContent = [];
$(exportData).each(function () {
docContent.push(
{
table: {
headerRows: 1,
widths: [70, 80, 150, 180],
body: [
[{ text: 'Job Raised', bold: true, fillColor: 'lightgray' }, { text: 'Job Number', bold: true, fillColor: 'lightgray' }, { text: 'Client', bold: true, fillColor: 'lightgray' }, { text: 'Job Title', bold: true, fillColor: 'lightgray' }],
[formattedDateTime(this.entity.JobDate,false), this.entity.JobNumber, this.entity.Client, this.entity.JobTitle],
]
}
});
var subGridContentBody = [];
subGridContentBody.push([{ text: 'Defect', bold: true, fillColor: 'lightgray' }, { text: 'Vendor', bold: true, fillColor: 'lightgray' }, { text: 'Status', bold: true, fillColor: 'lightgray' }, { text: 'Sign off', bold: true, fillColor: 'lightgray' }]);
$(this.entity.Defects).each(function () {
subGridContentBody.push([this.DefectName, this.DefectVendor, this.DefectStatus, '']);
});
docContent.push({
table: {
headerRows: 1,
widths: [159, 150, 50, 121],
body: subGridContentBody
}
});
docContent.push({ text: '', margin: 15 });
});
var docDefinition = {
content: docContent
}
if (self.isIE()) {
self.downloadPDF(grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
于 2015-12-31T00:49:09.133 回答
0
不，没有直接导出子网格的方法。相反，您可以创建自己的 json 数据来生成 csv 文件。请检查以下代码
function jsonToCsvConvertor(JSONData, reportTitle) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData,
csv = '',
row,
key1,
i,
subGridData;
//Set Report title in first row or line
csv += reportTitle + '\r\n\n';
row = '';
for (key1 in arrData[0]) {
if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
row += key1 + ',';
}
}
csv += row + '\r\n';
for (i = 0; i < arrData.length; i++) {
row = '';
subGridData = '';
for (key1 in arrData[i]) {
if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
row += '"' + arrData[i][key1] + '",';
}
else if(key1 === 'subGridOptions'){
//csv += row + '\r\n';
subGridData = writeSubGridData(arrData[i][key1].data);
}
}
csv += row + '\r\n';
csv = subGridData ? csv + subGridData + '\r\n' : csv;
}
if (csv === '') {
console.log('Invalid data');
}
return csv;
}
//Generates subgrid Data to exportable form
function writeSubGridData(subgridData){
var j,
key2,
csv = '',
row = '';
for (key2 in subgridData[0]){
if(key2 !== '$$hashKey'){
row += key2 + ',';
}
}
csv = row + '\r\n';
for (j=0; j < subgridData.length ; j++){
row = '';
for(key2 in subgridData[j]){
if(key2 !== '$$hashKey'){
row += '"' + subgridData[j][key2]+ '",';
}
}
csv += row + '\r\n';
}
return csv;
}
jsonToCsvConvertor(exportData, 'New-Report');
于 2018-05-14T06:28:19.703 回答