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 코드에 몇 가지 추가 매개 변수를 제공 할 수 있습니다.
I : 다음
AngularJS와 코드가 수정되었다. 확인란을 바인딩 할 속성을 정의하십시오 (그리드로드시 모든 데이터가 표시되도록 사실로 초기화됩니다).
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 기능 (우리는 위의 updateSelection 기능에 참조 할 수 있도록) 우리가 gridApi에 대한 참조를 얻을 수 있습니다, 또한 격자 필터링 우리의 논리를 포함 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;
};
당신이 몇 가지 코드를 공유하거나 당신이 달성하려고하는 것을 보여 plunkr시겠습니까을하고 무엇을 작동하지 않습니다 – Bhavjot