2

JSON オブジェクトを含む ui-grid テーブルに列があります。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

1

注：これは機能しますが、元の質問者による回答はさらに優れているため、代わりにそれを使用することをお勧めします. API に関わりたくない人のための代替手段として、これを残しておきます。

問題は、オブジェクトが引用符付きで返され、CSV が正しく解析されないことです。

plunkに 2 つの変更を加えました。

最初の変更

列の定義が変更され、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},

            ];

2 回目の変更

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 に答える