SlickGrid AJAX dane

Question

Próbuję uzyskać AJAX pracy z SlickGrid. The example given is hardcoded for Digg.

Ponadto, nie sądzę, że pamięć podręczna działa w tym przykładzie. A ze względu na ograniczanie szybkości Digg trudno jest naprawdę wyczuć, jak to działa. Jak mogę skonfigurować SlickGrid do pobierania danych z mojej bazy danych przy pomocy stronicowania.

Answer 1

1. Dodaj klasę do kolumn, które chcesz powiązać z ajax
2. Add an onRenderCompleted event
3. użyć klasy jako selektora i dodać rzeczy jak inne DOM elementent wewnątrz funkcji onRenderCompleted

Answer 2

Poszłam przez to, więc oto jak to zrobiłem:

1. Skopiuj zawartość egzaminu e6-ajax-loading.html (w pobraniu SlickGrid) do pliku html - nazwijmy go mygrid.html (lub do kodu, który generuje html. W moim przypadku używam CodeIgniter, więc skopiowałem do mygrid_view.php).

2. Skopiuj plik slick.remotemodel.js do yourRemoteModel.js.

3. W "mygrid.html" upewnij się, że masz poprawną ścieżkę do wszystkich plików javascript. Zmień plik slick.remotemodel.js na yourRemoteModel.js. Wyeliminuj wszelkie zduplikowane skrypty - na przykład, jeśli już korzystasz z najnowszej wersji jQuery, wyeliminuj linię w pliku "mygrid.html", która pobiera jquery-1.4.3.min.js.

4. W "mygrid.html" zmień inicjalizację zmiennej "columns", aby dopasować dane, które chcesz wyświetlić z bazy danych. Zwróć uwagę na właściwość pola. To musi zgadzać się z nazwami właściwości, które zostaną zwrócone w odpowiedzi JSON z twojego serwera. (* patrz uwaga na ten temat na końcu).

5. W pliku yourPemoteModel.js zmień zmienną adresu URL, aby wskazywała na serwer, przekazując odpowiednie argumenty. W moim przypadku mijam stron i wierszy paramters do mojego serwera tak: "? Page ="

   var url = myServerUrl + fromPage + "& wiersze =" + (((toPage - fromPage) * PAGESIZE) + pageSize);

6. W yourRemoteModel.js zmienić połączenia jsonp do ajax - chyba trzeba to zrobić między domenami, w takim przypadku będziemy chcieli zostać z jsonp, w przeciwnym razie można go zmienić, aby wyglądać tak:

    req = $.ajax({ 
         url: url, 
         dataType: 'json', 
         success: onSuccess, 
         error: function(){ 
          onError(fromPage, toPage) 
         } 
         }); 
   

7. W yourRemoteModel.js musisz teraz dostosować funkcję onSuccess(). Postępuj zgodnie ze wzorcem przykładu, ustawiając z i na jako całkowite przesunięcia w rekordach danych, ustawiając data.length na całkowitą liczbę rekordów, a następnie ustawiając tablicę danych. Ten kod zależy od tego, jak wygląda odpowiedź JSON z Twojego serwera.

8. Teraz napisz kod na serwerze, aby wygenerować odpowiedź JSON. Jak widać z kroku 7, musi to obejmować przesunięcie rekordu (lub strony) do danych oraz wskazanie, ile rekordów jest zwracanych, jak również tablicę samych rekordów. Pamiętaj, że każde pole każdego rekordu musi mieć nazwę właściwości, która pasuje do ustawienia "pola" w definicjach kolumn (od kroku 4 powyżej).Spójrz na odpowiedź od Wykop jako przykład:

http://services.digg.com/search/stories?query=apple&offset=0&appkey=http://slickgrid.googlecode.com&type=javascript&callback=cb

I to powinno wystarczyć!

* Uwaga: w moim przypadku nie chciałem używać przepustowości do zwracania wszystkich nazw właściwości powtarzanych dla każdego rekordu w odpowiedzi JSON, więc zamiast tego zwracam tablicę wartości rekordów. Następnie ustawiam właściwość pola w opisie kolumny (krok 4 powyżej) na offset całkowity w tej tablicy. Tak więc w opisach kolumn, zamiast pola: "someFieldName", używam pola: 3, następnie w moim zdalnym modelu funkcja onSuccess() Ustawiam dane [od + i] = resp.record [i] .data (gdzie .data jest tablicą w odpowiedzi JSON wartości pól w rekordzie) .Jednak wydaje się, że działa dobrze dla mnie (ale może być trudniej do debugowania, jeśli coś pójdzie nie tak)

Answer 3

Zobacz to żądanie ściągnięcia . A functional AJAX Data Store Example now using HackerNews instead of Digg można pobrać this Slickgrid i patrzeć example6-Ajax ładowanie

Tutaj ma ważne spostrzeżenia dotyczące stronicowania + AJAX + slickgrid. Google Groups: SlickGrid Pagination + Ajax + DataView

Answer 4

dla dowolnego jeszcze jeden, kto chce to zrobić, sprawdź ten widelec slickgrid. https://github.com/harbulot/SlickGrid

Dodaje ładny mały serwer lokalny Pythona świadczenia backend Ajax

git clone git@github.com:harbulot/SlickGrid.git 
cd SlickGrid/ 
python localajaxserver.py 

następnie przejść do http://127.0.0.1:8000/examples/example6b-ajax-localserver.html ze swojej przeglądarce.

Spójrz na żądanie Pull aby zobaczyć, co się zmieniło https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder