Question

我在ui-grid表中有一个包含JSON对象的列。我在cellTemplate中解析并显示。专栏＆＃34; owner_details＆＃34;有以下数据：

"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表中的数据显然会中断，因为它不是String而是一个对象并且包含逗号。

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

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

如果您需要任何进一步的信息，请与我们联系。

Answer 1

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

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

在导出之前调用每个字段的函数。允许将原始数据按摩为显示格式，例如，如果已应用过滤器将代码转换为解码，或者在导出的内容中需要特定的日期格式。对于每个导出的字段，该方法被调用一次，并提供grid，gridCol和GridRow，供您在按摩数据时用作上下文。返回宾语您必须返回准备出口的按摩值

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

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

在我的情况下，我有一个列“所有者详细信息”，这是一个对象，由于JSON对象中的逗号和特殊字符而无法正确导出。

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

请查看我的plunkr了解更多详情。

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

Answer 2

注意：虽然这有效但原始提问者的答案更好，我建议您使用它。对于那些不想参与API的人，我会把它作为替代方案。

问题是该对象正在返回引号，导致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},

            ];

第二次更改

我已将模板更改为在COL_FIELD上使用row.entity。{field}。（Snippet 1）这允许我们从不是自身的网格字段中调用字段。通过这样做，我们可以将自定义格式化字段命名为除了需要数据的字段之外的其他字段。这反过来意味着CSV解析将为该字段返回null，从而避免通常返回的对象（Snippet 2）。

Snippet 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（注释字段：＆＃39; owner_details_1＆＃39;）。

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

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

根据ui-grid

2 个答案: