将文本添加到 Angular Ui-网格日期列

Question

我有一个 angular ui-grid，其中有一列日期，表示电子邮件发送给新用户的日期：

{ 
  name: "SentOn", 
  displayName: "Sent On", 
  cellFilter: "date:\"yyyy-MM-dd HH:mm\"" 
}

在多个后台进程完成后才会发送电子邮件，因此此日期可以为空。当日期为空时，单元格中不显示任何内容。

当日期为空时，是否有直接的方法来显示一些默认文本？

Answer 1

这里有两种方法可以达到你想要的效果。

您可以为单元格提供自定义模板来处理空日期情况。这可能也是更简单的选择。

{ 
  name: "SentOn", 
  displayName: "Sent On", 
  cellTemplate : "<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS || \"Not Sent\"}}</div>"
}

或者您可以创建一个自定义 cellFilter 来处理空日期。您可以扩展现有的日期过滤器来实现这一点。

var app = angular.module('app', ['ngTouch', 'ui.grid','ui.grid.edit']);
var grid;
app.filter('customDate', function($filter){    
    var standardDateFilterFn = $filter('date');
    return function(dateToFormat){
      if(!dateToFormat)
        return "Not Sent Yet";
     return standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss');
    }    
});
app.controller('MainCtrl', ['$scope', function ($scope) {

  var myData = [
    {
      id1:new Date(),id2:"2",id3:"3",id4:"4",id5:"5",
    }, {
      id1:null,id2:"2",id3:"3",id4:"4",id5:"5",
    },]

    var getTemplate = function()
    {

        return "<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS}}</div>";

    }

  var cellEditable = function($scope){
    if($scope.row.entity.oldId4===undefined)
      return false;
    return $scope.row.entity.oldId4!=$scope.row.entity.id4;
  }

  $scope.gridOptions = {
        enableFiltering: true,
         onRegisterApi: function(gridApi){
      grid = gridApi;
    },
    data: myData,
    columnDefs:[
        {
          field: 'id1',
          displayName: "id1",
          width: 200,
           cellTemplate: getTemplate(),
           cellFilter : "customDate:\"yyyy-MM-dd HH:mm\""
        },
        {
          field: 'id2',
          displayName: "id2",
          width: 100
        },{
          field: 'id3',
          displayName: "id3",
          width: 100
        },{
          field: 'id4',
          displayName: "id4",
          width: 100
        },{
          field: 'id5',
          displayName: "id5",
          width: 100
        },

    ],
}
 $scope.gridOptions.onRegisterApi = function(gridApi){
          //set gridApi on scope
          $scope.gridApi = gridApi;
          gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
            rowEntity.oldId4 = oldValue;
            $scope.$apply();
          });
        };

 $scope.test = function()
 {
   window.alert("Cell clicked")
 }
}]);

这是一个有效的 plnkr。 http://plnkr.co/edit/qHaRzkzxGEphuTMQ6oqG?p=preview

将文本添加到 Angular Ui-网格日期列

Adding text to an Angular Ui-Grid date column

angular-ui-grid