Filtrowanie wielu kolumn ngGrid

Używam modułu ngGrid dla AngularJS do wyświetlania niektórych stronicowanych danych. Chcę mieć możliwość wyszukiwania w wielu kolumnach, ale za pomocą wyszukiwania OR.Filtrowanie wielu kolumn ngGrid

Powiedzmy, że mam kolumnę z następującymi nagłówkami: Id, Nazwa, Opis. Podczas wyszukiwania chcę zwrócić wszystkie wiersze, w których identyfikator LUB nazwa lub opis zawierają wyszukiwane hasło.

$scope.pagingOptions = { 
     pageSizes: [20, 50, 100], 
     pageSize: 20, 
     totalServerItems: 0, 
     currentPage: 1 
    }; 

    $scope.gridOptions = 
     { 
      data: 'myData', 
      columnDefs: [ 
       { field: 'id', displayName: 'Id' }, 
       { field: 'name', displayName: 'Name' }, 
       { field: 'description', displayName: 'Description' }, 
       { displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}], 
      enablePaging: true, 
      showFooter: true, 
      showFilter: true, 
      pagingOptions: $scope.pagingOptions, 
      filterOptions: { 
       filterText: "", 
       useExternalFilter: false 
      } 
     };

Próbowałem przy użyciu domyślnego pola wyszukiwania, a także za pomocą zewnętrznego pola wprowadzania związany $ scope.filterText zdefiniować niestandardowy filtr, takich jak:

$scope.filterUpdated = function() { 
    $scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText; 
};

Jednak wydaje się to zrobić AND na wszystkich kolumnach. Czy można osiągnąć to, czego chcę, używając modułu ngGrid?

Dzięki z góry,

Chris

Źródło

2013-05-30 Chris Haines

Jestem nowy w AngularJS, ale przeszedłem przez wszystkie vidoes przez johnlindquist/eggheadio/www.egghead.io i myślę, że to [ngfilter] (http://www.egghead.io/video/bLohP9mh8ks) wideo odpowiedzieć pytanie. Zaczyna wyjaśniać, jak możesz użyć innego filtra wyszukiwania około 3:00; rozpoczęto od wyszukiwania we wszystkich kolumnach, a następnie przechodzenia do określonych kolumn. – Pixic

Być może ta dyskusja ci pomoże. [filtr siatki siatki na kolumnę] (https://groups.google.com/forum/#!topic/angular/aC24cVln4Vw) – darwinbaisa

Tak, możesz zaimplementować filtrowanie w kolumnach za pomocą opcji filtrowania wewnętrznego w konfiguracji siatki . Wezmę do tego plunarza z odpowiedzią – orif

Tak jest to możliwe do zrobienia OR filtr, ale po wyszukaniu w kodzie źródłowym ng-siatki nie widzę w jaki sposób można to zrobić za pomocą ich filterOptions.filterText. To może zrobić tylko filtrowanie AND.

Rozwiązaniem byłoby wtedy użyć filterOptions.useExternalFilter:true

Ja również znaleźć żadnych przykładów, ale po zabawy z tym na trochę, mam przekonanie, że filtr jest rzeczywiście wykonaną przez ponowne tworzenie gridOptions.data obiekt | tablica. To jedyna wada tego filtra:.

Plunker code is here

Więc w zasadzie kod wyglądałby następująco index.html:

<body ng-controller="MyCtrl"> 
    <strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/> 
    </br> 
    OR 
    </br> 
    <strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/> 
    </br> 
    <button ng-click="activateFilter()">Run Filter</button> 
    <br/> 
    <br/> 
    <div class="gridStyle" ng-grid="gridOptions"></div> 
</body>

iw swoim controller.js:

app.controller('MyCtrl', function($scope) { 

$scope.filterOptions = { 
    filterText: '', 
    useExternalFilter: true 
}; 

$scope.activateFilter = function() { 
    var name = $scope.filterName || null; 
    var age = ($scope.filterAge) ? $scope.filterAge.toString() : null; 
    if (!name && !age) name=''; 

    $scope.myData = angular.copy($scope.originalDataSet, []); 
    $scope.myData = $scope.myData.filter(function(item) { 
    return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1); 
    }); 
}; 

$scope.originalDataSet = [{name: "Moroni", age: 50}, 
       {name: "Tiancum", age: 43}, 
       {name: "Jacob", age: 27}, 
       {name: "Nephi", age: 29}, 
       {name: "Enos", age: 34}]; 

$scope.myData = angular.copy($scope.originalDataSet, []); 

$scope.gridOptions = { 
    data: 'myData', 
    filterOptions: $scope.filterOptions 
}; 
});

To właśnie podstawowe filtrowanie (np se regex i/lub konwertuj na małe litery dla lepszego dopasowania). Zwróć też uwagę, że jeśli zarówno nazwa, jak i wiek są puste, ustawiam nazwę na "", a następnie każdy element zwróci wartość true w filtrze (co spowoduje powrót całego zestawu danych).

Ta opcja jest o wiele lepiej nadaje się do dynamicznegozbiorze (odczytu - serwer karmione), ale działa tak samo dobrze, ale replikacji oryginalnego zestawu danych i stosując filtry na nim.

Źródło

2013-08-24 17:19:59

+1, pracował dla mnie! –

Filtrowanie wielu kolumn ngGrid

Odpowiedz

Powiązane problemy