jqGrid Cuadro de diálogo de edición personalizada

Question

Estoy trabajando para una aplicación que usa jqGrid. El problema es que el cuadro de diálogo de edición que debe aparecer en la edición de fila debe tener un diseño específico. Así que preferiría cargarlo a través de ajax y luego enviar los datos a jqGrid manualmente. Busqué mucho en los foros pero no pude encontrar un ejemplo de cómo hacerlo.

Por lo tanto, solo necesito que jqGrid complete el cuadro de diálogo emergente con contenido personalizado de un script PHP.

ACTUALIZACIÓN: La idea es que tengo un generador de formularios, donde el usuario establece la posición/ancho/altura/visibilidad de los campos de edición ... y esto debe utilizarse en el cuadro de diálogo de edición.

Answer 1

Puede usar la opción editfunc o addfunc del navGrid. Si, por ejemplo, se define editfunc, en lugar de editGridRow, jqGrid se llamará editfunc con el id de la fila seleccionada como parámetro.

Alternativa puede usar custom button (vea this answer como ejemplo).

Para modificar los datos en la tabla después del cuadro de diálogo de edición personalizado, puede usar la función setRowData.

ACTUALIZADO: Si solo necesita modificar el diseño del cuadro de diálogo de edición, puede usar beforeShowForm para realizar modificaciones.

Answer 2

Puede consultar este Tutorial, que es el sitio web de demostración oficial de jqGrid Plugin. Estoy seguro de que hay ejemplos de "Edición de filas" en esa categoría. También puede ver muchos otros ejemplos de jqGrid en este sitio web de demostración.
También puede marcar Home page.

Si tiene más problemas, puede solicitarlo aquí. Utilicé algunos de esos ejemplos en uno de los sitios web de mi cliente (confidencial), por lo que será fácil de manipular de acuerdo con sus necesidades.

Espero que ayude.

Answer 3

Mi diálogo de edición tenía demasiados campos y así se convirtió en demasiado alto, así que tuve que poner los campos lado a lado en 2 columnas. Lo hice de la siguiente manera:

Intenté varias formas, usando wrap(), etc., pero descubrí que los valores no se publican en el servidor si modifica la estructura de la tabla original. Así que solo cloné los elementos tr, los puse en nuevas tablas y oculté los antiguos. No oculté toda la tabla, por lo que la validación seguirá siendo visible. Puse un cambio en los elementos clonados para actualizar los antiguos. Esto funciona genial Parámetro tableName es tu identificación de elemento jqgrid.

var splitFormatted = false; 
function SplitFormatForm(tableName, add) { 
    if (!splitFormatted) { 
    splitFormatted = true; 
    $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>'); 

    var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length; 
    var s = (cc/2) - 1; 

    var x = $("#TblGrid_" + tableName + "> tbody").children("tr"); 
    var i = 0; 
    x.each(function (index) { 
     var e = $(this).clone(); 
     var oldID = e.attr("id") + ""; 
     var newID = oldID; 
     if (oldID.substring(0, 3) === "tr_") { 
      newID = "clone_" + oldID; 
      $(this).css("display", "none"); 
      e.change(function() { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); }); 
      e.attr("id", newID); 

      if (i++ < s) { 
       $("#TblGrid_" + tableName + "_A").append(e); 
      } 
      else { 
       $("#TblGrid_" + tableName + "_B").append(e); 
      } 
     } 
    }); 

    //This hack makes the popup work the first time too 
    $(".ui-icon-closethick").trigger('click'); 
    var sel_id = "'new'"; 
    if (!add) { 
     sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow'); 
    } 
    jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } }); 
}} 

Llame a este código en sus editOptions de la siguiente manera:

afterShowForm: function() { SplitFormatForm("SiteAccountsGrid", false); }