Angularjs ui-grid多重過濾器來自網格外的複選框

我正在使用UIGrid。我希望能夠根據複選框輸入（網格外）篩選影響級別列。可以選擇多個複選框。關於如何實現此目的的任何幫助。Angularjs ui-grid多重過濾器來自網格外的複選框

感謝您的幫助！

<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

我要根據選擇多個複選框的可以選中該複選框過濾的狀態欄。

來源

2016-11-06 Prar

能否請您分享一些代碼或plunkr展現你想實現什麼，什麼是不工作 – Bhavjot

UI Grid website顯示了從外部源過濾網格的示例。

我已根據您的代碼和上述鏈接中使用的方法創建了this example。這將根據所選的複選框對網格進行過濾。啓動時，網格設置爲顯示所有數據。

<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>

此綁定複選框模型屬性，並提供一個功能時檢查選擇框/未選中來電：

我如下修改您的HTML。 ui-grid屬性現在綁定到gridOptions，所以我們可以在AngularJS代碼中提供一些額外的參數。

AngularJS代碼已被修改如下：

i。定義將複選框綁定到的屬性（它們初始化爲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其中包含邏輯基於選中該複選框（ES）過濾格：

$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; 
};

來源

2016-11-08 12:24:48

Angularjs ui-grid多重過濾器來自網格外的複選框

回答

相關問題