ui-gridのcellTemplateによるcsvエクスポートの書式

Question

私は、JSONオブジェクトを含むuiグリッドテーブルの列を持っています。これを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

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

のJSONデータを配置するためのカスタムテンプレートを作成しました

しかし、このテーブルをエクスポートすると、owner_detailsテーブルのデータは、オブジェクトではなく文字列ではなく、コンマが含まれているため、明らかに破損しています。

私の質問はどのように私はこのデータをカスタマイズすることができますか、私はテンプレートとほぼ同じ形式でエクスポートすることができるようにするためにCSVエクスポートの前に前処理を行います。

ここは私のplunkrです。 http://plnkr.co/edit/gAt1fp39dbgbbUCyBeJw?p=preview

詳細情報が必要な場合はお知らせください。

Answer 1

回避策としてうまく動作しますが、私はすでに利用可能なUIグリッドAPIを使用していることを達成するために、非常に効率的かつ直接的な方法を考え出しました。したがって、私が他人を助けるかもしれないと思う私の答えを掲示する。

ui-gridには、既に関数を使用して達成できるAPIがあります。exporterFieldCallbackエクスポートする前にセル値をフォーマットすることができます。

エクスポートする前に各フィールドを呼び出す関数です。フィルタを適用してコードをデコードに変換した場合や、エクスポートされたコンテンツに特定の日付フォーマットが必要な場合など、表示フォーマットへの生データのマッサージを可能にします。 このメソッドは、エクスポートされるフィールドごとに1回呼び出され、グリッド、gridCol、およびGridRowを提供し、データのマッサージ時にコンテキストとして使用します。 返し オブジェクト あなたは私はそれをエクスポートする前に、セル「状態」をフォーマットしたい場合は、我々は次のように行うことができます例えば

をエクスポートするための準備ができてマッサージ値を返す必要がありますで

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

私の場合、JSONオブジェクトのコンマや特殊文字のために正しくエクスポートされていなかったオブジェクトである "owner details"という列がありました。

エクスポートをクリックすると、データを読み込み可能な形式でフォーマットしてエクスポートするようにui-gridに依頼しました。

詳細については、私のplunkrをご覧ください。

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

Answer 2

ノート：これは機能しますが、元の質問者の回答はさらに優れています。代わりにその質問に取り組むことをお勧めします。私はこれを、APIに関与したくない人のための代替手段として残しておきます。

問題は、オブジェクトが引用符で返され、CSVの解析が間違っていることです。

私はplunkに2つの変更作られています

をまず変更

列定義は、それが自分の列項目だとしてowner_detailsの各セクションを追加するために変更されました。これは、データをCSVで表示できるようにするためです。これらは、に表示することができます。必要に応じて、偽を設定できます。

$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}, 

      ]; 

2番目の変更

私はrow.entityを使用するテンプレートを変更しました。{フィールド} COL_FIELD上。 （Snippet 1）これは、それ自身ではないグリッドフィールドからフィールドを呼び出すことができます。こうすることで、カスタム書式フィールドに、データが必要なフィールド以外の名前を付けることができます。これは、CSV解析がそのフィールドに対してヌルを返し、通常返されるオブジェクト（スニペット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