Mon jqGrid qui tire très bien des données de ma base de données, mais j'ai du mal à comprendre comment fonctionne la fonctionnalité Ajouter une nouvelle ligne.Comment modifier ou ajouter une nouvelle ligne dans jqGrid
En ce moment, je suis capable de modifier les données en ligne, mais je ne suis pas en mesure de créer une nouvelle ligne en utilisant la boîte Modal. Il me manque cette logique supplémentaire qui dit: «S'il s'agit d'une nouvelle ligne, publiez-la sur l'URL côté serveur» au lieu de modifier les données existantes. (En ce moment, frapper Soumettez seulement efface le formulaire et recharge les données de la grille.)
Les états de documentation qui ajoutent une nouvelle ligne est:
jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
mais je ne suis pas sûr de savoir comment utiliser correctement que. J'ai passé beaucoup de temps à étudier les démos, mais ils semblent tous utiliser un bouton externe pour lancer la nouvelle commande de ligne, plutôt que d'utiliser le formulaire modal, ce 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 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>
S'il est plus facile, je serais prêt à supprimer la fonctionnalité d'édition en ligne et faire le montage et l'affichage via des boîtes modales.
Toute aide serait grandement appréciée.
paul - une chance de poster votre nouveau code. J'ai réussi à modifier une ligne existante mais je suis incapable d'ajouter une nouvelle ligne. J'ai essayé de lire les démos, mais je suis totalement confus Merci – user1150262
@Paul, pourriez-vous me dire comment ajouter et modifier des lignes? Je suis nouveau à ce sujet :( – Learner