Rozszerzenie filtru sterującego - rozszerzenie tabeli wyboru wyboru z pełną listą opcji

Question

Używam tabeli ładowania początkowego do pracy z danymi z mojej bazy danych.

Używam funkcji stronicowania i wysyłam tylko liczbę wierszy żądanych przez użytkownika przy użyciu opcji ograniczenia i przesunięcia.

Używam również rozszerzenia kontroli tabeli, aby umożliwić łatwe filtrowanie wyników. Jednak gdy używam formantu wyboru do filtrowania z filtrem danych = "wybierz", wpisy są tylko tymi, które zostały zwrócone w tym zestawie wyników.

Po zastosowaniu innych filtrów lista będzie rosnąć. Chciałbym użyć interfejsu API i wstępnie załadować listę wszystkich możliwych elementów z serwera dla tej listy, aby umożliwić filtrowanie za pomocą tych opcji.

Chociaż mogę przesłać wyniki z każdym przefiltrowanym zestawem wyników, być może w oddzielnym elemencie JSON, najlepiej byłoby załadować tę listę po załadowaniu samej kontrolki, ponieważ nie muszę ciągle wysyłać ten zestaw danych do kontroli z każdym filtrem.

Czy to możliwe? Czy mogę użyć interfejsu API do wstępnego załadowania tej listy za pomocą zestawu wartości?

Jest problem z githubem, który wydaje się opisywać podobny problem z tym, co mam https://github.com/wenzhixin/bootstrap-table/issues/904 i notatkę dotyczącą łaty, ale nie jestem pewien, jak to zaimplementować.

Używam bootstrap 3.3.4 z maxcdn.bootstrapcdn.com i używam bootstrap-tabela 1.8.1 poprzez cdnjs.cloudflare.com

Edit: mam zorientowaliśmy się po użyciu FireBug do kroku przez kod po linii, aby dowiedzieć się, czy mógłbym to zrobić.

Dostępne są dwie opcje dostarczania danych do filtra. Dodaj atrybut danych-filtr danych do pliku. Możesz użyć opcji "var" lub "url", a następnie podkreślenia (lub jakiegoś innego znaku, który zostanie odrzucony), a następnie w przypadku "var" przekazać nazwę obiektu, moja wygląda jak ten filtr danych-danych = "var_OnlineValues" i używa mojego obiektu var OnlineValues ​​= {"": "", "Uruchomiony": "Uruchomiony", "Wysłano": "Wysłano"}. Też mam pewne dane na serwerze, które wracam jako JSON. data-filter-data = "url_filename.php" a zwracany obiekt to para klucz/wartość.

Mam nadzieję, że to pomoże.

Answer 1

Użycie Dodaj atrybut data-filter-data do kolumny.

Przykład:

<script> 
var payment_methods = { 
    "PP": "PayPal - PP", 
    "CC": "PayPal - CC" 
}; 
</script> 

<th data-field="payment_method" data-sortable="true" data-filter-control="select" data-filter-data="var:payment_methods">Payment Method</th> 

Nie ma żadnego dokumentu dla opcji filterData, więc musiałem odczytać kodu. Zacytowałem odpowiednią część poniżej. Istnieje substring(0,3), a prawidłową wartością jest url lub var. Następny znak jest ignorowany.

Jeśli typ to url, wywołuje wywołanie ajax, aby zapełnić JSON odpowiedzi w opcjach wyboru. Struktura jest prosta {klucz: wartość}.

Jeśli typ to var, wyszukuje on window[filterDataSource], która jest zmienną globalną określoną przez opcję. Struktura danych to prosty obiekt {key: value}.

if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') { 
     var filterDataType = column.filterData.substring(0, 3); 
     var filterDataSource = column.filterData.substring(4, column.filterData.length); 
     var selectControl = $('.' + column.field); 
     addOptionToSelectControl(selectControl, '', ''); 

     switch (filterDataType) { 
      case 'url': 
       $.ajax({ 
        url: filterDataSource, 
        dataType: 'json', 
        success: function (data) { 
         $.each(data, function (key, value) { 
          addOptionToSelectControl(selectControl, key, value); 
         }); 
        } 
       }); 
       break; 
      case 'var': 
       var variableValues = window[filterDataSource]; 
       for (var key in variableValues) { 
        addOptionToSelectControl(selectControl, key, variableValues[key]); 
       } 
       break; 
     } 
    } 

Answer 2

Nie trzeba modyfikować tabeli ładowania początkowego, aby to działało. Istnieje możliwość ustawienia wartości domyślnych dla wyboru rozwijanego przy użyciu właściwości kolumn. spróbuj dodać następujące:

do głowy:

<head> 
    // ... included scripts go here also 
    <script> 
     var filterDefaults = { 
      somekey: 'some string value', 
      anotherkey: 'another value' 
     }; 
    </script> 
</head> 

następnie dodaj data-filter-data:'var:filterDefaults' do kolumny:

<table id="table" 
     data-toggle="table" 
     data-filter-control="true"> 
    <thead> 
     <tr> 
      <th data-field="id">ID</th> 
      <th data-field="name" data-filter-control="input">Item Name</th> 
      <th data-field="price" data-filter-control="select" data-filter-data="var:filterDefaults">Item Price</th> 
     </tr> 
    </thead> 
</table>