2

我在 ui-grid 表中有一个包含 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 导出之前进行预处理，以便我应该能够以与模板中几乎相同的格式导出。

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

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

4

2 回答 2

3

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

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

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

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

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

于 2016-05-27T20:09:53.807 回答
1

注意：虽然这可行，但原始提问者的答案甚至更好，我建议您改用它。对于那些不想参与 API 的人，我将把它留作替代方案。

问题是对象返回时带有引号，并导致 CSV 解析不正确。

我对plunk做了两个更改：

第一次改变

列定义已更改为将 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},

            ];

第二次改变

我已将模板更改为在 COL_FIELD 上使用 row.entity.{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

于 2016-05-24T13:21:50.417 回答