Comment Modifier ou Ajouter une Nouvelle Ligne dans jqGrid

Mon jqGrid qui fait un excellent travail de l'extraction de données de ma base de données, mais je vais avoir du mal à comprendre comment l'Ajouter Nouvelle Ligne fonctionne de la fonctionnalité.

Maintenant, je suis en mesure de modifier des données en ligne, mais je ne suis pas en mesure de créer une nouvelle ligne à l'aide de la Modal Box. Je suis absent que de la logique supplémentaire qui dit, "Si c'est une nouvelle ligne, ce post pour le côté serveur URL" au lieu de modifier les données existantes. (Maintenant, frapper Soumettre n'efface que la forme et de la recharge de la grille de données.)

La documentation, Ajouter la Nouvelle Ligne est:

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

mais je ne suis pas sûr de savoir comment l'utiliser correctement. J'ai passé beaucoup de temps à étudier les Démos, mais ils semblent tous utiliser un bouton externe de feu de la nouvelle ligne de commande, plutôt que d'utiliser le Formulaire Modal, que je veux faire.

Mon code complet est ici:

<!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  type="text/css" media="screen" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link  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 il le rend plus facile, je serais prêt à la ferraille de l'édition en ligne de la fonctionnalité et de faire l'édition et l'affichage via modale des boîtes.

Toute aide serait grandement appréciée.

paul - toute chance de poster votre nouveau code. J'ai réussi à modifier une ligne existante, mais je suis incapable d'ajouter de nouvelle ligne. J'ai essayé de lire les démos mais suis totalement confus Merci
pourriez-vous, veuillez me dire comment faire pour ajouter et modifier des lignes? Je suis de nouveau pour elle 🙁

OriginalL'auteur Paul Reichow | 2010-04-15

  1. 20

    Tout d'abord, vous ne devez pas appeler jqGrid('editGridRow',"new"...) dans la plupart des cas. Au lieu de cela, vous devriez avoir à l'utilisateur de cliquer sur un Ajouter un Enregistrement bouton. Ensuite, une boîte de dialogue apparaîtra avec tous les champs qui ont editable=true dans colModel.

    Après avoir cliqué sur le Soumettre bouton, jqGrid seront données POST à l'URL définie par url paramètre ou editurl paramètre (si elle existe). Parce que vous utilisez le paramètre mtype='POST' pour le remplissage de données, vous devez définir d'autres editurl paramètre. Vous pouvez écraser HTTP POST code pour METTRE ou tout autre que vous aimez.

    Il est important de comprendre que le id pour de nouveaux enregistrements a un _empty valeur. Le Modifier dialogue fonctionne de la même manière que le Ajouter dialogue, mais comprend la id de l'enregistrement modifié. Comme un autre paramètre important qui sera envoyé au serveur dans le cas d'ajouter un nouvel enregistrement est paramètre supplémentaire oper=add.

    Pour plus d'informations, lisez la section de Ce qui est affiché sur le serveur sur http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing.

    Je vous recommande aussi de lire sur les différents paramètres envoyés par jqGrid dans la description de
    prmNames paramètre sur http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

    Oleg, je vous remercie très beaucoup pour la réponse. C'est la meilleure explication que j'ai vu n'importe où. Juste pour clarifier encore plus pour quelqu'un d'autre la lecture de ce post: l'appel de jqGrid('editGridRow',"nouveau") dans la façon dont je l'ai fait ci-dessus les feux de la forme modale sans que l'utilisateur le demande. Pas ce que je désirais. Aussi, je n'ai pas encore comprendre au sujet de l'paramètre supplémentaire d'être envoyé vers le serveur de fichiers côté pour de nouveaux enregistrements. Vous devez utiliser ce paramètre supplémentaire sur le côté serveur afin de déterminer l'opération demandée par votre grille. Encore une fois, merci.
    Bonjour Paul. Je suis heureux d'entendre, que je puisse vous aider. Par ailleurs, vous pouvez marquer la réponse acceptée.
    Dans mon cas, je peux obtenir Addi Dialogue Enregistrer, mais ne peut pas modifier les champs, même si j'ai mis les champs modifiables

    OriginalL'auteur Oleg