ui 使用 cellTemplate 时网格过滤器和排序不起作用

Question

我正在使用 ui.grid，其中某些列填充有 cellTemplate。它正确填充了值，但排序和过滤不起作用。我需要对 sorting/filtering 逻辑做任何事情吗？

问题已在 Plnkr http://plnkr.co/edit/JscrG3EJiTlnVa0t9DjH 重新创建，Age 和 Balance 列的排序和过滤均无效。

 this.grdColDefs = [
            {
                name: 'Age',
                width: 90,
                cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.calcAge(row.entity)}}</div>',
                headerCellClass: 'my-cell-header',
            }
        ];

Answer 1

问题在于为单元格模板制作数据我将与您分享两支代码笔，一支有工作过滤器，一支没有工作过滤器，并将尝试解释为什么在一个地方工作和为什么在其他地方不工作的区别

当我们按照您的情况制作这样的单元格模板时

 cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.calcAge(row.entity)}}</div>',

在这种情况下，过滤器将不起作用，因为网格中显示的内容与 row.entity

中实际显示的内容不同

看看你的问题陈述，我模拟了一个过滤器不起作用的示例网格 http://codepen.io/vkvicky-vasudev/pen/zKmVVO

如果我们想让我们的网格使用这个实现仍然过滤器应该工作，那么我们可以像这样更改过滤器逻辑

 $scope.singleFilter = function( renderableRows ){
 var matcher = new RegExp($scope.filterValue);
 renderableRows.forEach( function( row ) {
  var match = false;
  ['name','age'].forEach(function( field ){
    if ( row.entity[field].match(matcher) ){
      match = true;
    }
    if(field =='age'){
     //this is new if block to handle the case for filtering not working
       var currData =$scope.calcAge(row.entity)
       if (currData.match(matcher) ){
      match = true;
    }
       }
  });
  if ( !match ){
    row.visible = false;
  }
});
return renderableRows;
 };

解决这个问题

我所做的是你想要在网格中显示的任何内容，相同的数据应该出现在你的 gridOptions.data 数组中，所以在构建网格之前，根据你的需要制作 gridOptions.data 这里是过滤器正在工作的工作演示 http://codepen.io/vkvicky-vasudev/pen/rrqgzy

现在请观察两种情况的区别

新的单元格模板是这个

 cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.age}}</div>',
            headerCellClass: 'my-cell-header'

在这种情况下，网格中可见的内容与我们在 gridOptions.data

中的数据相同

我试图理解您的问题并以最好的方式解释它，即使您有任何问题也可以随时提出，我已经对自定义过滤器进行了类似的更改，我们可以进行自定义排序

Answer 2

当我使用 field 指向模型时问题已解决。

ui 使用 cellTemplate 时网格过滤器和排序不起作用

ui grid Filter and sorting not working when cellTemplate used

angularjs

filter

ui-grid