Jqgrid tutorial (easy to get started)

There's no need for me to say jqgrid how good, through the following diagram to show you:

Let's talk about how to use it easily:

1. First you need to download Jqgrid's related package: http://www.trirand.com/blog/?page_id=6 (download as needed)

2. Then need to download Jqgrid skin file: can use Jquery-ui,jqgrid itself support Jquery-ui, download address: http://jqueryui.com/themeroller/(choose a favorite skin download).

3. In the page to introduce the relevant files, the general CSS two are:

Ui.jqgrid.css

Jquery-ui.css

, JS four:

Jquery-1.7.2.min.js

Jquery.jqGrid.min.js

Jquery-ui.js

Grid.locale-cn.js

If you feel that the theme of Jquery-ui is not for you, you can do other topics, just replace two files

Jquery-ui.css

Jquery-ui.js

For example, the bootstrap theme can be applied here:

Ui.jqgrid-bootstrap.css

Bootstrap.min.js

So the preparation will be ready to write our Jqgrid:

Here is one of my demo cases:

<! DOCTYPE html>  

Above is a basic jqgrid data display, the next step is to add some additional features on this basis:

1. Paging function Information display:


<! DOCTYPE html>  


2. Display the system default add, modify, delete, query, Update button.




<! DOCTYPE html>  


3. You can specify our custom events for adding modification deletions:


<script type= "Text/javascript" > var opendialog4adding = function () {alert ("Add Demo");  
};  
var opendialog4updating = function (ROWID) {//(6) The ID of the selected row is accepted as parameter alert ("Update Demo");};  


var opendialog4deleting = function (ROWID) {//(8) The ID of the selected row is accepted as parameter alert ("Delete Demo");}; $ ("#list"). Jqgrid ({url: ' server.php?q=2 ',//Request data Address datatype: "JSON", colnames:[' Id ', ' name ', ' age '),//jqgri D is mainly through the following index information and the background passed the value corresponding colmodel:[{name: ' id ', index: ' id ', width:200}, {name: ' name ', index: ' Invdate ', width:200  }, {name: ' Age ', Index: ' Name ', width:300}], caption: "I am the title of Jqgrid", Rownum:10, rowlist: [10, 20,
Pager: ' #pager ', sortname: ' id ', Recordpos: ' Right ', height:300, viewrecords:true}); $ ("#list"). Jqgrid (' Navgrid ', ' #pager ', {add:true, del:true, edit:true, Position: ' Left ', ADDFU Nc:opendialog4adding,//(1) Click the Add button, then call the Opendialog4adding method editfunc:opendialog4updating, (2) Click the Edit button, then call the Opendialog4updating method delfunc:opendialog4deleting,//(3) Click the Delete button, then call the Opendialog4deleting method  Alerttext: "Please select the data row you want to manipulate!"
  
(4) When no row is selected and click Edit, Delete, view button, pop-up message}); </script>
 

4. Customize the button + click on the popup box

You need to include the following code in the HTML:

     <div> <button class= "right-button02" onclick= "opendialog4adding ()" > Add </button> <butto n class= "right-button02" onclick= "opendialog4updating ()" > Modify </button> <button class= "Right-button02" Onclick= "opendialog4deleting ()" > Delete </button> </div> <div id= "Consoledlg" > <div i  d= "Formcontainer" > <form id= "consoleform" > <input type= "hidden" id= "Selectid"/> <table class= "Formtable" > <tr> <th> Name: </th> <td> &LT;INP UT type= "text" class= "TextField" id= "ename" name= "ename"/> </td> </tr> <tr&
							Gt <th id= "Thusergender" > Gender: </th> <td> <input type= "text" class= "TEXTF
								Ield "id=" Esex "name=" Esex "/> </td> </tr> <tr> <th> Date of birth: </th> <td> <input type= "text" class= "TextField" id= "Birthday" name= "Birthday"/>
								</td> </tr> <tr> <th> Department: </th> <td> <input type= "text" class= "TextField" id= "department" name= "department"/> </td> </ Tr> <tr> <th> Remarks: </th> <td> <input type= "text" C lass= "TextField" id= "Eremark" name= "Eremark"/> </td> </tr> </table> &                    
	 Lt;/form> </div> </div>
And then write the JS code:


Configure the dialog box $ ("#consoleDlg"). Dialog ({autoopen:false, modal:true,//Settings dialog box modal (modal) dialog box Resizable:true, width:480, buttons: {//Add button "Cancel" to the dialog box: function () {$ ("#c Onsoledlg "). Dialog (" Close ")}," Add ": AddEmployee," save ": UpdateEmployee," delete ": Del  

Eteemployee}});  
	    var opendialog4adding = function () {var Consoledlg = $ ("#consoleDlg");  
	    var Dialogbuttonpanel = Consoledlg.siblings (". Ui-dialog-buttonpane");  
	    Consoledlg.find ("Input"). Removeattr ("Disabled"). Val ("");  
	    Dialogbuttonpanel.find ("Button:not (: Contains (' Cancel ')"). Hide ();  
	    Dialogbuttonpanel.find ("Button:contains (' Add ')"). Show ();  
	Consoledlg.dialog ("option", "title", "Add employee Information"). Dialog ("Open");  
	};  
	    var opendialog4updating = function () {var Consoledlg = $ ("#consoleDlg");  
	    var Dialogbuttonpanel = Consoledlg.siblings (". Ui-dialog-buttonpane");  
	    Consoledlg.find ("Input"). Removeattr ("Disabled");  
	    Dialogbuttonpanel.find ("Button:not (: Contains (' Cancel ')"). Hide ();  
	    Dialogbuttonpanel.find ("Button:contains (' Save ')"). Show ();  
	      
	    Consoledlg.dialog ("option", "title", "Modify employee Information");  
	Loadselectedrowdata ();  
	    } var opendialog4deleting = function () {var Consoledlg = $ ("#consoleDlg");  
	      
	    var Dialogbuttonpanel = Consoledlg.siblings (". Ui-dialog-buttonpane");  
	    Consoledlg.find ("Input"). attr ("Disabled", true);  
	    Dialogbuttonpanel.find ("Button:not (: Contains (' Cancel ')"). Hide ();  
	    Dialogbuttonpanel.find ("button:contains (' delete ')"). Show ();  
	      
	    Consoledlg.dialog ("option", "title", "Delete employee");  
	Loadselectedrowdata (); } var loadselectedrowdata = function () {var Selectedrowid = $ ("#gridTable"). Jqgrid ("Getgridparam", "s
			Elrow ");
				if (!selectedrowid) {Hialert ("Please select the line you want to edit first!");
			return false; } else {var params = {"Employee.eid": selecteDROWID};
					Read the JSON data for the corresponding ID from the server $.ajax ({url: "employee_find.action", Data:params, DataType: "JSON",
					Cache:false, Error:function (Textstatus, Errorthrown) {Hialert ("System Ajax Interactive Error:" + textstatus);  
	    	    	  }, Success:function (data, textstatus) {//If the read result is successful, load the information into the dialog box var rowdata = Data.person;  
	    	    	  
	    	    	  var Consoledlg = $ ("#consoleDlg");  
				      Consoledlg.find ("#selectId"). Val (rowdata.id);  
				      Consoledlg.find ("#ename"). Val (Rowdata.ename);  
				      Consoledlg.find ("#esex"). Val (Rowdata.esex);  
				      Consoledlg.find ("#birthday"). Val (Rowdata.birthday);  
				      Consoledlg.find ("#department"). Val (rowdata.department);  
					Consoledlg.find ("#eremark"). Val (Rowdata.eremark); Update the corresponding data rows in the table according to the newly loaded data. var DataRow = {Id:data.employee.eid,//Get system points from server side  
			                   With the ID ename:ename,  Esex:esex, Birthday:birthday, Department:department,
		
					Eremark:eremark};
		
					$ ("#gridTable"). Jqgrid ("Setrowdata", Data.employee.eid, DataRow);
				Open the dialog box Consoledlg.dialog ("open");
		
			}
				}); 	      	  
  }
		};      
	    	       
                 Data Update function UpdateEmployee () {var Consoledlg = $ ("#consoleDlg");  
			     var Eid = $.trim (Consoledlg.find ("#selectId"). Val ());  
			     var eanme = $.trim (Consoledlg.find ("#eanme"). Val ());  
			     var esex = $.trim (Consoledlg.find ("#esex"). Val ()); 
			     var birthday = $.trim (Consoledlg.find ("#birthday"). Val ()); 
			     var department = $.trim (Consoledlg.find ("#department"). Val ());    
	    	     var Eremark = $.trim (Consoledlg.find ("#eremark"). Val ()); var params = {"Employee.eid": Eid, "Employee.ename": ename, "Employee.ese
				   X ": Esex,      "Employee.birthday": Birthday, "employee.department": Department, "Employee.eremark":  
	    	     Eremark};  
	    	     var actionurl = "Employee_update.action";  
	    	         $.ajax ({url:actionurl, data:params, DataType: "JSON",  Cache:false, Error:function (Textstatus, Errorthrown) {alert ("System Ajax Interaction Error:  
	    	         "+ textstatus);  
	    	                 }, Success:function (data, Textstatus) {if (Data.ajaxresult = = "Success") {  
			                     var DataRow = {Id:data.employee.eid,//Get system-assigned ID from server side
			                     Ename:ename, Esex:esex, Birthday:birthday,  
	    	                 Department:department, Eremark:eremark}; Alert ("ContactPerson information updated successfully! ");  
	    	                 Consoledlg.dialog ("close");  
	    	             $ ("#gridTable"). Jqgrid ("Setrowdata", Data.employee.eid, DataRow);  
	    	             } else {alert ("Modify operation failed!");  
    	    }  
	    	         }  
	    	     });
    	
};  
          
    var addemployee = function () {var Consoledlg = $ ("#consoleDlg");  
	var eanme = $.trim (Consoledlg.find ("#eanme"). Val ());  
	var esex = $.trim (Consoledlg.find ("#esex"). Val ()); 
	var birthday = $.trim (Consoledlg.find ("#birthday"). Val ()); 
	var department = $.trim (Consoledlg.find ("#department"). Val ());  
      
    var Eremark = $.trim (Consoledlg.find ("#eremark"). Val ()); var params = {"Employee.ename": ename, "Employee.esex": Esex, "Employee.birthday": Birthday, "Empl  
      
     Oyee.department ": Department," Employee.eremark ": Eremark};
      
    var actionurl = "Employee_add.action";  
$.ajax ({url:actionurl,        Data:params, DataType: "JSON", Cache:false, Error:function (Textstatus, Errort  
        Hrown) {alert ("System Ajax Interaction Error:" + textstatus);  }, Success:function (data, Textstatus) {if (Data.ajaxresult = = "Success") {var  
			                     DataRow = {Id:data.employee.eid,//Get system-assigned ID ename:ename from server side, Esex:esex, Birthday:birthday, Department:depa  
                  
                Rtment, Eremark:eremark};  
                  
                var Srcrowid = $ ("#gridTable"). Jqgrid ("Getgridparam", "Selrow"); 
                      
                if (SRCROWID) {$ ("#gridTable"). Jqgrid ("Addrowdata", Data.employee.eid, DataRow, "before", Srcrowid); } else {$ ("#gridTable"). Jqgrid ("Addrowdata", DATA.EMployee.eid, DataRow, "first");  
                  
                } consoledlg.dialog ("Close");  
                  
            Alert ("The contact add operation succeeded!");  
            } else {alert ("Add operation failed!");  
}  
        }  
    });  

};  
		      
		    Data deletion var deleteemployee = function () {var Consoledlg = $ ("#consoleDlg");  
		    var pId = $.trim (Consoledlg.find ("#selectId"). Val ());  
		    var params = {"Employee.eid": pId};  
		    var actionurl = "Employee_delete.action";   
		        $.ajax ({url:actionurl, data:params, DataType: "JSON", Cache:false,  
		        Error:function (Textstatus, Errorthrown) {alert ("System Ajax Interaction Error:" + textstatus);  
		                }, Success:function (data, Textstatus) {if (Data.ajaxresult = = "Success") {  
		                $ ("#gridTable"). Jqgrid ("Delrowdata", pId); CoNsoledlg.dialog ("close");  
		            Alert ("Contact deleted successfully!");  
		            } else {alert ("delete operation failed!");  
		}  
		        }  
		    });   };
The above is a summary of my basic usage of jqgrid, about interacting with the background with Jqgrid, such as: The flexible use of Struts2+jqgrid in Java is described later. If there are shortcomings, also hope to correct