javascript - 具有 2 个条件的 NG-grid 过滤器

标签 javascript angularjs angular-ui-grid ng-grid

我需要根据过滤表

  1. 单列和
  2. 跨列比较。

我正在使用 ng-grid 来填充表格。它提供了基于单列的过滤功能。

对于跨列比较,我使用grid.refresh()函数。该函数调用 grid.registerRowsProcessor( $scope.columnComparionFilter, 200 ) 函数。我准备了columnComparionFilter函数,它根据过滤器返回renderableRows。下面是示例代码:

// function to filter two column based on condition
$scope.columnComparionFilter= function(renderableRows){
    // if filter option selection changed
    if($scope.change){
        if($scope.column1 == undefined)
            return renderableRows;
        if($scope.column2 == undefined)
            return renderableRows;
        if($scope.column1 == $scope.column2){
            console.log('columns for comparision should be different.')
            return renderableRows;
        }
        if($scope.selectedFilter.name == 'compare'){
            renderableRows.forEach( function( row ) {
                if(row.entity[$scope.column1.field] == row.entity[$scope.column2.field])
                    row.visible = true;
                else
                    row.visible = false;
            });
        }else if($scope.selectedFilter.name == 'distinct'){
            renderableRows.forEach( function( row ) {
                if(row.entity[$scope.column1.field] != row.entity[$scope.column2.field])
                    row.visible = true;
                else
                    row.visible = false;
            });
        }
    }
    return renderableRows;
};

两个过滤器单独工作都很好。 但当我尝试两者一起工作时。默认情况下,它仅基于单个过滤器进行过滤。它消除了跨柱过滤器。

谁能帮我解决这个问题吗?

最佳答案

实际上,grid.registerRowsProcessor()ng-grid单列过滤器使用的核心函数。因此,当我尝试使用相同的函数进行跨过滤时,它会导致同步问题,并且单列过滤器超出了我的自定义函数。

我使用了另一种方法来修改 ng-grid 数据。我已经使用 notifyDataChange() 函数解决了这个问题。在外部过滤器函数columnComparionFilter内,我正在根据过滤器准备数据子集,然后将gridOptions.data更改为子集数据。参见下面的代码:

// function to filter two column based on condition
$scope.columnComparionFilter= function(renderableRows){
    // if filter option selection changed
    if($scope.change){
        if($scope.column1 == undefined){
            console.log('Please select first column to compare.')
            return;
        }
        if($scope.column2 == undefined){
            console.log('Please select second column to compare.')
            return;
        }
        if($scope.column1 == $scope.column2){
            console.log('columns for comparision should be different.')
            return;
        }
        if($scope.selectedFilter.name == 'compare'){
            renderableRows.forEach( function( row ) {                
                if(row[$scope.column1.field] == row[$scope.column2.field])
                    filterData.push(row)
            });
        }else if($scope.selectedFilter.name == 'distinct'){
            renderableRows.forEach( function( row ) {
                if(row[$scope.column1.field] != row[$scope.column2.field])
                    filterData.push(row)
            });
        }
        $scope.gridOptions.data = angular.copy(filterData);
        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
        return;
    }
};

关于javascript - 具有 2 个条件的 NG-grid 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44904348/

相关文章:

JavaScript, fancybox 画廊

javascript - AJAX 和返回(异步相关)

javascript - 来自 JavaScript(或 Angular JS)的排队 API 消息

angularjs - 如何下载Angular UI网格?

javascript - 调用 onClick 方法之前的 ASP 警报文本

javascript - Angular,如何通过单击按钮隐藏表格行

javascript - ng-class 在 AngularJS 中不起作用

android - Firebase - 是否有 API 可以在 firebase 上运行清理脚本

javascript - 如何在 Angular ui-grid 中实现外部过滤器?

javascript - Angular UI Grid 附加选择列