jQuery Grid Plugin - jqGrid

Hello 😉

I done this :

"

,gridComplete: function(){		
		
var re = ''
var ad = ''
var du = ''
var ed = ''
var de = ''

				var ids = jQuery("#service_table").jqGrid("getDataIDs");
				for(var i=0;i < ids.length;i++)
				{
					var cl = ids[i];
			
re = "<div style='float:left;margin-right:1px' class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-info' title='Consulter' onclick="GetserviceForm('consult', '#service_table', '#service_form_div_', '"+cl+"');" ></span></div>";
ad = "<div style='float:left;margin-right:1px' class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-plus' title='Ajouter' onclick="GetserviceForm('add', '#service_table', '#service_form_div_', '0');" ></span></div>";
du = "<div style='float:left;margin-right:1px' class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-copy' title='Dupliquer' onclick="GetserviceForm('duplicate', '#service_table', '#service_form_div_', '"+cl+"');" ></span></div>";
ed = "<div style='float:left;margin-right:1px' class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-pencil' title='Modifier' onclick="GetserviceForm('edit', '#service_table', '#service_form_div_', '"+cl+"');" ></span></div>";
de = "<div style='float:left;margin-right:1px' class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-trash' title='Supprimer' onclick="DeleteserviceRow('#service_table', '"+cl+"');" ></span></div>";
				jQuery("#service_table").jqGrid("setRowData",cl,{grid_actions:re + ad + du + ed + de});
}

}"

"

function GetserviceForm(method, gridId, formId, rowID){			
				// les donnees pour valider le form : precedes de frm_ car le isValid prend les id des elements du form
				// on precede de l id du form car IE ne retrouve pas  
				$data = "method="+method+"&id_Prestation="+rowID+"&format=html";
					var ts = $(gridId + ".ui-jqgrid-btable").get(0);
			    	if(ts.grid.hDiv.loading){
			    		return;
			    	}
					beginGridRequest(gridId);
					$.ajax({
						type: "POST",
						url:baseUrl + "/index.php/manage_service-getform",
						async:true,
						data: $data,
						success: function(reponse){							
							if(reponse != null && reponse != ""){							
								$(formId).empty();
								$(formId).append(reponse);
								/*$(formId).get(0).innerHTML =  reponse;*/
							}else{
								$(formId).empty();
							}
							var labelForm = titleRead;
							
							if(method == "edit"){
								labelForm = titleEdit;
							}else if(method == "add"){
								labelForm = titleAdd;
							}else if(method == "duplicate"){
								labelForm = titleDuplicate;
							}
							endGridRequest(gridId);
							$(formId)
								.dialog({bgiframe: true,
modal: true,
autoOpen: false,
height: 250,
width: 350,
buttons: {Annuler: function() {
							$("#service_form_div_").dialog("close");
							},
							Valider: function() {
								SubmitserviceForm("#service_table", "#service_form_div_");
							}}})
								.dialog({ title: labelForm })
								.dialog("open");
								
						},
						error: function(reponse, textStatus, errorThrown){
							endGridRequest(gridId);
							alert("Execution error");
						}
					});
				}; // Fin CloseForm()
			function SubmitserviceForm(gridId, formId){	
				$data ="id_Prestation="+$(formId + "id_Prestation").val()+"&libelle="+$(formId + "libelle").val()+"&grid_actions="+$(formId + "grid_actions").val()+"&";
				var ts = $(gridId + ".ui-jqgrid-btable").get(0);
		    	if(ts.grid.hDiv.loading){
		    		return;
		    	}
			
				beginGridRequest(gridId);
				$.ajax({
					type: "POST",
					url:baseUrl + "/index.php/manage_service-check?format=html",
					async:true,
					data: $data,
					success: function(reponse){
						endGridRequest(gridId);
						if(reponse != null && reponse != ""){
							// echec on affiche la reponse, qui et le zend_form avec erreurs
							$(formId).get(0).innerHTML= $(reponse).get(0).innerHTML;
						}else{
							// succes, rechargement du jqgrid et fermeture dialog avec zend_form
							jQuery(gridId).trigger("reloadGrid");
							$(formId).dialog("close");
						}
					},
					error: function(reponse, textStatus, errorThrown){
						endGridRequest(gridId);
						alert("Execution error");
					}
				});
			}; // Fin SubmitForm()
			
			/**
			 * Supprime une ligne du tableau
			 */
			function DeleteserviceRow(gridId, rowID){
				var ts = $(gridId + ".ui-jqgrid-btable").get(0);
		    	if(ts.grid.hDiv.loading){
		    		return;
		    	}
				jQuery(gridId).setSelection(rowID, false);
			    if (confirm(msgConfirmSupp)) {
			    	beginGridRequest(gridId);
			    	$.ajax({
						type: "POST",
						url: baseUrl + "/index.php/manage_service-delete-"+rowID,
						dataType:"html",
						data:"format=html",
						success: function(reponse){
							endGridRequest(gridId);
				    	    if(reponse == ""){
				    	    	jQuery(gridId).delRowData(rowID);
				    	    }else{
				    	    	alert("Suppression impossible :\n" + reponse);			    	    
				    	    }
						},
						error: function(reponse, textStatus, errorThrown){
							endGridRequest(gridId);
							alert("Execution error");
						}
					});
			    } else {
			    	jQuery(gridId).resetSelection();
			    } // if
			}; // fin DeleteRow
"

It's not perfect (I'll make refactorisation of this code) but it work perfectly 🙂 (I don't like default form edition)

Hope this help you