可以以角度ui网格导出子网格

I'm using the grid from http://ui-grid.info/ in a project. I've created a hierarchical grid, which works nicely, but when I do an export, it only exports the data from the top-level grid.

我正在项目中使用来自http://ui-grid.info/的网格。我已经创建了一个分层网格,它可以很好地工作,但是当我进行导出时,它只从顶层网格导出数据。

This is by design and is standard functionality for the grid, so there's no point in me putting up any example code. Any example from http://ui-grid.info/docs/#/tutorial will do.

这是设计的并且是网格的标准功能,所以我没有提出任何示例代码。来自http://ui-grid.info/docs/#/tutorial的任何例子都可以。

Is there a way to export the subgrid (preferably both the main grid AND the subgrid together as they appear in the grid)?

有没有办法导出子网格(最好是主网格和子网格一起出现在网格中)?

3 个解决方案

#1

Sadly the answer is no.

可悲的是,答案是否定的。

As you can see here the function getData iterates through all rows and then through all columns, adding to an array of extractedFields the columns to be extracted and aggregating those in an array of extractedRows.

正如您在此处所看到的,函数getData遍历所有行,然后遍历所有列,向extractFields数组添加要提取的列,并将这些列聚合在collectionsRows数组中。

This means that no data, other than what's defined in gridOptions' columnDef will be read, converted and extracted.

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

By design, subgrid information are stored inside a property of any row entity's subGridOptions but this property is never accessed inside of the exporter feature.

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

The motivation behind this behaviour is that expandable grid feature is still at an alpha stage, so, supporting this in other features is not a compelling priority.

这种行为背后的动机是可扩展网格功能仍处于alpha阶段,因此,在其他功能中支持这一功能并不是一个引人注目的优先事项。

Furthermore, adding subgrid to a CSV could be quite hard to design, if we wanted to provide a general solution (for example I don't even think it would be compliant to CSV standard if you had different number of columns in the main grid and in subgrids).

此外,如果我们想提供一般解决方案,那么将子网格添加到CSV可能很难设计(例如,如果主网格中的列数不同,我甚至认为它不符合CSV标准)在subgrids)。

That said, ui-grid is an open source project, so, if you have a working design in mind, feel free to open a discussion about it on the project gitHub page or, even better, if you can design a working (and tested) solution and create a pull request, even better!

也就是说,ui-grid是一个开源项目,因此,如果你有一个工作设计,请随意在项目gitHub页面上打开讨论,或者更好的是,如果你可以设计一个工作(并测试)解决方案并创建拉取请求,甚至更好!

#2

I managed to get it working, although if I had the time I would do it a bit better than what I've done by actually creating a branch of the code and doing it properly, but given time constraints, what I've got is working nicely.

我设法让它工作,虽然我有时间比实际创建代码分支并正确完成它所做的更好一些,但是考虑到时间限制,我得到的是工作得很好。

FYI, here's the way I ended up getting it to do what I wanted:

仅供参考,这就是我最终让它做我想做的事情:

In my grid options, I turned off the CSV export options in the grid menu (because I've only implemented the changes for PDF).

在我的网格选项中,我关闭了网格菜单中的CSV导出选项(因为我只实现了PDF的更改)。

I made a copy of exporter.js, named it custom.exporter.js and changed my reference to point to the new file.

我制作了exporter.js的副本,将其命名为custom.exporter.js并将我的引用更改为指向新文件。

In custom.exporter.js, I made a copy of the getData function and named it getGridRows. getGridRows is the same as getData, except it just returns the rows object without all the stuff that gets the columns and so on. For now, I'm coding it to work with a known set of columns, so I don't need all that.

在custom.exporter.js中,我制作了getData函数的副本并将其命名为getGridRows。 getGridRows与getData相同,只是它只返回rows对象而没有获取列的所有东西,依此类推。现在,我正在编写它以使用一组已知的列,所以我不需要这一切。

I modified the pdfExport function to be as follows:

我将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();
              }
          }

#3

No, there is no direct way to export subgrid. rather you can create youur own json data to generate csv file. Please check the below code

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