Применение фильтра ячеек в Ui 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
        ]
    }...
]

прикрепление щипчика здесь

Сетка данных

Заранее спасибо киран гопал


person kiran Gopal    schedule 08.01.2017    source источник


Ответы (1)


Не уверен, что вы пытаетесь с этим сделать, но следующее будет объединять «Тестовый фильтр» в конец каждой строки.

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";
  }
});
person JoJo    schedule 18.05.2018