AngularJS ng-grid filter-format filterText

W chwili pisania tego tekstu nie ma podsumowania, jak skonstruować łańcuch 'filterText' w ogóle. Po zbadaniu siatki ng.kod js i dokonując pewnych domysłów odkryłem, że 'filterText' jest o wiele potężniejszy i bardziej wyrazisty niż sugeruje to obecna dokumentacja.

Przykładowa Konfiguracja

Aby skonfigurować odpowiedź, najpierw rozważ siatkę o następującej definicji, znajdującą się w pewnym kontrolerze:

  $scope.pricing_data = data['records'];

  $scope.gridOptions = { 
    data: 'pricing_data',
    columnDefs: [
      { field: 'ticker', displayName: 'Ticker' },
      { field: 'date',   displayName: 'Date'   },
      { field: 'close',  displayName: 'Close'  },
      { field: 'volume', displayName: 'Volume' }
    ],
    filterOptions: {filterText: '', useExternalFilter: false},
    showFilter: true
  };

Obiektem w data ['records'] może być jakiś obiekt json wysłany z zaplecza. Przykładowa tabela może wyglądać tak:

W obecnym stanie, filterText jest pusty, więc wszystkie rekordy są prezentowane.

Dolna marchewka w prawym górnym rogu siatki jest widoczna, ponieważ showFilter jest prawdą. Kliknięcie na marchewkę w dół pokazuje wejście, które jest powiązane ze zmienną 'filterText'. W tej dyskusji pokażę kilka wyników za pomocą tego rozwijanego menu, ale ogólnie można bezpośrednio przypisać do filterText w kodzie kontrolera. Lista rozwijana wygląda następująco to:

Przeszukaj wszystkie pola w siatce

Domyślnie filterText wykonuje Wyrażenie regularne dla każdej komórki w siatce. Wpisanie znaku " a "powoduje wybranie wszystkich rekordów, które mają znak" a " w dowolnym wpisie (lub kolumnie) tego rekordu. Wpisanie " ab "wybiera wszystkie rekordy, które mają sekwencję znaków" ab " w dowolnym wpisie tego rekordu. W zależności od twoich wymagań, takie zachowanie może być idealnie odpowiednie. Jednak w przypadku dużych zbiorów danych zazwyczaj chce się filtrować na kolumny, a nie całą siatkę ze względu na charakter danych (np. wybór cennika) oraz ze względu na wysoki koszt przeszukiwania całej siatki.

Szukaj Po Kolumnie

W celu wyszukania ciągu znaków lub wyrażenia regularnego tylko w jednej kolumnie, składnia tekstu filtrującego jest następująca:

filterText = '<displayName>:<literal>'

Na przykład,

Tutaj displayName ' Date '(nie używaj wartości pola, musisz użyć displayName) następuje dwukropek':', a następnie częściowy łańcuch znaków. Rezultatem jest to, że wybrano tylko trzy rekordy, te związane z 30 października.

filterText = '<displayName>:<literal 1>|<literal 2>|...'

Gdzie rura ' / ' oddziela każdy ciąg częściowy. Możesz łączyć się w łańcuchy, ile chcesz. Filtr multi-date może wyglądać następująco:

Oczywiście wybór jest lub w naturze. Mój przykład nie jest jednak świetny, ponieważ tickery i daty mają wspólne znaki. Więc możesz albo zaufaj mi, że przeszukiwana jest tylko kolumna daty, albo skonfiguruj własny przykład. (Lub, jeszcze lepiej, przeczytaj funkcję buildSearchConditions () w ng-grid, jest to dość jasne).

Wyszukiwanie wpisów w wielu kolumnach

Wyszukiwanie wielu kolumn wymaga tylko rozszerzenia składni wyszukiwania w kolumnie. Ta składnia to:

filterText = '<displayName 1>:<lit 1>[|<lit 2>|..];<displayName 2>:<lit a>[|<lit b>|..][;..]'

Operacyjnym elementem leksykalnym jest średnik";", który oddziela każdą kolumnę displayName.

Kontynuując to przykład, poszukajmy nyt lub nvda 30 października lub 31 października. wygląda to następująco:

Logicznie, filtr wyszukuje (wzdłuż znacznika dla nyt lub nvda) i (wraz z datą dla 10-30 lub 10-31).

Aktualizacje Siatki

Nie jestem zbyt zaznajomiony z aktualizacjami, które pochodzą z edycji komórek. Przypuszczam, że wynik jest taki sam.

Gdy sterownik angular-js, działający w połączeniu z backendem aktualizuje dane siatki, a następnie zaktualizowane dane są przepychane przez filtr. Jest to piękny wynik, w efekcie filtr utrzymuje się.

Znany Błąd -- Wyczyść

W momencie pisania tego tekstu pojawiła się ostatnia poprawka do znanego błędu, w którym wyczyszczenie tekstu filtrującego prawie lub rzeczywiście zawiesza przeglądarkę. Raport, który śledziłem jest ten: ng-grid issue 777 . Poprawka została połączona po ng-grid issue 848 . Zdecydowanie mogę potwierdź, że widzę słabą wydajność, gdy filtr zastosowany do dużego zbioru danych jest wyczyszczony. Nie testowałem jeszcze poprawki.

UPDATE

Ng-grid 3.0

Ng-grid 3.0 jest teraz na desce kreślarskiej. Jest tak wiele dobroci w ng-grid 2.0 już, ale jak każdy kod, który jest naprawdę nowy, kilka przepisań pomóc. Zachęcam programistów ng-grid do zachowania filtra funkcje już zawarte i być może rozszerzyć wydajność lub zakres.