Domanda SlickGrid Dati AJAX


Sto cercando di far funzionare AJAX con SlickGrid. L'esempio fornito è hardcoded per Digg.

Inoltre, non penso che la cache funzioni in questo esempio. E a causa della limitazione del tasso Digg, è difficile capire come funziona. Come posso configurare SlickGrid per ottenere dati dal mio database con il paging.


16
2017-07-12 17:43


origine


risposte:


Ho appena passato questo, ecco come l'ho fatto:

  1. Copia il contenuto di example6-ajax-loading.html (nel download di SlickGrid) nel tuo file html - chiamiamolo mygrid.html (o nel tuo codice che genera html. Nel mio caso sto usando CodeIgniter, quindi ho copiato in mygrid_view .php).

  2. Copia slick.remotemodel.js sul tuoRemoteModel.js.

  3. In "mygrid.html" assicurati di avere il percorso corretto per tutti i file javascript. Cambia slick.remotemodel.js nel tuoRemoteModel.js. Elimina gli script duplicati - per exmaple, se stai già introducendo una versione recente di jQuery, allora elimina la riga in "mygrid.html" che richiama jquery-1.4.3.min.js.

  4. In "mygrid.html", modifica l'inizializzazione della variabile "colonne" in modo che corrisponda ai dati che desideri visualizzare dal tuo database. Presta attenzione alla proprietà del campo. Questo deve essere d'accordo con i nomi delle proprietà che verranno restituiti nella risposta JSON dal tuo server. (* vedi nota a riguardo alla fine).

  5. In yourRemoteModel.js, modifica la variabile url in modo che punti al server, passando gli argomenti appropriati. Nel mio caso, passo i parametri della pagina e delle righe al mio server in questo modo:

    var url = myServerUrl + "? page =" + fromPage + "& rows =" + ((toPage - fromPage) * PAGESIZE) + PAGESIZE);

  6. In yourRemoteModel.js, cambia la chiamata jsonp in ajax - a meno che non sia necessario eseguire questo dominio incrociato, nel qual caso vorrai rimanere con jsonp, altrimenti puoi cambiarlo in questo modo:

            req = $.ajax({
                url: url,
                dataType: 'json',
                success: onSuccess,
                error: function(){
                    onError(fromPage, toPage)
                }
                });
    
  7. In yourRemoteModel.js, ora devi personalizzare la funzione onSuccess (). Segui lo schema dell'esempio, impostazione a partire dal e a essere gli offset interi nei record di dati, impostare data.length in modo che sia il numero totale di record e quindi impostare l'array di dati. Questo codice dipende da come appare la risposta JSON dal tuo server.

  8. Ora scrivi il codice sul server per generare la risposta JSON. Come puoi vedere dal punto 7, è necessario includere l'offset del record (o della pagina) nei dati e un'indicazione di quanti record vengono restituiti, oltre a un array di record stessi. Ricorda che ogni campo di ogni record deve avere un nome di proprietà che corrisponda all'impostazione "campo" nelle definizioni di colonna (dal punto 4 sopra). Dai un'occhiata alla risposta di Digg come esempio:

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

E così dovrebbe andare!

* Nota: nel mio caso non volevo utilizzare la larghezza di banda per restituire tutti i nomi di proprietà ripetuti per ogni record nella risposta JSON, quindi restituisco una matrice dei valori del record. Quindi, impostare la proprietà del campo nella descrizione della colonna (passaggio 4 sopra) come offset di un intero in questo array. Quindi nelle descrizioni delle colonne, invece del campo: "someFieldName", utilizzo il campo: 3, quindi nel mio modello remoto, la funzione onSuccess () sto impostando i dati [da + i] = resp.record [i] .data ( dove .data è un array nella risposta JSON dei valori del campo nel record). Finora questo sembra funzionare bene per me (ma potrebbe essere più difficile eseguire il debug se qualcosa va storto).


21
2017-08-04 17:30



Vedi questa richiesta di pull Un esempio funzionale di AJAX Data Store ora utilizza HackerNews anziché Digg. Puoi scaricare questo Slickgrid e guarda example6-ajax-loading.

Qui ci sono importanti osservazioni su paging + ajax + slickgrid: Google Gruppi: impaginazione SlickGrid + Ajax + DataView


3
2018-01-22 13:02



  1. Aggiungi una classe alle colonne che vuoi associare con Ajax
  2. Aggiungi un evento onRenderCompleted
  3. usa la classe come selettore e aggiungi elementi come altri DOM all'interno della funzione onRenderCompleted

0
2017-07-25 15:21



Per chiunque altro stia cercando di fare questo controlla questo fork di slickgrid. https://github.com/harbulot/SlickGrid 

Aggiunge un piccolo server Python locale per fornire il backend AJAX

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

Quindi vai a http://127.0.0.1:8000/examples/example6b-ajax-localserver.html con il tuo browser.

Guarda la richiesta di pull per vedere cosa è stato cambiato https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder 


0
2018-04-14 06:57