Angularjs ui-网格外复选框的网格多重过滤

Question

我正在使用 UIGrid。我希望能够根据复选框输入（在网格外）过滤影响级别列。多个复选框可以 selected.Any 帮助我如何实现这一点。

感谢您的帮助！

<body ng-controller="MainCtrl">
<input type="checkbox" style="inline">Pass
<input type="checkbox" style="inline">Fail
<input type="checkbox" style="inline">Not Evaluated

我添加了一个插件:http://plnkr.co/edit/u9OFv7UvWa9XdSCGNyDE?p=preview

我想根据选中的复选框过滤状态列，并且可以选中多个复选框。

Answer 1

UI Grid website 显示了从外部源过滤网格的示例。

我根据您的代码和上述 link 中使用的方法创建了 this example。这会根据 selected 复选框过滤网格。启动时，网格设置为显示所有数据。

我已将您的 HTML 修改如下：

<body ng-controller="MainCtrl">
    <input type="checkbox" style="inline" ng-model="pass" ng-click="updateSelection()">Pass
    <input type="checkbox" style="inline" ng-model="fail" ng-click="updateSelection()">Fail
    <input type="checkbox" style="inline" ng-model="notEval" ng-click="updateSelection()">Not Evaluated

    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</body>

这将复选框绑定到模型属性，并提供了一个在 select 框为 checked/unchecked 时调用的函数。 ui-grid 属性现在绑定到 gridOptions，因此我们可以在 AngularJS 代码中提供一些额外的参数。

AngularJS代码修改如下：

我。定义属性以将复选框绑定到（它们被初始化为 true 以便在加载时网格显示所有数据）：

// Bindings for checkboxes
$scope.pass = true;
$scope.fail = true;
$scope.notEval = true;

二。定义一个强制刷新网格的函数。只要复选框是 checked/unchecked:

就会调用此方法

// Function called when a checkbox is checked/unchecked
$scope.updateSelection = function() {
    // Refresh the grid (this forces the singleFilter function to be executed)
    $scope.gridApi.grid.refresh();
};

三。定义以下 gridOptions。 onRegisterApi 函数让我们获得对 gridApi 的引用（以便我们可以在上面的 updateSelection 函数中引用它），并且还定义了包含我们逻辑的 filterFunction 函数过滤网格：

$scope.gridOptions = {
    //enableFiltering: false,
    //
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      $scope.gridApi.grid.registerRowsProcessor( $scope.filterFunction, 200 );
    },
 };

四。然后我们可以定义一个 filterFunction，其中包含基于复选框过滤网格的逻辑 selected:

$scope.filterFunction = function( renderableRows ){
    // Build a list of valid values for the 'status' column based on the checkboxes that are checked
    var validValues = [];
    if ($scope.pass) {
        validValues.push('Pass');
    }
    if ($scope.fail) {
        validValues.push('Fail');
    }
    if ($scope.notEval) {
        validValues.push('Not Evaluated');
    }

    // Iterate over each grid row
    renderableRows.forEach( function( row ) {
        var match = false;
        // the 'status' column value for this row is one of the ones the user has selected based on the checkboxes
        if (validValues.indexOf(row.entity.status) > -1) {
            match = true;
        }
        // Hide any rows which have been filtered out
        if (!match){
            row.visible = false;
        }
    });
    // Return the rows to render in the grid (this will contain all rows, but only the ones where 'visible' = true will be rendered)
    return renderableRows;
};

Angularjs ui-网格外复选框的网格多重过滤

Angularjs ui-grid multiple filter from checkbox outside grid

angularjs

angular-filters

angular-ui-grid