可以在 angular ui-grid 中导出子网格吗
Can a subgrid be exported in angular ui-grid
我在项目中使用 http://ui-grid.info/ 中的网格。我创建了一个分层网格,效果很好,但是当我进行导出时,它只导出顶级网格中的数据。
这是设计使然,并且是网格的标准功能,因此我没有必要放置任何示例代码。 http://ui-grid.info/docs/#/tutorial 中的任何示例都可以。
有没有办法导出子网格(最好同时导出主网格和子网格,因为它们出现在网格中)?
很遗憾,答案是否定的。
如您所见,here 函数 getData
遍历所有行,然后遍历所有列,将要提取的列添加到 extractedFields
的数组中,并聚合这些列extractedRows
.
的数组
这意味着除了 gridOptions
' columnDef
中定义的数据外,不会读取、转换和提取任何数据。
根据设计,子网格信息存储在任何行实体的 subGridOptions
的 属性 中,但此 属性 永远不会在导出器功能内部访问。
此行为背后的动机是可扩展网格功能仍处于 alpha 阶段,因此,在其他功能中支持此功能并不是一个令人信服的优先事项。
此外,如果我们想提供一个通用的解决方案(例如,我什至不认为它会合规),将子网格添加到 CSV
可能很难设计如果主网格和子网格中的列数不同,则为 CSV
标准)。
也就是说,ui-grid 是一个开源项目,因此,如果您有一个可行的设计,请随时在 project gitHub page 上就它展开讨论,或者,甚至更好的是,如果您可以设计一个有效(并经过测试)的解决方案并创建一个拉取请求,那就更好了!
我设法让它工作了,虽然如果我有时间的话,我会比我实际创建代码的一个分支并正确地完成它做得更好,但是考虑到时间限制,什么我有很好用。
仅供参考,这是我最终让它做我想做的事情的方法:
在我的网格选项中,我关闭了网格菜单中的 CSV 导出选项(因为我只对 PDF 实施了更改)。
我复制了 exporter.js,将其命名为自定义。exporter.js 并更改了我的引用以指向新文件。
在 custom.exporter.js 中,我复制了 getData 函数并将其命名为 getGridRows。 getGridRows 与 getData 相同,只是它只是 returns 行对象,没有获取列等的所有内容。现在,我正在对其进行编码以使用一组已知的列,因此我不需要所有这些。
我修改了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();
}
}
不,没有直接导出子网格的方法。相反,您可以创建自己的 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');
我在项目中使用 http://ui-grid.info/ 中的网格。我创建了一个分层网格,效果很好,但是当我进行导出时,它只导出顶级网格中的数据。
这是设计使然,并且是网格的标准功能,因此我没有必要放置任何示例代码。 http://ui-grid.info/docs/#/tutorial 中的任何示例都可以。
有没有办法导出子网格(最好同时导出主网格和子网格,因为它们出现在网格中)?
很遗憾,答案是否定的。
如您所见,here 函数 getData
遍历所有行,然后遍历所有列,将要提取的列添加到 extractedFields
的数组中,并聚合这些列extractedRows
.
这意味着除了 gridOptions
' columnDef
中定义的数据外,不会读取、转换和提取任何数据。
根据设计,子网格信息存储在任何行实体的 subGridOptions
的 属性 中,但此 属性 永远不会在导出器功能内部访问。
此行为背后的动机是可扩展网格功能仍处于 alpha 阶段,因此,在其他功能中支持此功能并不是一个令人信服的优先事项。
此外,如果我们想提供一个通用的解决方案(例如,我什至不认为它会合规),将子网格添加到 CSV
可能很难设计如果主网格和子网格中的列数不同,则为 CSV
标准)。
也就是说,ui-grid 是一个开源项目,因此,如果您有一个可行的设计,请随时在 project gitHub page 上就它展开讨论,或者,甚至更好的是,如果您可以设计一个有效(并经过测试)的解决方案并创建一个拉取请求,那就更好了!
我设法让它工作了,虽然如果我有时间的话,我会比我实际创建代码的一个分支并正确地完成它做得更好,但是考虑到时间限制,什么我有很好用。
仅供参考,这是我最终让它做我想做的事情的方法:
在我的网格选项中,我关闭了网格菜单中的 CSV 导出选项(因为我只对 PDF 实施了更改)。
我复制了 exporter.js,将其命名为自定义。exporter.js 并更改了我的引用以指向新文件。
在 custom.exporter.js 中,我复制了 getData 函数并将其命名为 getGridRows。 getGridRows 与 getData 相同,只是它只是 returns 行对象,没有获取列等的所有内容。现在,我正在对其进行编码以使用一组已知的列,因此我不需要所有这些。
我修改了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();
}
}
不,没有直接导出子网格的方法。相反,您可以创建自己的 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');