用户界面网格中基于cellTemplate的csv导出格式

Question

我在ui网格表中有一个列，其中包含一个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},
        ];

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

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>';

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

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

这是我的柱塞。http://plnkr.co/edit/gAt1fp39dbgbbUCyBeJw?p=preview

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

Answer 1

上面的答案和周围的工作一样有效，但是我已经找到了一种非常有效和直接的方法来使用已经可用的ui网格api来实现这个目标。因此，张贴我的答案，我认为可以帮助其他人。

ui-grid已经有了一个api来实现这一点，使用函数exporterFieldCallback，我们可以在导出之前格式化一个单元格值。

在导出每个字段之前调用它的函数。允许将原始数据转换为显示格式，例如，如果已应用筛选器将代码转换为解码，或者需要导出内容中的特定日期格式。对每个导出的字段调用一次该方法，并为您提供网格、gridCol和GridRow，以便在传递数据时用作上下文。返回对象，则必须返回准备导出的按值。

例如，如果我想在导出前格式化单元格“状态”，我们可以这样做：

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

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

因此，当我单击导出时，我要求ui网格以可读的格式格式化数据，然后导出。

更多细节，请看我的柱塞。

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

Answer 2

Note：虽然这样做有效，但最初的提问者的回答甚至更好，我建议您使用这个方法。对于那些不想参与API的人，我将把它作为一个替代方案。

问题是对象正在返回引号，并导致CSV解析错误。

我对扑通做了两个修改

First change

列定义已更改为将owner_details的每个部分添加为它自己的列项。这样，数据就可以在CSV中查看。这些可以设置为可见:如果您愿意的话，为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} over COL_FIELD。(代码片段1)这允许我们从一个非本身的网格字段调用该字段。通过这样做，我们可以将自定义格式化字段命名为需要数据的字段以外的其他字段。这反过来意味着CSV解析将返回该字段的null，从而避免通常返回的对象(代码段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