調用單元格篩選器的Ng網格導出

Question

我正在使用ng網格，並且某些列應用了過濾器。然而，當我導出爲CSV現在顯示不帶過濾器的值： 記錄可能會喜歡這樣的JSON：

{"service_date":"2014-02-10T00:00:00.000Z", 
"service_code":"someJob3", 
"price":1234.56} 

但在網格中，顯示爲：

Service Date |Service Desc | Price 
------------------------------------- 
Feb 10,2014 |Some Job 3 | $1,234.56 

我當我得到一個提取物時，就好像應用了過濾器一樣，但唯一的csv插件似乎沒有調用單元格過濾器，只是以原始形式返回值。我怎樣才能調用過濾器？

Answer 1

我知道這個問題是幾個月大，但我正在尋找同樣的事情，並認爲我會記錄我如何解決問題。

附註：我看到有一個ng-grid-wysiwyg-export.js插件的插件文件夾，但我發現它的使用沒有例子或文件，並沒有花時間來弄明白，因爲......

我did發現在ng-grid插件文件夾中有一個playground.html文件，該文件夾中有一個CSV插件示例。它演示瞭如何使用columnOverrides功能，您可以通過opts參數傳遞到插件的構造函數：

$scope.myData = [ 
    {hasThing: false, obj: {a:5, b:6}, name: "Moroni", age: 50, ln: 'sdf'}, 
    {hasThing: true, obj: {a:6, b:7}, ln: "Tiasdfsdfnd", age: 43} 
]; 

var csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' + o.b; } } }; 

$scope.gridOptionsBig = { 
    data: 'myData', 
    plugins: [new ngGridCsvExportPlugin(csvOpts)], 
    showFooter: true 
}; 

所以對於上面的問題的例子，你可以定義你想要每一列控功能對應用濾鏡，就像這樣：

var csvOpts = { 
    columnOverrides: { 
     service_date: function(d) { return $filter('date')(d); }, 
     service_code: function(c) { return $filter('myCustomCamelCaseFilter')(c); }, 
     price: function(p) { return $filter('currency')(p); } 
    } 
}; 

雖然這是一些額外的工作，必須定義這些，而不是從columnDefs只是調用已定義cellFilter，這種做法確實讓你的靈活性，讓您的出口數據稍有不同一個什麼顯示在屏幕上......也許是一個更富有表現力的日期格式，等等。

Answer 2

我發現了一個與ui-grid（替換版本的ng-grid）一起工作的解決方案，它比插件簡單得多Matt Welch必須爲ng-grid 2.0開發的解決方法。

您可以在gridOptions中指定一個exporterFieldCallback，然後根據col.name執行任何您想要的操作。對於我的用例，我有用戶ID，我需要交叉引用數組索引。我已經建立了一個cellFilter爲表，但它顯然並沒有反映在導出CSV，直到我說，像這樣的exporterFieldCallback：

$scope.gridOptions = { 
    ... 

    exporterFieldCallback: function(grid, row, col, input) { 
     if(col.name == 'account_executive_id' || col.name == 'account_manager_id') { 
      return adminUsers.getUserName(input); 
     } else { 
      return input; 
     } 
    }, 
    ... 
} 

回調要求格，行，列，和輸入變量，然後你可以在裏面做任何事情來返回你需要導出的任何值。如果有「使用網格中顯示的內容」標誌，這將是很好的，但這仍然是一個非常簡單的解決方案，即使它看起來沒有記錄。

Answer 3

我爲此開發了一個基於exporterFieldCallback的解決方案。

我的想法是不要重複在columnDefs你已經有過濾器表達式，如：

{ 
    field: 'totalFileSize', 
    headerCellClass: $scope.highlightFilteredHeader, 
    cellFilter: "notAvailable:'N/A' | readableFileSize", 
    displayName: "Total size", 
    cellClass:"rightcell" 
    }, 

其中，當然，notAvailable和readableFileSize是由我定義，並定期通過使用這兩種自定義過濾器UI的網格。

exporterFieldCallback: function(grid, row, col, input) { 
    if (col.cellFilter!=undefined && col.cellFilter.length !=0) { 
    var filters = col.cellFilter.split('|'); 
    for(i =0; i<filters.length;i++) { 
     var pars = filters[i].match(/[^\:"']+|'([^']*)'|'([^']*)'+/g); 
     var filterName= pars[0].trim(); 
     var filterPar = null; 
     if (pars.length ==2) { 
     filterPar = pars[1].slice(1, -1); 
     input = $filter(filterName)(input,filterPar); 
     } else { 
     input = $filter(filterName)(input); 
     } 
    } 
    } 
    return input; 

} 

它很差，因爲我是一個Javascript dummy，它只適用於不接受任何參數或一個參數的過濾器;但可以肯定會有所改善，我當時正忙着。同樣在正則表達式中，最有可能存在一些冗餘

如果爲該列定義了cellFilter並以編程方式重新應用，那麼也需要這樣做。 使用這個單一的通用函數，我將所有ui-grids的所有列導出。

Answer 4

基於'angelodelia'的迴應。這是我的修改版本。 這將適用於多個參數的多個過濾器。

exporterFieldCallback: function (grid, row, col, input) { 
      if (col.cellFilter) { // check if any filter is applied on the column 
       var filters = col.cellFilter.split('|'); // get all the filters applied 
       angular.forEach(filters, function (filter) { 
        var filterName = filter.split(':')[0]; // fetch filter name 
        var filterParams = filter.split(':').splice(1); //fetch all the filter parameters 
        filterParams.unshift(input); // insert the input element to the filter parameters list 
        var filterFn = $filter(filterName); // filter function 
        // call the filter, with multiple filter parameters. 
        //'Apply' will call the function and pass the array elements as individual parameters to that function. 
        input = filterFn.apply(this, filterParams); 
       }) 
       return input; 
      } 
      else 
       return input; 
     } 

這個通用的功能將幫助，因爲它顯示在UI網格導出數據（應用濾波器後）。