UI 网格 AngularJS：将自定义过滤器应用于页脚

Question

我为我的 ui-grid 创建了一个自定义过滤器，我正在使用 ui-grid-exporter 将小数限制为两位，并且在我导出时它可以工作ui-grid 但是当它是导出器时它在页脚中不起作用。

页脚预期：32.34452436927346234523623462342345 需要：32.34

这是自定义过滤器。此过滤器在 ui-grid.

中工作

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-grid

声明了列

$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-grid 导出为 pdf。数字显示为小数点后两位限制

$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 位小数？
非常感谢任何帮助。

Answer 1

AngularJS 有一个 built in filter 用于按小数位过滤数字。

您可以简单地在任何自定义过滤器之后通过管道传输此过滤器。示例：

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

Answer 2

我所要做的就是将过滤器添加到 exporterPdfFooter 中的正文

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

            ]

UI 网格 AngularJS：将自定义过滤器应用于页脚

UI Grid AngularJS: Apply a custom filter to a footer

javascript

pdf

angularjs

angular-ui-grid