javascript jquery slickgrid

javascript - Datos de SlickGrid AJAX



jquery (4)

  1. Agregue una clase a las columnas que desea enlazar con ajax
  2. Agrega un evento onRenderCompleted
  3. use la clase como selector y agregue cosas como otro elemento DOM dentro de la función onRenderCompleted

Estoy tratando de hacer que AJAX trabaje con SlickGrid. El ejemplo dado está codificado para Digg .

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

Acabo de pasar por esto, así es como lo hice:

  1. Copie el contenido de example6-ajax-loading.html (en la descarga de SlickGrid) en su archivo html: llamémoslo 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 a yourRemoteModel.js.

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

  4. En "mygrid.html", cambie la inicialización de la variable ''columnas'' para que coincida con los datos que desea mostrar de su base de datos. Preste atención a la propiedad de campo. Esto debe coincidir 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, paso los parámetros de página y filas a mi servidor de esta manera:

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

  6. En yourRemoteModel.js, cambia la llamada jsonp a ajax, a menos que necesites hacer este dominio cruzado, en cuyo caso querrás quedarte con jsonp, de lo contrario puedes cambiarlo para que se vea así:

    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 para ser las compensaciones de enteros en los registros de datos, configurando data.length para que sea el número total de registros, y luego configurando la matriz de datos. Este código depende de cómo se ve 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 el desplazamiento del registro (o página) en los datos, y una indicación de cuántos registros se están devolviendo, así como una matriz de los registros en sí mismos. Recuerde que cada campo de cada registro debe tener un nombre de propiedad que coincida con la configuración de "campo" en sus definiciones de columna (del paso 4 anterior). Eche 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 quise usar el ancho de banda para devolver todos los nombres de propiedades repetidos para cada registro en la respuesta JSON, así que en cambio devuelvo una matriz de los valores de registro. Luego configuro la propiedad del campo en la descripción de la columna (paso 4 anterior) para que sea un desplazamiento de entero en esta matriz. Así que en las descripciones de la columna, en lugar del campo: ''someFieldName ", uso el campo: 3, luego en mi modelo remoto, la función onSuccess () Estoy configurando datos [de + 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 estar funcionando bien para mí (pero podría ser más difícil de depurar si algo sale mal).

Para cualquier persona que quiera hacer esto, echa un vistazo a este tenedor de slickgrid. https://github.com/harbulot/SlickGrid

Agrega un pequeño servidor Python local para proporcionar el backend AJAX

git clone [email protected]:harbulot/SlickGrid.git cd SlickGrid/ python localajaxserver.py

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

Mire la Solicitud de extracción para ver qué se cambió https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder