為單元格渲染器導出 ag-grid 中的數據

Question

我正在使用 ag-grid 並且我有一個列定義如下：

{
    headerName: "Color",
    valueGetter: function (params) {
        return JSON.parse(params.data.color).name;
    },
    field: 'color',
    cellRenderer: function (params) {
        if (angular.isDefined(params.data) && angular.isDefined(params.data.color)) {
            var color = JSON.parse(params.data.color);
            return '<div style="width: 50px; height: 18px; background-color:' + color.htmlValue + ';"></div>';
        }
    },
    suppressMenu: true,
    suppressSorting: true
}

當我以 CSV 格式導出網格時，顏色列未定義，這是一個單元格渲染器，我為此搜索了一個解決方案，並在官方文檔中找到了這個：

將使用原始值，而不是單元格渲染器的結果，這意味着：

• 將不使用單元格渲染器。
• 將使用 Value Getters。
• 將不使用單元格格式化程序（改為使用 processCellCallback）。

如您所見，我已經在使用 valueGetter，但我總是在顏色列的導出數據中得到 undefined。

我該如何解決這個問題？

Answer 1

您可以在導出為 CSV 時使用processCellCallback來解決它。 通過這種方式，您可以准確地查看和控制將要導出的內容。

除了列定義，您還可以將其他參數傳遞給您的網格選項。

來自 ag-grid 文檔： 導出的內容

• 將使用原始值，而不是單元渲染器的結果，這意味着：

  • ...
  • 不會使用單元格格式器（使用 processCellCallback 代替）。

因此，假設您在名為columnDefs的變量中有列定義。 現在你將它傳遞給你的gridOptions 。

const gridOptions = {
  columnDefs: columnDefs,
}

后一個代碼應該可以工作。 因此，現在您要處理單擊上下文菜單上的CSV Export （如果可能，您也可以使用自定義按鈕執行此操作）。

導出為 CSV：

現在您必須將提供的getContextMenuItems函數添加到gridOptions對象。 有關更多信息： 配置上下文菜單

const gridOptions = {
  columnDefs: columnDefs,
  getContextMenuItems() {
    return [
      {
        name: 'CSV Export',
        action: function(params) {
          gridOptions.api.exportDataAsCsv({
            processCellCallback: function(cell) {
              // Manipulate the value however you need.
              return cell.value;
            },
          });
        },
      },
    ];
  },
};

這個想法是獲取CSV Export並以編程方式添加您需要在action發生的事情。 在操作上，您需要從gridOptions.api調用exportDataAsCsv函數。 現在（我知道這是大量信息）您擁有的選項之一是包含您的processCellCallback函數，您可以在其中確保傳遞單元格值。 這樣做非常有用，因為您可以根據需要操縱該值（例如，將 $ 符號添加到一個應該是錢的數字上）。

自定義按鈕：

在您需要自定義按鈕的情況下，沒有什么可說的。 您唯一需要做的就是確保在觸發 onclick 事件時調用 gridOptions.api 上的exportDataAsCsv 。

就像是：

onClick() {
  gridOptions.api.exportDataAsCsv({
    processCellCallback: ...
  });
}

Answer 2

正如另一個答案所提到的，ag-grid 文檔特別指出“不會使用單元渲染器”： https : //www.ag-grid.com/javascript-grid-excel/#what-gets-exported

我做了一個從 processCellCallback 函數調用 cellRenderer 的解決方法，如下所示：

processCellCallback: function (cell) {
    var cellVal = cell.value;
    if(_.get(cell, 'column.colDef.cellRenderer')) {
        cellVal = cell.column.colDef.cellRenderer({value: cell.value});
    }
    return cellVal;
}      

Answer 3

聚會有點晚了，但我最近也遇到了同樣的不便，因為四列需要 cellRenderer 而缺少原始值，正如您所知，根據文檔，這些值不會被使用。 在我的示例中，我需要插入 in_progress、complete、unanswered 和 needs_review 的原始值

gridApi.exportDataAsExcel({
  ...
  processCellCallback: (params) => processCells(params)
});


const processCells = (cell) =>  {
    let cellVal = cell.value;
    const { 
      in_progress, 
      complete, 
      unanswered, 
      needs_review 
    } = cell.node.data.percentageStatus; // raw data source

    if(!cell.value){ // for the 4 cols this was always undefined
      switch(cell.column.colId){
        case "in_progress":
          cellVal = in_progress;
          break;
        case "completed":
          cellVal = complete;
          break;
        case "unanswered":
          cellVal = unanswered;
          break;
        case "needs_review":
          cellVal = needs_review;
          break;
        default:
          cellVal = "n/a";
      }
    }
    return cellVal;
  } 

Answer 4

我發現這些答案有點令人困惑。 希望能幫助下一位開發人員對此進行調查。 Vue JS 與 Vux 商店。

const actions = {
exportPurchaseOrderLines({ state: stateObject }) {
    //set gridApi in state
    stateObject.gridApi.exportDataAsCsv({
        // nice file name
        fileName: `${stateObject.order.number}-export`,
        // select only selected rows
        onlySelectedAllPages: true,
        processCellCallback: (params) => {
            // use the header name to determine which column to process
            if (params.column.colDef.headerName === 'Linked bills') {
                // if there are linked bills, return the bill numbers
                if (params.node.data.bills.length > 0) {
                    return params.node.data.bills.map((bill) => bill.number).join(', ');
                }
            }
            // return all the other cells without issues
            return params.value;
        },
    });
},
// more actions .....
};

Answer 5

這就是我解決這個問題的方法：

當我調用導出函數時，cellRenderer 函數中的 params arg 與加載網格時不同，當我們導出時，params arg 如下所示：

{export:true, value: "{...}"}

該value是字段鍵中的值，因此在 cellRenderer 函數中我必須這樣做：

if(angular.isDefined(params.export)){
    return JSON.parse(params.value.slice(1, -1)).name;
}

請注意，總是添加雙引號，這看起來很奇怪，所以當我們在字段中有一個字符串值時， params.value將如下所示： ""theStringValue"" ，這就是我使用params.value.slice(1, -1) 。