jqGrid en Clientside - paginación/edición/clasificación de consultas

Question

Estoy tratando de construir un sistema usando jqgrid que hace todo en el cliente, es decir, usa AJAX para recuperar un objeto JSON (usando C#/.Net) y lo guarda en caché variable de JavaScript y luego rellenar varias cuadrículas de esa memoria caché (addRowData), dependiendo de los datos. Eso está funcionando muy bien.

Sin embargo, ahora tengo problemas para descubrir cómo hacer algunas de las cosas más avanzadas.

1) paginación/clasificación de los datos sin interacción del servidor. es posible? O requiere que escriba funciones de búsqueda personalizadas (es decir, cuando el usuario se mueve a la página 2, obtenga los siguientes 10 registros de la memoria caché y actualice la cuadrícula con ellos). Espero que haya una manera automática de hacer esto? ¿Qué tal ordenar? Lea algunas cosas que sugieren que es parte del servidor, ¿pero tal vez eran artículos viejos? No es seguro.

2) Permitir a los usuarios ver controles (principalmente botones de radio y selector de fecha) en cada fila y tener esos cambios reflejados en la variable de caché. Miré las funciones de edición de jqGrid pero esto parece ser "clic/editar/guardar". Idealmente, me gustaría que la pantalla inicial de la cuadrícula muestre, por ejemplo, una de las columnas que muestran pares de botones de radio en cada fila y el usuario puede simplemente hacer clic en los que están interesados ​​(es decir, no tienen que "editar" explícitamente "la fila para ver/cambiar los botones de radio"). Esta información se actualiza en la cuadrícula y, más importante aún, en la variable de caché que controla la cuadrícula. ¿Existe una forma automática de vincular controles en cada fila a un conjunto de datos subyacente del cliente? ¿Cómo creo los controles en cada celda y relaciono su valor con el valor de la celda?

¿Alguna vez alguien podría señalarme en la dirección correcta?

Gracias por cualquier ayuda que puede dar,

Bill

Answer 1

Todo lo que desea tener en la parte 1 de su pregunta se puede implementar con jqGrid 3.7.x. Debe usar los parámetros datatype: 'json' y loadonce: true. El servidor debe enviar todos los datos. Ver jqgrid setGridParam datatype:local como ejemplo.

¿Qué pasa con la segunda parte de su pregunta? Me parece que tratas de hacer que jqGrid sea demasiado complejo. Me resulta mucho más fácil establecer algunos controles (seleccionar/cuadros desplegables, casillas de verificación o botones de opción) fuera de de jqGrid (por ejemplo, en la parte superior de la cuadrícula). Si el usuario realiza cambios en algunos de estos controles, debe volver a cargar la cuadrícula del servidor según los nuevos parámetros elegidos. Ver How to filter the jqGrid data NOT using the built in search/filter box como ejemplo. Si intenta combinar de esta manera con el parámetro loadonce: true, debe subestimar, que después de la primera carga de la grilla con loadonce: true el otro parámetro datatype: 'json'se cambiará a datatype: 'local'. Por lo tanto, para volver a cargar la cuadrícula, debe establecer datatype: 'json' cada vez antes de volver a cargar la cuadrícula.

ACTUALIZADO basado en comentarios: Bueno.Si tiene algunos conjuntos de datos predefinidos, quiere cargarlos todos del servidor y luego visualizar rápidamente la cuadrícula necesaria, puede definir algunas inmersiones y colocar todas las jqGrids (elementos div de tabla y paginación) dentro del div adicional correspondiente (un div por jqGrid) . Puede comenzar a cargar los datos a todas estas cuadrículas en la carga de la página. Usted hace que los padres div sean invisibles u ocultos con respecto a jQuery.show() y jQuery.hide() en cualquier momento que lo necesite. Las Divs que deberían estar ocultas al inicio de la página pueden tener el estilo CSS display:none.

Otra opción para crear cuadrículas dinamicamente con datos en caché es la siguiente. Puede eliminar un jqGrid con jQuery.remove() e insertar uno nuevo <table> y un elemento de búsqueda <div> con un método como jQuery.after(). De esta forma puedes construir jqGrid absolutamente de manera dinámica. Si lo hace, debe tener en cuenta que jqGrid crea algunos div adicionales sobre la tabla y los elementos div de paginación. Entonces para eliminar jqGrid completo con id = "list" deberías eliminar div con id = "gbox_list". Alternativa si coloca <table> y busca <div> en un elemento div primario y puede usar los métodos jQuery.empty() y jQuery.html() en el div principal para eliminar o insertar uno nuevo jqGrid.

Ahora sobre la visualización de botones de opción dentro de jqGrid. Esto es posible si usará el formateador personalizado. Consulte jqGrid: Editable column that always shows a select como ejemplo de cómo mostrar seleccionados (cuadros desplegables) dentro de jqGrid. Por cierto, no veo ninguna ventaja para usar botones de radio en comparación con selects. Los botones de radio ocupan solo un lugar más en la página y los usuarios tendrán que desplazarse por la página de forma ficticia.

Sin embargo, no le recomiendo que use elementos complejos dentro de las celdas jqGrid. Te recomiendo que demuestres a tus usuarios la función "Edición en línea" de jqGrid. Significa que si el usuario selecciona una fila o hace doble clic en una fila (puede implementar de una manera que prefiera a sus usuarios) la fila se cambiará en el modo de edición con casillas de verificación, cuadros de selección (cuadros desplegables), entradas de texto, etc. . Esta es una forma estándar. Tiene algunas ventajas sobre la "edición de forma" desde el lado de la comodidad del usuario. Cuanto más se aleje de la norma , más problemas puede recibir en el futuro. Para mostrar "edición en línea", puede abrir http://trirand.com/blog/jqgrid/jqgrid.html y elegir en el árbol a la izquierda "Edición de filas" y luego "Tipos de entrada". Como ejemplo de código, puede usar jqGrid - edit only certain rows for an editable column.

ACTUALIZADO 2: Una pequeña observación más. Si los datos en el servidor no se cambiarán de forma explícita y usted desea más tiempo de caché en el cliente, puede considerar usar el parámetro prmNames: { nd:null} de jqGrid, especialmente si usa Internet Explorer. Si hace esto, los últimos resultados HTTP GET (solicitudes incluidas jQuery.ajax) se almacenarán en caché en el cliente y las próximas rwquests ajax pueden cargar datos desde el caché local del navegador en lugar de enviar solicitudes al servidor. Si el servidor incluye información sobre el tiempo de caché permitido en la respuesta (encabezados HTTP), se usará automáticamente en el cliente en jQuery.ajax.

ACTUALIZADO 3 según el código fuente publicado: Tiene algunos errores en el código. Aquí está el código fijo

var myGrid = $("#mygrid").jqGrid({ 
    datatype: 'local', 
    colModel: [ 
     { name: 'AID', label: 'Some ID', key: true, width: 100, 
      editable: false, sorttype: "int" }, 
     { name: 'Name', width: 300, editable: false }, 
     { name: 'Group', width: 100, editable: false }, 
     { name: 'Info', width: 100, editable: false }, 
     { name: 'AValue', width: 100, editable: true, edittype: 'text' } 
    ], 
    pager: '#mypager', 
    rowNum: 10, 
    rowList: [10, 20, 500], 
    viewrecords: true, 
    autowidth: true, 
    sortname: 'AID', 
    sortorder: 'desc' 
}); 
myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false}); 

var mydata = []; 
for (var i = 0; i < 100; i++) { 
    mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"}); 
} 
myGrid.setGridParam({data: mydata}).trigger("reloadGrid"); 

Puede probar aquí http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm

ACTUALIZADO 4: El mismo ejemplo, inclusive, la edición de lado del cliente está aquí http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm. Se basa en http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ y Losing edited cell data after paging.

Answer 2

La última versión de jqGrid tiene lo que necesita, creo. De este link

• Se agregó paginación local, búsqueda, clasificación y desplazamiento virtual. Consulte la demostración Nuevo en 3.7

Answer 3

Mi código está por debajo.InitGridTestBulkLoad se ejecuta después de que se completa la carga de la grilla y la primera página de 10 registros se visualiza correctamente. Los controles de megafonía indican que estoy en la página 1 de 10.

Sin embargo, si presiono "Página siguiente", veo un breve cuadro de "Cargando" pero no cambia nada. Además, si hago clic en el encabezado de la primera columna para ordenar, no pasa nada.

cuadrícula definición y un código para almacenar los datos en caché "" y cargarlo en la red es:

jQuery(document).ready(function() { 
    jQuery("#mygrid").jqGrid({ 
     dataType: "local", 
     data: {}, 
     colNames: ['AID', 'Name', 'Group', 'Info', 'AValue'], 
     colModel: [ 
         { name: 'AID', label: 'Some ID', index: 'SomeID', width: 100, editable: false, sorttype: "int" }, 
         { name: 'Name', label: 'Name', index: 'Name', width: 300, editable: false }, 
         { name: 'Group', label: 'Group', index: 'Group', width: 100, editable: false }, 
         { name: 'Info', label: 'Info', index: 'Info', width: 100, editable: false }, 
         { name: 'AValue', label: 'AValue', index: 'AValue', width: 100, editable: true, edittype: 'text' } 
         ], 
     pager: '#mypager', 
     rowNum: 10, 
     rowList: [10, 20, 500], 
     viewrecords: true, 
     loadonce: true, 
     autowidth: true, 
     sortname: 'AID', 
     sortorder: 'desc' 
    }); 

}); 

var oJR = {}; 
oJR.rows = new Array(); 
function InitGridTestBulkLoad() { 
    oJR.total = 100; 
    oJR.page = 1; 
    oJR.records = 100; 
    for (var i = 0; i < 100; i++) { 
     var s = i.toString(); 
     oJR.rows[i] = {}; 
     oJR.rows[i].id = i; 
     oJR.rows[i].cell = [s, "123", "456", "78", "8"]; 
    } 

    var mg = $("#mygrid"); 
    mg[0].addJSONData(oJR); 
}