如何在角ui网格中进行多重滤波?

时间:2022-08-24 11:38:08

I need to filter a column with multiple conditions. Here's my code:

我需要过滤一个具有多个条件的列。这是我的代码:

filters : [ 
    {
        condition : uiGridConstants.filter.GREATER_THAN,
        placeholder : 'greater than'
    },{ 
        condition : uiGridConstants.filter.LESS_THAN,
        placeholder : 'less than'
    }
]

The above code will show "greater than" and "less than" the value of a particular column. I need to add 2 more conditions: something like "not between greater than and less than values".

上面的代码将显示“大于”和“小于”特定列的值。我还需要增加两个条件:“不大于或小于值”。

Here's the plunker: http://plnkr.co/edit/co8tfDrn2EOyC5thrMwg?p=preview

这是砰砰作响:http://plnkr.co/edit/co8tfDrn2EOyC5thrMwg?p=preview

2 个解决方案

#1


2  

The column filter can also take functions and the function signature is

列过滤器还可以接受函数,函数签名为

function(term,value,row,column){
}

as long as this function returns a true your row will be visible. The column filter function in your case will be this

只要这个函数返回一个true,就可以看到行。在您的例子中,列过滤器函数是这样的

 $scope.colFilter.condition = function(term,value, row, column){
      return (value>$scope.greater && value<$scope.less)
    }

Look at this plnkr for the greater and lesser functionality.

看看这个plnkr,它的功能越来越大,功能越来越小。

http://plnkr.co/edit/4HCwBdkOWGOl07XmxPKi?p=preview

http://plnkr.co/edit/4HCwBdkOWGOl07XmxPKi?p=preview

#2


0  

Are these conditions hardcoded, or are something you want the user to be able to edit? You can do this with custom filtering as shown in the UI-Grid docs: link

这些条件是硬编码的,还是您希望用户能够编辑的?您可以通过自定义过滤来实现这一点,如UI-Grid docs: link所示

And by writing a custom filter function- link

并通过编写自定义过滤器功能链接

#1


2  

The column filter can also take functions and the function signature is

列过滤器还可以接受函数,函数签名为

function(term,value,row,column){
}

as long as this function returns a true your row will be visible. The column filter function in your case will be this

只要这个函数返回一个true,就可以看到行。在您的例子中,列过滤器函数是这样的

 $scope.colFilter.condition = function(term,value, row, column){
      return (value>$scope.greater && value<$scope.less)
    }

Look at this plnkr for the greater and lesser functionality.

看看这个plnkr,它的功能越来越大,功能越来越小。

http://plnkr.co/edit/4HCwBdkOWGOl07XmxPKi?p=preview

http://plnkr.co/edit/4HCwBdkOWGOl07XmxPKi?p=preview

#2


0  

Are these conditions hardcoded, or are something you want the user to be able to edit? You can do this with custom filtering as shown in the UI-Grid docs: link

这些条件是硬编码的,还是您希望用户能够编辑的?您可以通过自定义过滤来实现这一点,如UI-Grid docs: link所示

And by writing a custom filter function- link

并通过编写自定义过滤器功能链接