2017-04-20 44 views
0

我爲我的UI網格創建了一個自定義過濾器,我使用ui-grid-exporter作爲pdf將其導出爲限制十進制數字到兩個地方的pdf,並且當我導出ui-grid,但它在導出器時不能在頁腳內工作。UI Grid AngularJS:將自定義過濾器應用到頁腳

頁腳 預計:32.34452436927346234523623462342345 需要:32.34

這裏是自定義過濾器。此過濾器在ui網格內工作。

app.filter('rentalFilter', function() { 
    return function (value, scope) { 
    // Only perform logic if the value is actually defined 
    if(typeof value != 'undefined') { 
     if(value == null || value == "") 
      value = 0; 
     value = value.toFixed(2); 
     if(value >= 0) { 
      var parts=value.toString().split("."); 
      return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); 
     } 
     else { 
      value = value * -1.00; 
      value = value.toFixed(2); 
      var parts=value.toString().split("."); 
      return "-" + parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); 
     } 
    } 
    }; 
}); 

這裏列宣佈對UI電網

$scope.columns = [ { 
    name : 'parm', 
    category : "column1", 
    width : '6%', 
    enableColumnMenu : false, 
    displayName : $scope.rollup 
}, { 
    name : 'mondayAwrv', 
    displayName : 'AWRV', 
    cellClass : 'green', 
    category : "MONDAY", 
    exporterPdfAlign: 'right', 
    width : '6%', 
    cellFilter : 'number : 2', 
    footerCellFilter : 'number : 2', 
    aggregationType : uiGridConstants.aggregationTypes.sum, 
    aggregationHideLabel : true, 
    enableColumnMenu : false 
}, { 
    name : 'mondayCredit', 
    cellClass : function(grid, row, col, rowRenderIndex, colRenderIndex) { 
     if (grid.getCellValue(row, col) < 0) 
      return 'negative'; 
     return 'positive' 
    }, 
    category : "MONDAY", 
    exporterPdfAlign: 'right', 
    width : '6%', 
    cellFilter : 'number : 2', 
    footerCellFilter : 'number : 2', 
    aggregationType : uiGridConstants.aggregationTypes.sum, 
    aggregationHideLabel : true, 
    enableColumnMenu : false 
}, { 
    name : 'mondayPer', 
    displayName : '%', 
    category : "MONDAY", 
    exporterPdfAlign: 'right', 
    width : '6%', 
    cellFilter : 'number : 2', 
    footerCellFilter : 'number : 2', 
    aggregationType : uiGridConstants.aggregationTypes.avg, 
    aggregationHideLabel : true, 
    enableColumnMenu : false 
}, 
..... 
//and so on for other days of the week 
]; 

導出功能導出UI格爲PDF。數字顯示有2位小數限制

$scope.export = function(){ 
     //$scope.gridApi.exporter.pdfExport(uiGridExporterConstants.ALL, uiGridExporterConstants.ALL); 
     var exportData = []; 
     var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : []; 
     angular.forEach($scope.gridApi.grid.rows, function(row) { 
     if (row.visible) { 
      var values = []; 
      angular.forEach(exportColumnHeaders, function(column) { 
      var value = row.entity[column.name]; 
      if (column.name == 'mondayAwrv' || column.name == 'mondayCredit' || column.name == 'mondayPer' || 
       column.name == 'tuesdayAwrv' || column.name == 'tuesdayCredit' || column.name == 'tuesdayPer' || 
       column.name == 'wednesdayAwrv' || column.name == 'wednesdayCredit' || column.name == 'wednesdayPer' || 
       column.name == 'thursdayAwrv' || column.name == 'thursdayCredit' || column.name == 'thursdayPer' || 
       column.name == 'fridayAwrv' || column.name == 'fridayCredit' || column.name == 'fridayPer') value = $filter('rentalFilter')(value); 


      values.push({ 
       value: value 
      }); 

      }); 
      exportData.push(values); 
     } 
     }); 

     var content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData); 

     pdfMake.createPdf(content).open(); 


    } 

我想同樣適用於getFooterValue功能

$scope.getFooterValue = function(i){   
     return $scope.gridApi.grid.columns[i].getAggregationValue(); 
//template 
    //[ '', {text: ($scope.getFooterValue(1)), alignment: 'right'}, {text: ($scope.getFooterValue(2)), alignment: 'right'}, 

     /* 
     var exportData = []; 
      var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : []; 
      angular.forEach($scope.gridApi.grid.rows, function(row) { 
      if (row.visible) { 
       var values = []; 
       angular.forEach(exportColumnHeaders, function(column) { 
       var value = row.entity[column.name]; 
       if (column.name == 'mondayAwrv' || column.name == 'mondayCredit' || column.name == 'mondayPer' || 
        column.name == 'tuesdayAwrv' || column.name == 'tuesdayCredit' || column.name == 'tuesdayPer' || 
        column.name == 'wednesdayAwrv' || column.name == 'wednesdayCredit' || column.name == 'wednesdayPer' || 
        column.name == 'thursdayAwrv' || column.name == 'thursdayCredit' || column.name == 'thursdayPer' || 
        column.name == 'fridayAwrv' || column.name == 'fridayCredit' || column.name == 'fridayPer') value = $filter('rentalFilter')(value); 


       values.push({ 
        value: value 
       }); 

       }); 
       exportData.push(values); 
      } 
      }); 

      var content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData); 

      content.pageMargins = [40, 80, 40, 60]; 

      //pdfMake.createPdf(content).open(); 
      return $scope.gridApi.grid.columns[i].getAggregationValue(); 
     */ 

    } 

這就是出口值頁腳。

$scope.gridOptions.exporterPdfFooter = { 
     margin: [10, 5, 20, 10],  
     table: { 

      widths: [ '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%',], 

      body: [ 
        [ '', {text: ($scope.getFooterValue(1)), alignment: 'right'}, {text: ($scope.getFooterValue(2)), alignment: 'right'}, {text: ($scope.getFooterValue(3)), alignment: 'right'}, {text: ($scope.getFooterValue(4)), alignment: 'right'}, {text: ($scope.getFooterValue(5)), alignment: 'right'}, {text: ($scope.getFooterValue(6)), alignment: 'right'} ], 

      ]   
     } 
    }; 

如何將過濾器應用到頁腳以限制2個小數點?
任何幫助,非常感謝。

回答

0

鋁我必須做的是在過濾器內exporterPdfFooter添加到主體

body: [ 
      [{text: $filter('netFilter')($scope.getFooterValue(1))} ], 

      ] 
0

AngularJS有一個built in filter用於過濾小數位數。

您可以簡單地在任何自定義過濾器後使用此過濾器。例如:

<span>{{myNumber | myCustomFilter | number:2}}</span> 
+0

的號碼被與主應用程序中的2號過濾器正確地示出,但是問題是當我導出內容以pdf格式。當我輸出ui-grid-footer時,這些數字並不反映pdf內部的變化。我相信這是我使用的$ scope.export中的主網格相同的技術,但我需要應用它不與列名稱,但與getFooterValue – Adrew

+0

我怎麼能這樣做是我的問題 – Adrew

相關問題