使用 UI 网格进行服务器端过滤

Posted

技术标签:

【中文标题】使用 UI 网格进行服务器端过滤【英文标题】:server side filtering with UI grid 【发布时间】:2016-08-12 02:17:53 【问题描述】:

ui grid 提供了一个默认过滤,在 gridOptions 中使用 enableFiltering: false 启用该过滤。我没有使用此默认过滤,而是将在过滤框中输入的文本用于多列,将过滤器发送到 serevr 并取回数据。我试过使用 filterOptions 但 $scope.$watch('filterOptions', function (newVal, oldVal)

        if (newVal !== oldVal) 
            $scope.getPagedDataAsync($scope.gridOptions.$gridScope.filterText);
        
    , true); 

永远不会被调用。任何帮助表示赞赏。

【问题讨论】:

【参考方案1】:

有几种不同的方法可以做到这一点。在网格选项中的 onRegisterApi 中,您可以这样做:

  onRegisterApi: function(gridApi) 

         gridApi.core.on.filterChanged($scope,
              function(rowEntity, colDef, newValue, oldValue) 
             // check which filter value changed and do something
             // to get the value from a filter in column X you can do 
                  gridApi.grid.columns[X].filters[0]
              
         );
  

您还可以在每个单元格上设置一个过滤器对象。也许收集您希望过滤的各个列,并在每个单元格上放置一个过滤器对象。每当更改时,您将拥有所需的所有值,并且您可以在调用来执行过滤的“条件”中创建一个函数。

   filter:  type: xxx, condition: $scope.myCustomFilter 

   $scope.myCustomFilter = function(searchTerm, callValue) 

       // check your various conditions here and return true/false
   

【讨论】:

以上是关于使用 UI 网格进行服务器端过滤的主要内容,如果未能解决你的问题,请参考以下文章

剑道网格服务器端过滤和不工作

Kendo UI - 网格分页(服务器端)

Kendo网格服务器端分组

具有服务器端分页/排序的 DevExtreme 数据网格不适用于过滤

kendo ui grid 完成服务器端分页和设置总数

MVC 中的 KENDO UI 网格:有没有办法在某些列上隐藏过滤器?