Question

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

问题被重新创建@ 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数组中所以在构建网格之前make 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 grid使用cellTemplate时过滤和排序不起作用

2 个答案: