Editar varias filas en Struts2 jQuery Grid a través de Inline Edit

jqgrid inline-editing

Question

 The struts2-jQuery grid offers a wide variety of edit features. But for one of our requirements, the Out-of-the-Box ''Edit'' feature in this grid is not suitable. we want to customize it as follows..

Nuestros requisitos son :

1. El usuario debería poder editar más de 1 fila a la vez. De acuerdo con la implementación predeterminada predeterminada, después de cada edición de fila, el usuario debe realizar una operación de guardar (presionando Enter o haciendo clic en el botón Guardar) antes de continuar para editar la siguiente fila
2. Mover entre filas usando TAB para editar

3. Una operación ''Bulk / Batch Save'' que podría enviar todos los datos de las filas editadas a mi acción y desde allí podemos hacer una operación de base de datos de Grabación en bloque

   Nuestro enfoque :

Personalización 1 : lleve los botones ''Editar / Cancelar'' en la primera columna en todas las filas (sin botones de guardar en cada fila). Al hacer clic en Editar, la fila en particular se convierte en editable
Personalización 4 : Traiga un nuevo botón de imagen ''Batch Save'' en la barra de herramientas de la Grilla
Personalización 5 : al hacer clic en ''Batch Save'', recopile todos los datos de la fila editada (junto con el id) y recíbalos en Acción como matrices para realizar la operación de la base de datos ''Actualización por lotes''

We got our inspiration from the ''Custom Edit'' posted @ www.trirand.com/blog/jqgrid/jqgrid.html

** ¿Alguien ha encontrado requisitos similares o ha realizado personalizaciones similares a Struts2-jQuery Grid? **

I am surprised that the grid does not offer this ''Multi Row Edit'' by default.

**

Actualización 1:

**

En el proceso de implementación de una función personalizada de "Bulk / Batch Save" en la grilla, tuvimos algunos problemas más ... queríamos compartirlos con todos ustedes ... mientras trabajamos para solucionarlos ... apreciamos si alguien puede lanzar punteros en ellos..

1. Queremos actualizar la cuadrícula después de que se guarden los datos a través de nuestro botón personalizado de la barra de herramientas de la cuadrícula "Guardar todo". Al hacer clic en este botón, estamos realizando una solicitud posterior de Ajax a la acción que realizará el guardado de todos los datos modificados.

2. Al navegar después de Editar (sin guardar), muestre alerta para guardar los datos modificados

3. Evite la publicación de la página en la clase de acción cuando el usuario pulsa ''Entrar'' mientras edita una columna

4. Agregar una casilla de verificación personalizada y usar esos valores para la operación de eliminación personalizada (porque la casilla de verificación generada a través de la opción Multiselect está causando problemas en la edición múltiple)

5. Editar reglas en S2J Grid para llamar a la validación personalizada de JavaScript

**

Actualización 2:

**

No pudimos identificar bindkeys como se menciona en una de las respuestas a continuación, mientras tanto aquí está nuestro enfoque. Todavía hay muchos extremos abiertos para esta implementación, que aún estamos trabajando.

Paso 1: Utilice lo siguiente en la cuadrícula para crear nuestros botones personalizados "Editar" y "Cancelar" para cada fila de datos onGridCompleteTopics="createbuttons" , aquí createbuttons fue nuestra función jScript escrita a medida.

 $.subscribe(''createbuttons'',function(event,data)
{
var ids = jQuery("#gridtable").jqGrid(''getDataIDs'');
for(var i=0;i < ids.length;i++)
{
var cc = ids[i];
var rowData = jQuery(''#gridtable'').jqGrid(''getCell'',cc,''name'');
edit = "<input type=''image'' class=''ui-icon ui-icon-pencil'' onblur=''check()'' style=''display:inline;'' onclick=/"javascript:editCurrentRow(''"+cc +"'');/" />";
cncl = "<input type=''image'' class=''ui-icon ui-icon-cancel'' style=''display:inline;'' onclick=/"javascript:removeCurrentRow(''"+ cc +"'');/" />";
jQuery("#gridtable").jqGrid(''setRowData'',ids[i],{Buttons:edit+cncl});
}
});

Paso 2: se agregó un botón personalizado a la cuadrícula, esta será una función de JavaScript escrita a medida que recopilará todos los datos de la fila editada y hará una publicación de Ajax en nuestra clase de Acción Struts2. A partir de ahí creamos una matriz de esta entrada para pasarla al procedimiento Oracle y realizar la operación DB (Insertar / Actualizar) dentro del procedimiento (usando FORALL INSERT / UPDATE)

navigatorExtraButtons="{
saveall:{
title:''Save Alls'',
onclick:function(){call_function_save()}
}
}"

Paso 3: agregamos el siguiente código a todas las celdas de los cuadros de texto para evitar que se publiquen en la página cuando se presiona Enter

<sjg:gridColumn name="name" index="name"
title="Name" formatter="String" editable="true" editoptions="{ dataEvents: [
{
type: ''keydown'',
fn: function(e) {
var key = e.charCode || e.keyCode;
if (key == 13)//enter
{
return false;
}
}
}
]}"
edittype="text" />

Mantendré a todos informados sobre nuestro progreso, pero hay un nuevo desafío al que nos enfrentamos ahora, para el cual he publicado otra pregunta aquí y aquí.

Answer 1

Creo que debes mirar la edición en inline aquí e implementar bindKeys que puedes encontrar aquí . Avíseme si tiene problemas para implementarlo.

bindKeys
Parameters:
{
onEnter: null,
onSpace: null,
onLeftKey: null, onRightKey: null,
scrollingRows : true
}

Answer 2

Hola amigos, obtuve la solución para el problema anterior usando edición en línea. Batch save:

El almacenamiento por lotes es posible con el script java. usando el script java leemos todos los valores de la grilla, luego se envía a través de la red a nuestra clase de acción

Gracias,

Si alguna ayuda con la codificación te lo enviaré.