Question

我正在使用UIGrid。我希望能够根据复选框输入（在网格外部）过滤影响级别列。可以选择多个复选框。有关如何实现此目的的任何帮助。

感谢您的帮助！

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

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

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

Answer 1

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

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

我修改了您的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>

这会将复选框绑定到模型属性，并提供在选中/取消选中选择框时调用的函数。 ui-grid属性现在绑定到gridOptions，因此我们可以在AngularJS代码中提供一些其他参数。

AngularJS代码已修改如下：

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

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

II。定义一个强制刷新网格的函数。只要选中/取消选中复选框，就会调用此方法：

// 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();
};

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

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

IV。然后我们可以定义一个filterFunction，其中包含根据所选复选框过滤网格的逻辑：

$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-grid多重过滤网格外的复选框

1 个答案: