在Ui GRID中应用单元过滤器

时间:2017-01-08 10:35:55

标签: angularjs angular-ui-grid ng-grid

我必须创建以下网格。但我想应用cellFiler或rowFilter。我该怎么办?

$scope.columns = [{ field: 'Trade Version #110010' }];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    }...
]

附加截取器Here

Data Grid

提前致谢 Kiran gopal

1 个答案:

答案 0 :(得分:0)

不确定您正在尝试用它做什么,但以下内容将连接&#34;测试过滤器&#34;到每一行的末尾。

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'Trade Version #110010',
                      cellFilter: 'testFilter'}];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Modifier",
        "Trade Version #110010": "Some Trade Modifier"
    },
    {
        "property": "Type",
        "Trade Version #110010": "Some Product"
    },
    {
        "property": "RIC Code",
        "Trade Version #110010": 1313,
         "cellFilter": "RICFilter | format: 'tt/yy",
    },
    {
        "property": "What Changed",
        "Trade Version #110010": "Some info"
    },
    {
        "property": "Settlement Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Price",
        "Trade Version #110010": "345"
    },
    {
        "property": "Trade Reference #",
        "Trade Version #110010": 110010
    }
]
}]).filter('testFilter', function() {
  return function(value) {
    return value + " Test Filter";
  }
});