Datos de SlickGrid AJAX

Question

Estoy intentando que AJAX trabaje con SlickGrid. The example given is hardcoded for Digg.

Además, no creo que la memoria caché funcione en ese ejemplo. Y debido a la limitación de la tasa de Digg, es difícil realmente sentir cómo funciona. ¿Cómo puedo configurar SlickGrid para obtener datos de mi base de datos con paginación?

Answer 1

1. Añadir una clase a las columnas que desea enlazar con el Ajax
2. Add an onRenderCompleted event
3. utilizar la clase como selector y agregar la materia como otra elementent DOM dentro de la función onRenderCompleted

Answer 2

simplemente fui a través de esto, así que aquí está cómo lo hice:

1. Copie el contenido de exampl e6-ajax-loading.html (en la descarga de SlickGrid) en su archivo html - vamos a llamarlo mygrid.html (O en su código que genera html. En mi caso estoy usando CodeIgniter, así que copié en mygrid_view.php).

2. Copie slick.remotemodel.js en yourRemoteModel.js.

3. En "mygrid.html", asegúrese de tener la ruta de acceso correcta a todos los archivos javascript. Cambie slick.remotemodel.js a yourRemoteModel.js. Elimine los scripts duplicados, por ejemplo, si ya está utilizando una versión reciente de jQuery, elimine la línea en "mygrid.html" que contiene jquery-1.4.3.min.js.

4. En "mygrid.html", cambie la inicialización de la variable 'columns' para que coincida con los datos que desea visualizar de su base de datos. Presta atención a la propiedad de campo. Esto debe estar de acuerdo con los nombres de propiedad que se devolverán en la respuesta JSON de su servidor. (* ver nota sobre esto al final).

5. En yourRemoteModel.js, cambie la variable url para que apunte a su servidor, pasando los argumentos apropiados. En mi caso yo paso de página y filas parametros a mi servidor de esta manera: "? Page ="

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

6. En yourRemoteModel.js, cambiar la llamada a jsonp ajax - a menos que necesite hacer esto a través del dominio, en cuyo caso usted querrá quedarse con jsonp, de lo contrario se puede cambiar para parecerse a esto:

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

7. En yourRemoteModel.js, ahora debe personalizar la función onSuccess(). Siga el patrón del ejemplo, estableciendo desde y en sea las compensaciones enteras en los registros de datos, estableciendo data.length como el número total de registros y luego configurando la matriz de datos. Este código depende de cómo se vea la respuesta JSON de su servidor.

8. Ahora escriba el código en el servidor para generar la respuesta JSON. Como puede ver en el paso 7, esto debe incluir la compensación del registro (o página) en los datos, y una indicación de cuántos registros se están devolviendo, así como también una matriz de los registros. Recuerde que cada campo de cada registro debe tener un nombre de propiedad que coincida con la configuración 'campo' en las definiciones de columna (del paso 4 anterior).Echar un vistazo a la respuesta de Digg como ejemplo:

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

Y eso debería hacerlo!

* Nota: en mi caso, no quería usar el ancho de banda para devolver todos los nombres de propiedad que se repiten para cada registro en la respuesta JSON, así que en su lugar devuelvo una matriz de los valores de registro. A continuación, establezco la propiedad del campo en la descripción de la columna (paso 4 anterior) para que sea un desplazamiento entero en esta matriz. Así que en las descripciones de las columnas, en lugar de field: 'someFieldName', uso field: 3, luego en mi modelo remoto, en la funciónSuccess() estoy configurando data [from + i] = resp.record [i] .data (donde .data es una matriz en la respuesta JSON de los valores de campo en el registro). Hasta ahora esto parece funcionar bien para mí (pero podría ser más difícil de depurar si algo sale mal).

Answer 3

Ver esta petición de extracción . A functional AJAX Data Store Example now using HackerNews instead of Digg puede descargar this Slickgrid y buscar ejemplo6-ajax-carga

Aquí tiene observaciones importantes acerca de paginación Ajax + + slickgrid:. Google Groups: SlickGrid Pagination + Ajax + DataView

Answer 4

Para cualquier otra persona que busca hacer esto echa un vistazo a este tenedor de Slickgrid. https://github.com/harbulot/SlickGrid

Se añade un poco de servidor Python agradable local para proporcionar el backend AJAX

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

luego ir a http://127.0.0.1:8000/examples/example6b-ajax-localserver.html con su navegador.

Mira la solicitud de extracción para ver lo que se cambió https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder