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的副本，将其命名为custom.exporter.js并将我的引用更改为指向新文件。

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

我将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 find(array, key, value) {
    value = value.toLowerCase();
    return array.filter(o => o[key].toLowerCase().includes(value));
}

var array = [{ name: "Jeff Crawford", tel: "57285" }, { name: "Jeff Maier", tel: "52141" }, { name: "Tim Maier", tel: "73246" }]

console.log(find(array, 'name', 'Jeff'));

可以以角度ui-grid

3 个答案: