2010-07-02 24 views
8

No quiero golpear el servidor y traer de vuelta cada fila cuando estoy navegando por los registros usando el localizador. Leí que si establezco el tipo de datos = local en el blog completo en la función .ajax Y si configuro loadonce: true, entonces debería ser capaz de evitar tener que esperar a que la cuadrícula vuelva a cargar los datos.jqgrid setGridParam tipo de datos: local

Sin embargo, cuando hago estas cosas, la cuadrícula no pasa a la página siguiente. Simplemente se bloquea ...
¿Qué estoy haciendo mal?

jQuery(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     datatype: processrequest, 
     mtype: 'POST', 
     jsonReader: { 
      root: "rows", //arry containing actual data 
      page: "page", //current page 
      total: "total", //total pages for the query 
      records: "records", //total number of records 
      repeatitems: false, 
      id: "ID" //index of the column with the PK in it 
     }, 
     colNames: ['Name', 'Title'], 
     colModel: [ 
     { name: 'name', index: 'name', width: 250 }, 
     { name: 'title', index: 'title', width: 250 } 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortorder: "desc", 
     viewrecords: true, 
     height: '250px', 
     caption: 'My first grid', 
     loadonce: true 
    }).navGrid('#pager', {edit: false, add: false, del: false}); 
}); 

function processrequest(postdata) { 
... 
$.ajax({ 
... 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list2")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
     $("#list").setGridParam({ datatype: 'local' }); 
    } 
}); 
} 

Respuesta

17

Existen algunos malentendidos. Si usa datatype: local, debe llenar jqGrid usted mismo con métodos como addRowData o establecer los datos de una vez con el parámetro data (para jqGrid versión 3.7 y superior). Entonces, el uso de datatype: local sigue a jqGrid, no cargue ningún dato y su parámetro datatype: processrequest será ignorado.

Si desea utilizar loadonce: true parámetro que está soportado desde la versión 3.7 del jqGrid, que deberían tener todos los parámetros de jqGrid para JSON o XML (por ejemplo datatype: json en su caso) y un parámetro adicionalloadonce: true. Luego, después de la primera carga de datos, jqGrid cambiará el tipo de datos a datatype: local y luego funcionará independientemente en el servidor pero ignorará algunos parámetros (como datatype: processrequest en su caso).

Una pequeña observación más. La mayoría de las propiedades de jsonReader que utiliza en su ejemplo son las predeterminadas (consulte this wiki). Los parámetros de los que hace uso serán combinadas con las propiedades por defecto, por lo que es suficiente para utilizar como parámetro jsonReader: { repeatitems: false, id: "ID"}

ACTUALIZADO: OK Jeff. Me parece que para resolver su problema necesita más ejemplos de código de ambos lados: cliente y servidor. Aquí hay un pequeño ejemplo que creé y probé para ti.

Primero de todo, el lado del servidor. En el servicio web ASMX definimos un método Web que generan un conjunto de datos de prueba para su mesa:

public JqGridData TestMethod() { 
    int count = 200; 
    List<TableRow> gridRows = new List<TableRow> (count); 
    for (int i = 0; i < count; i++) { 
     gridRows.Add (new TableRow() { 
      id = i, 
      cell = new List<string> (2) { 
       string.Format("Name{0}", i), 
       string.Format("Title{0}", i) 
      } 
     }); 
    } 

    return new JqGridData() { 
     total = 1, 
     page = 1, 
     records = gridRows.Count, 
     rows = gridRows 
    }; 
} 

donde las clases JqGridData y TableRow se definen como la siguiente:

public class TableRow { 
    public int id { get; set; } 
    public List<string> cell { get; set; } 
} 
public class JqGridData { 
    public int total { get; set; } 
    public int page { get; set; } 
    public int records { get; set; } 
    public List<TableRow> rows { get; set; } 
} 

Aquí se puede ver, la web el método TestMethod no tiene parámetros y publica los datos completos. La paginación, clasificación y búsqueda de datos se realizará mediante jqGrid (versión 3.7 o superior).

Para leer estos datos y puesto en jqGrid podemos hacer lo siguiente:

$("#list").jqGrid({ 
    url: './MyTestWS.asmx/TestMethod', 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
    serializeGridData: function (postData) { 
     return JSON.stringify(postData); 
    }, 
    jsonReader: { 
     root: function (obj) { return obj.d.rows; }, 
     page: function (obj) { return obj.d.page; }, 
     total: function (obj) { return obj.d.total; }, 
     records: function (obj) { return obj.d.records; } 
    }, 
    colModel: [ 
     { name: 'name', label: 'Name', width: 250 }, 
     { name: 'title', label: 'Title', width: 250 } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 300], 
    sortname: 'name', 
    sortorder: "asc", 
    pager: "#pager", 
    viewrecords: true, 
    gridview: true, 
    rownumbers: true, 
    height: 250, 
    caption: 'My first grid' 
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}, 
    {},{},{},{multipleSearch : true}); 

Algunos comentarios sobre la definición de jqGrid:

Para comunicarse con el servicio web ASMX través de JSON uno tiene que hacer lo siguiente en la solicitud correspondiente jQuery.ajax:

  • dataType: 'json' debe estar configurado.
  • contentType:'application/json; charset=utf-8' debe estar configurado.
  • el envío de datos al servidor debe estar codificado en JSON.

para hacer todas estas utilizo datatype, ajaxGridOptions y serializeGridData parámetros de jqGrid. Hago codificación JSON con la función JSON.stringify (el JavaScript correspondiente se puede descargar desde here).

Luego los datos recibidos deben decodificarse. Lo hago con mi función favorita de jqGrid - jsonReader con funciones (consulte this SO post y this wiki).

Al final utilizamos loadonce: true que cambian el datatype de jqGrid 'json'-'local' y podemos utilizar inmediatamente la ventaja de paginación locales, clasificación y búsquedas avanzadas existentes ya jqGrid versión 3.7.

Si quiere hacer una búsqueda del lado del servidor, ordenar y buscar (o búsqueda avanzada) con el servicio web ASMX, también es posible. Para guardar un pequeño lugar aquí y para separar ejemplos de código, publicaré el ejemplo correspondiente en su otra pregunta, jqgrid Page 1 of x pager (vea la parte ACTUALIZADA).

+0

Actualicé mi declaración jsonReader como sugirió y eliminé la línea setGridParam. Mantuve el valor de loadonce pero sigo viendo que vuelve al servidor cada vez. No parece estar funcionando. ¿Alguna otra sugerencia? – webdad3

0

Esto funcionó para mí. Estaba teniendo un problema con la paginación y la clasificación no funcionaba. Probablemente debido a los elementos .d y __type que se estaban enviando de vuelta en el objeto JSON en .net. Sin embargo, con las configuraciones adicionales en este ejemplo. Esto funcionó!

Me estaba volviendo loco. Esta es la forma de configurar la grilla si está usando .Net como su servicio web. Está configurado para analizar y establecer correctamente los elementos de datos del objeto JSON en las ubicaciones correctas necesarias en la cuadrícula para permitir que la búsqueda y la clasificación funcionen.

Tuve que comentar, porque estoy seguro de que hay algunas personas que quisieran usar esta Grilla pero están usando .Net como su servicio web.

2

Es un poco tarde, pero aquí hay un (la?) Solución súper fácil para cualquier futura solución de asilo:

gridComplete: function(){ 
    $("#yourGridID").setGridParam({datatype: 'local'}); 
} 

Eso es todo. Estoy usando 3.7.2, no puedo hablar de ninguna otra versión. El problema (aparentemente) proviene de 'loadonce' que solo trabaja con los valores de tipo de datos predefinidos, que una función no tiene. I crea los otros valores incorporados también funcionarán, pero 'local' tiene sentido.

Cuestiones relacionadas