Diálogo de edição personalizada jqGrid

Estou trabalhando para um aplicativo que usa jqGrid. O problema é que a checkbox de diálogo de edição que deve aparecer na edição de linha deve ter um layout específico. Então eu preferiria carregá-lo via ajax e depois enviar os dados de volta para jqGrid manualmente. Eu procurei muito nos fóruns, mas não consegui encontrar um exemplo de como fazê-lo.

Então, eu só preciso de jqGrid para preencher o pop-up da checkbox de diálogo de edição com conteúdo personalizado de um script PHP.

UPDATE: a idéia é que eu tenho um gerador de formulário, onde o usuário define a posição / largura / altura / visibilidade dos campos de edição … e isso deve ser usado na checkbox de diálogo de edição.

Você pode usar a opção addfunc ou addfunc do navGrid . Se, por exemplo, editfunc for definido, em vez de editGridRow, o jqGrid será chamado editfunc com a identificação da linha selecionada como parâmetro.

Alternativa você pode usar o botão personalizado (veja esta resposta como um exemplo).

Para modificar dados na tabela após a checkbox de diálogo de edição personalizada, você pode usar a function setRowData .

ATUALIZADO : Se você precisa apenas fazer alguma modificação do layout da checkbox de diálogo de edição, você pode usar beforeShowForm para as modificações.

Você pode verificar este Tutorial , que é o site de demonstração oficial do plugin jqGrid. Estou certo de que existem exemplos de algumas “Edição de linhas” nessa categoria. Você pode ver muitos outros exemplos de jqGrid também, neste site de demonstração.
Você também pode verificar a página inicial .

Se você tiver mais problemas, você pode perguntar aqui. Eu usei alguns desses exemplos em um dos sites do meu cliente (confidencial), por isso será fácil manipular de acordo com suas necessidades.

Espero que ajude.

O meu diálogo de edição tinha muitos campos e, portanto, tornou se muito alto , então eu tive que colocar os campos lado a lado em duas colunas . Eu fiz isso da seguinte maneira:

Eu tentei várias maneiras, usando wrap (), etc, mas descobriu que os valores não são postados no servidor se você modificar a estrutura da tabela original. Então eu simplesmente clonou os elementos tr, colocá-los em novas mesas e escondeu os antigos. Não escondi a mesa inteira, de modo que a validação ainda será visível. Coloquei uma troca sobre os elementos clonados para atualizar os antigos. Isso funciona muito bem. O parâmetro tableName é o id do elemento jqgrid.

 var splitFormatted = false; function SplitFormatForm(tableName, add) { if (!splitFormatted) { splitFormatted = true; $("#FrmGrid_" + tableName).append('
'); 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]; } }); }}

Chame esse código nas suas opções de edição da seguinte maneira:

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