Cómo editar o agregar una nueva fila en jqGrid

Question

Apr 15, 2010, 10:53 PM

Cómo editar o agregar una nueva fila en jqGrid

Mi jqGrid hace un gran trabajo al extraer datos de mi base de datos, pero tengo problemas para entender cómo funciona la funcionalidad Agregar nueva fila.

En este momento, puedo editar datos en línea, pero no puedo crear una nueva fila con el cuadro modal. Me falta esa lógica adicional que dice: "Si se trata de una nueva fila, publíquela en la URL del lado del servidor" en lugar de modificar los datos existentes. (En este momento, presionar Enviar solo borra el formulario y vuelve a cargar los datos de la cuadrícula).

La documentación indica que Agregar nueva fila es:

jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});

pero no estoy seguro de cómo usar eso correctamente. He pasado mucho tiempo estudiando las Demos, pero parece que todas usan un botón externo para disparar el nuevo comando de fila, en lugar de usar la Forma modal, que es lo que quiero hacer.

Mi código completo está aquí:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid</title>  

<link rel="stylesheet" type="text/css" media="screen" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll c1"></div> 

<script type="text/javascript">
var lastSelectedId;

jQuery('#list').jqGrid({
url:'grid.php',
datatype: 'json',
mtype: 'POST',
colNames:['ID','Name', 'Price', 'Promotion'],
colModel:[    
   {name:'product_id',index:'product_id', width:25,editable:false},     
   {name:'name',index:'name', width:50,editable:true, edittype:'text',editoptions:{size:30,maxlength:50}},
   {name:'price',index:'price', width:50, align:'right',formatter:'currency', editable:true},
   {name:'on_promotion',index:'on_promotion', width:50, formatter:'checkbox',editable:true, edittype:'checkbox'}],
rowNum:10,
rowList:[5,10,20,30],
pager: $('#pager'),
sortname: 'product_id',
viewrecords: true,
sortorder: "desc",
caption:"Database",
width:500,
height:150,  
onSelectRow: function(id){
if(id && id!==lastSelectedId){
  $('#list').restoreRow(lastSelectedId);
  $('#list').editRow(id,true,null,onSaveSuccess);
  lastSelectedId=id; }},
editurl:'grid.php?action=save'}) 

.jqGrid('navGrid','#pager', 
    {refreshicon: 'ui-icon-refresh',view:true},
    {height:280,reloadAfterSubmit:true}, 
    {height:280,reloadAfterSubmit:true}, 
    {reloadAfterSubmit:true})

.jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); 

function onSaveSuccess(xhr) 
{response = xhr.responseText; if(response == 1) return true; return false;}

</script></body></html>

Si lo hace más fácil, estaría dispuesto a eliminar la funcionalidad de edición en línea y editar y publicar a través de cuadros modales.

Cualquier ayuda sería muy apreciada.