可以在 angular ui-grid 中导出子网格吗

Question

我在项目中使用 http://ui-grid.info/ 中的网格。我创建了一个分层网格，效果很好，但是当我进行导出时，它只导出顶级网格中的数据。

这是设计使然，并且是网格的标准功能，因此我没有必要放置任何示例代码。 http://ui-grid.info/docs/#/tutorial 中的任何示例都可以。

有没有办法导出子网格（最好同时导出主网格和子网格，因为它们出现在网格中）？

Answer 1

很遗憾，答案是否定的。

如您所见，here 函数 getData 遍历所有行，然后遍历所有列，将要提取的列添加到 extractedFields 的数组中，并聚合这些列extractedRows.

的数组

这意味着除了 gridOptions' columnDef 中定义的数据外，不会读取、转换和提取任何数据。

根据设计，子网格信息存储在任何行实体的 subGridOptions 的属性中，但此属性永远不会在导出器功能内部访问。

此行为背后的动机是可扩展网格功能仍处于 alpha 阶段，因此，在其他功能中支持此功能并不是一个令人信服的优先事项。

此外，如果我们想提供一个通用的解决方案（例如，我什至不认为它会合规），将子网格添加到 CSV 可能很难设计如果主网格和子网格中的列数不同，则为 CSV 标准）。

也就是说，ui-grid 是一个开源项目，因此，如果您有一个可行的设计，请随时在 project gitHub page 上就它展开讨论，或者，甚至更好的是，如果您可以设计一个有效（并经过测试）的解决方案并创建一个拉取请求，那就更好了！

Answer 2

我设法让它工作了，虽然如果我有时间的话，我会比我实际创建代码的一个分支并正确地完成它做得更好，但是考虑到时间限制，什么我有很好用。

仅供参考，这是我最终让它做我想做的事情的方法：

在我的网格选项中，我关闭了网格菜单中的 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();
              }
          }

Answer 3

不，没有直接导出子网格的方法。相反，您可以创建自己的 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');

可以在 angular ui-grid 中导出子网格吗

Can a subgrid be exported in angular ui-grid

angularjs

angular-ui-grid

hierarchical

subgrid

pdfmake