使用 cellTemplate 时，ui grid 过滤器和排序不起作用

Question

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

问题被重新创建@Plnkr http://plnkr.co/edit/JscrG3EJiTlnVa0t9DjH，年龄和平衡列的排序和过滤都不起作用。

 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

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

Answer 2

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

当我们像你一样制作这样的单元格模板时

 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 中的数据相同

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