2010-05-28 8 views
57

Chcę, aby użytkownicy mogli do filtrowania danych sieciowych bez korzystania z wewnętrznej wyszukiwarki.Jak filtrować dane jqGrid NIE pomocą wbudowanego w polu wyszukiwania/filtra

Stworzyłem dwa pola wejściowe do daty (od i do) i teraz trzeba powiedzieć siatkę przyjąć to jako filtr, a następnie zażądać nowych danych.

Kucie żądania serwera dla danych siatki (z pominięciem siatki) i ustawienie danych siatki jako danych odpowiedzi nie będzie działać - ponieważ gdy tylko użytkownik spróbuje zmienić kolejność wyników lub zmienić stronę itp. Sieć zażąda nowych danych z serwera przy użyciu pustego filtru.

cant wydają się znaleźć siatki API do osiągnięcia tego celu - czy ktoś ma jakieś pomysły? Dzięki.

+0

Revisa este enlace (sprawdź ten link) http://stackoverflow.com/questions/17179777/search-with-autocomplete-in-codeigniter-and-jqgrid/17195094#17195094 –

Odpowiedz

78

Twój problem może być bardzo łatwo rozwiązany w odniesieniu do parametru postData, w tym funkcji i trigger('reloadGrid'). Próbuję wyjaśnić ten pomysł bardziej szczegółowo.

Użyjmy mtype: "GET". Jedyne, co robi standardowe okno wyszukiwania/filtrowania po wyświetleniu interfejsu, to dołączanie dodatkowych parametrów do adresu URL, wysyłanie do serwera i ponowne ładowanie danych siatki. Jeśli masz własny interfejs do wyszukiwania/filtrowania (na przykład wybrane kontrolki lub pola wyboru), powinieneś po prostu dołączyć swój adres URL i przeładować sieć z szacunkiem na trigger('reloadGrid'). Aby zresetować informacje w siatce, możesz wybrać dowolny sposób. Na przykład możesz dołączyć do wybranych formantów, które mają opcję "bez filtrowania".

Aby być bardziej dokładny kod powinien wygląda kodu z odpowiedzi how to reload jqgrid in asp.net mvc when i change dropdownlist:

var myGrid = jQuery("#list").jqGrid({ 
    url: gridDataUrl, 
    postData: { 
     StateId: function() { return jQuery("#StateId option:selected").val(); }, 
     CityId: function() { return jQuery("#CityId option:selected").val(); }, 
     hospname: function() { return jQuery("#HospitalName").val(); } 
    } 
    // ... 
}); 
// 
var myReload = function() { 
    myGrid.trigger('reloadGrid'); 
}; 
var keyupHandler = function (e,refreshFunction,obj) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/|| 
     keyCode === 35 /*end*/|| keyCode === 36 /*home*/|| 
     keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) { 

     if (typeof refreshFunction === "function") { 
      refreshFunction(obj); 
     } 
    } 
}; 

// ... 
$("#StateId").change(myReload).keyup(function (e) { 
    keyupHandler(e,myReload,this); 
}); 
$("#CityId").change(myReload).keyup(function (e) { 
    keyupHandler(e,myReload,this); 
}); 

Jeśli zmiana użytkownik wybiera opcję zaznaczania z id=StateId lub innej wybranej pudełku z id=CityId (z myszy lub klawiatury), zostanie wywołana funkcja myReload, która po prostu wymusza przeładowanie danych w jqGrid. Podczas odpowiadające $.ajax wniosek, który jqGrid dla nas zrobić, to wartość z postData parametru zostaną przekazane $.ajax jak data parametru. Jeśli niektóre z właściwości data są funkcjami, funkcja ta zostanie wywołana przez $.ajax. Faktyczne dane z wybranych pól zostaną załadowane, a wszystkie dane zostaną dołączone do danych przesłanych na serwer. Musisz tylko zaimplementować odczyt tych parametrów w swojej części serwerowej.

Dane z parametru postData zostaną dodane do adresu URL (symbole "?" I "&" zostaną dodane automatycznie, a wszystkie specjalne symbole, takie jak puste miejsca, zostaną również zakodowane w zwykły sposób). Zalety wykorzystania postData jest:

  1. korzystanie z funkcji wewnątrz postData parametr pozwala załadować wartości rzeczywiste ze wszystkich stosowanych kontroli do momentu przeładowania;
  2. Twój kod pozostaje bardzo przejrzysty.
  3. Wszystko działa dobrze nie tylko z żądaniami HTTP GET, ale również z protokołem HTTP POST;

przypadku korzystania niektóre w polu wyboru StateId „bez filtrowania” lub „ALL” wpisy, można zmodyfikować funkcję, która obliczy wartość StateId parametrem, który powinien dołączany do adresu URL serwera z

StateId: function() { return jQuery("#StateId option:selected").val(); } 

coś jak następuje:

StateId: function() { 
    var val = jQuery("#StateId option:selected").val(); 
    return val === "all"? "": val; 
} 

po stronie serwera, które powinny nie ma filtrowania dla StateId jeśli otrzyma pustą wartość jako parametr.

Opcjonalnie można użyć myGrid.setCaption('A text');, aby zmienić tytuł siatki. To pozwala użytkownikowi widzieć wyraźniej, że dane w siatce są filtrowane według pewnych kryteriów.

+0

@Oleg, mogę przesłonić domyślne funkcje 'postData' za pomocą' grid.setGridParam'? Próbuję to zrobić, ale bez powodzenia. Wygląda na to, że nawet jeśli ustawiłem parametr przez 'grid.setGridParam', to otrzymam domyślną funkcję' postData' i zdefiniowaną wcześniej. – AdrianoRR

+0

@AdrianoRR: Prawdopodobnie powinieneś napisać nowe pytanie, w którym opisujesz problem, który chcesz rozwiązać. Czego potrzebujesz? Czy chcesz, aby niektóre parametry nie były wysyłane na serwer? Czy potrzebujesz niestandardowego formatowania istniejących parametrów (np. Konwersja do JSON)? Lub prawdopodobnie nie chcesz wysyłać żadnych dodatkowych parametrów do serwera? – Oleg

+0

@Oleg, widząc inne posty z mojej strony, mogę uzyskać własną odpowiedź. Używając 'grid.getGridParam' mogę uzyskać atrybuty postData i ustawić je na dowolne wartości. Następnie wszystko co muszę zrobić, to wywołać 'grid.trigger (" reloadGrid ");' i zmiany są zakończone. W każdym razie, dziękuję za twoje S.O. posty! – AdrianoRR

2

miałem te same wymagania, oraz (z pomocą Olega) wymyślił to:

enter image description here

Zasadniczo, użytkownik rozpoczyna wpisywanie w „Nazwa Pracownik” tekstowym i natychmiast wyniki pojawiały w jqGrid.

Szczegóły jak I wdrożone to są tutaj:

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

pamiętać, że specjalnie załadować wszystkie danych JSON do mojego jqGrid z góry, a dla dużych zbiorów danych, nie jest opóźnieniem podczas uruchamiania tego kodu na urządzeniu iPhone/Android podczas wpisywania każdego znaku.

Jednak dla aplikacji internetowych na komputery stacjonarne jest to świetne rozwiązanie i sprawia, że ​​jqGrid jest znacznie bardziej przyjacielski dla użytkownika.

0

Za pomocą funkcji ReloadGrid() i jquery można tworzyć własne niestandardowe funkcje filtrowania.

Powiązane problemy