根据ui-grid中的cellTemplate格式化csv导出

Question

我在 ui-grid table 中有一列包含一个 JSON 对象。我在 cellTemplate 中解析并显示。列 "owner_details" 具有以下数据：

"owner_details": {
    "area_cost_center_manager": "avd",
    "area_bug_shepherd": "vdvd,vdvd",
    "area_owner": "vdvd,vdvd",
    "area_triage_owner": "vdvd,vdvd"
  }

为此我定义了列：

$scope.gridOptions.columnDefs = [
         {name: 'Edad', width: 150, pinnedLeft: true, displayName: "Area ", /*"cellTooltip": function(row, col){ return row.entity.area_description;}*/},
         {name: 'Nombres', width: 200, pinnedLeft: true, displayName:"Workload ", /*"cellTooltip": function(row, col){ return row.entity.workload_description;}*/},
         {name: 'owner_details', width: 300, pinnedLeft: true, cellTemplate: jsonTemplate,displayName: "Site ", visible: true},
         {name: 'test', width: 50, pinnedLeft: true, displayName: "Test ", visible: true},
         {name: 'verified', width: 50, pinnedLeft: true, displayName: "Verified? ", visible: false},
        ];

我创建了一个自定义模板来排列 Json 列的数据 owner_details

var jsonTemplate = '<div class="ngCellText ng-class="col.colIndex()"> Owner: {{COL_FIELD.area_cost_center_manager}} <br> TO: {{COL_FIELD.area_triage_owner}}</div></div>';

但是当我导出这个 table 时，owner_details table 中的数据明显中断，因为它不是字符串而是对象并且包含逗号。

所以我的问题是如何自定义这些数据，或者在 csv 导出之前进行预处理，以便我应该能够以与模板中几乎相同的格式导出。

这是我的朋友圈。 http://plnkr.co/edit/gAt1fp39dbgbbUCyBeJw?p=preview

如果您需要任何进一步的信息，请告诉我。

Answer 1

注意：虽然这可行，但原始提问者的答案更好，我建议您改用它。对于那些不想参与 API.

的人，我将把它留作替代方案

问题是对象 return 使用引号编辑，导致 CSV 解析不正确。

我对plunk做了两处修改：

第一次改动

列定义已更改，以将 owner_details 的每个部分添加为它自己的列项目。这样数据就可以在 CSV 中查看。如果您愿意，可以将这些设置为 visible: false。

 $scope.gridOptions.columnDefs = [
             {name: 'Edad', width: 150, pinnedLeft: true, displayName: "Area ", /*"cellTooltip": function(row, col){ return row.entity.area_description;}*/},
             {name: 'Nombres', width: 200, pinnedLeft: true, displayName:"Workload ", /*"cellTooltip": function(row, col){ return row.entity.workload_description;}*/},
             {
               field: 'owner_details_1',
               width: 300,
               pinnedLeft: true,
               cellTemplate: jsonTemplate,
               displayName: "Owner_Details",
               visible: true
             },
             {name: 'test', width: 50, pinnedLeft: true, displayName: "Test ", visible: true},
             {name: 'verified', width: 50, pinnedLeft: true, displayName: "Verified? ", visible: false},
             {name: 'owner_details.area_cost_center_manager', displayName: "area_cost_center_manager", visible: true},
       {name: 'owner_details.area_bug_shepherd', displayName: "area_bug_shepherd", visible: true},
       {name: 'owner_details.area_owner', displayName: "area_owner", visible: true},
       {name: 'owner_details.area_triage_owner', displayName: "area_triage_owner", visible: true},

            ];

第二次更改

我已将模板更改为使用 row.entity.{field} 而不是 COL_FIELD。（片段 1）这允许我们从不是它本身的网格字段中调用该字段。通过这样做，我们可以将自定义格式化字段命名为不同于需要数据的字段。这反过来意味着 CSV 解析将为该字段 return null，避免通常 returned 的对象（代码段 2）。

片段 1

var jsonTemplate = '<div class="ngCellText ng-class="col.colIndex()"> Owner: {{row.entity.owner_details.area_cost_center_manager}} <br> TO: {{row.entity.owner_details.area_triage_owner}}</div></div>';

代码段 2（注释字段：'owner_details_1'）。

         {
           field: 'owner_details_1',
           width: 300,
           pinnedLeft: true,
           cellTemplate: jsonTemplate,
           displayName: "Owner_Details",
           visible: true
         },

http://plnkr.co/edit/3reHj1E0vMweVhhRmH9O?p=preview

Answer 2

上面的答案作为解决方法效果很好，但我已经找到了一种非常有效和直接的方法来使用已经可用的 ui-grid api 来实现。因此发布我认为可能对其他人有帮助的答案。

ui-grid 已经有一个 api 可用于使用函数 exporterFieldCallback 我们可以在导出前格式化单元格值。

A function to call for each field before exporting it. Allows massaging of raw data into a display format, for example if you have applied filters to convert codes into decodes, or you require a specific date format in the exported content. The method is called once for each field exported, and provides the grid, the gridCol and the GridRow for you to use as context in massaging the data. Returns object you must return the massaged value ready for exporting

例如，如果我想在导出之前格式化单元格 "status"，我们可以这样做：

gridOptions.exporterFieldCallback = function ( grid, row, col, value ){
  if ( col.name === 'status' ){
    value = decodeStatus( value );
  }
  return value;
}

在我的例子中，我有一个列 "owner details"，它是一个对象，由于 JSON 对象中的逗号和特殊字符而无法正确导出。

所以点击导出的时候，我让ui-grid把数据格式化成可读的格式，然后导出。

详情请看我的plunkr

http://plnkr.co/edit/NHkmtRsZTy404iz3bxN0?p=preview

根据ui-grid中的cellTemplate格式化csv导出

Format csv export according to cellTemplate in ui-grid

angularjs

csv

angular-ui-grid

ui-grid