Jqgrid教程（簡單上手）

原創 xwine_jun 2018-08-21 22:27

這裏不用我多說Jqgrid怎麼好，通過下圖給大家演示一下：


下面說一說如何輕鬆使用它：

1.首先需要下載jqgrid的相關包：http://www.trirand.com/blog/?page_id=6（根據需要自行下載）

2.然後需要下載jqgrid皮膚文件：可以用jquery-ui，jqgrid本身支持jquery-ui，下載地址：http://jqueryui.com/themeroller/（選擇一個喜歡的皮膚下載）。

3.在頁面中引入相關文件，一般css兩個分別是：

ui.jqgrid.css

jquery-ui.css

，js四個：

jquery-1.7.2.min.js 

jquery.jqGrid.min.js    

 jquery-ui.js    

 grid.locale-cn.js

如果覺得jquery-ui 的主題都不適合你，可以下別的主題也行，只是替換兩個文件

jquery-ui.css  

jquery-ui.js   

比如這裏可以應用bootstrap的主題：

 ui.jqgrid-bootstrap.css

bootstrap.min.js

所以的準備工作做好以後就可以進行編寫我們的jqgrid了：

下面是我的一個demo案例：



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"	href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
	<table id="list"></table>
</body>
</html>

<script type="text/javascript">
$("#list").jqGrid({        
   	url:'server.php?q=2',//請求數據的地址
	datatype: "json",
   	colNames:['Id','姓名', '年齡'],
	//jqgrid主要通過下面的索引信息與後臺傳過來的值對應
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'name',index:'invdate', width:90},
   		{name:'age',index:'name', width:100}
      	],
   	caption:"我是jqgrid的標題",
});
</script>

上面是一個最基本的jqgrid數據顯示，接下來是在這個基礎上增加一些附加功能：

1.分頁功能信息顯示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"	href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
	<table id="list"></table>
<span style="background-color: rgb(204, 204, 204);">	<div id="pager"></div></span>
</body>
</html>

<script type="text/javascript">
$("#list").jqGrid({        
   	url:'server.php?q=2',//請求數據的地址
	datatype: "json",
   	colNames:['Id','姓名', '年齡'],
	//jqgrid主要通過下面的索引信息與後臺傳過來的值對應
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'name',index:'invdate', width:90},
   		{name:'age',index:'name', width:100}
      	],
   	caption:"我是jqgrid的標題",
<span style="background-color: rgb(204, 204, 204);">    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager',
    sortname : 'id',
    recordpos : 'right',
    height:300,
    viewrecords : true</span>
});

</script>


2.顯示系統默認的添加，修改，刪除，查詢，更新按鈕。 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"<span style="white-space:pre">	</span>href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
<span style="white-space:pre">	</span><table id="list"></table>
<span style="white-space:pre">	</span><div id="pager"></div>
</body>


<script type="text/javascript">
$("#list").jqGrid({        
   <span style="white-space:pre">	</span>url:'server.php?q=2',//請求數據的地址
<span style="white-space:pre">	</span>datatype: "json",
   <span style="white-space:pre">	</span>colNames:['Id','姓名', '年齡'],
<span style="white-space:pre">	</span>//jqgrid主要通過下面的索引信息與後臺傳過來的值對應
   <span style="white-space:pre">	</span>colModel:[
   <span style="white-space:pre">		</span>{name:'id',index:'id', width:200},
   <span style="white-space:pre">		</span>{name:'name',index:'invdate', width:200},
   <span style="white-space:pre">		</span>{name:'age',index:'name', width:300}
      <span style="white-space:pre">	</span>],
   <span style="white-space:pre">	</span>caption:"我是jqgrid的標題",
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager',
    sortname : 'id',
    recordpos : 'right',
    height:300,
    viewrecords : true
});
$("#list").jqGrid('navGrid', '#pager', {
    add : true,
    del : true,
    edit : true,
    position : 'left',
   });
</script>
</html>


3.可以爲添加修改刪除指定我們自定義的事件： 

<script type="text/javascript">

var openDialog4Adding = function() {  
	alert("add Demo");
	
};  
var openDialog4Updating = function(rowid) { // (6) 接受選中行的id爲參數  
	alert("update Demo");
};  
var openDialog4Deleting = function(rowid) { // (8) 接受選中行的id爲參數  
	alert("delete Demo");
};  


$("#list").jqGrid({        
   	url:'server.php?q=2',//請求數據的地址
	datatype: "json",
   	colNames:['Id','姓名', '年齡'],
	//jqgrid主要通過下面的索引信息與後臺傳過來的值對應
   	colModel:[
   		{name:'id',index:'id', width:200},
   		{name:'name',index:'invdate', width:200},
   		{name:'age',index:'name', width:300}
      	],
   	caption:"我是jqgrid的標題",
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager',
    sortname : 'id',
    recordpos : 'right',
    height:300,
    viewrecords : true
});
$("#list").jqGrid('navGrid', '#pager', {
    add : true,
    del : true,
    edit : true,
    position : 'left',
    addfunc : openDialog4Adding,    // (1) 點擊添加按鈕，則調用openDialog4Adding方法  
    editfunc : openDialog4Updating, // (2) 點擊編輯按鈕，則調用openDialog4Updating方法  
    delfunc : openDialog4Deleting,  // (3) 點擊刪除按鈕，則調用openDialog4Deleting方法  
    alerttext : "請選擇需要操作的數據行!"  // (4) 當未選中任何行而點擊編輯、刪除、查看按鈕時，彈出的提示信息  
  });
  
</script>

4.自定義按鈕+點擊彈出框

需要在html中加入下面代碼：

     <div>
        <button class="right-button02" onclick="openDialog4Adding()">添加</button> 
		<button class="right-button02" onclick="openDialog4Updating()">修改</button> 
	 	<button class="right-button02" onclick="openDialog4Deleting()">刪除</button>
     
     </div>
     <div id="consoleDlg">
			<div id="formContainer">
				<form id="consoleForm">
				    <input type="hidden" id="selectId" />
					<table class="formTable">
						<tr>
							<th>
								姓名：
							</th>
							<td>
								<input type="text" class="textField" id="ename"
									name="ename" />
							</td>
						</tr>
						<tr>
							<th id="thusergender">
								性  別：
							</th>
							<td>
								<input type="text" class="textField" id="esex"
									name="esex" />
							</td>
						</tr>
						<tr>
							<th>
								出生日期：
							</th>
							<td>
								<input type="text" class="textField" id="birthday"
									name="birthday" />
							</td>
						</tr>
						<tr>
							<th>
								部門：
							</th>
							<td>
								<input type="text" class="textField" id="department"
									name="department" />
							</td>
						</tr>
						<tr>
							<th>
								備註：
							</th>
							<td>
								<input type="text" class="textField" id="eremark"
									name="eremark" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
然後再寫js代碼： 

// 配置對話框  
    $("#consoleDlg").dialog({  
        autoOpen: false,      
        modal: true,    // 設置對話框爲模態（modal）對話框  
        resizable: true,      
        width: 480,  
        buttons: {  // 爲對話框添加按鈕  
            "取消": function() {$("#consoleDlg").dialog("close")},  
            "添加": addEmployee,  
            "保存": updateEmployee,  
            "刪除": deleteEmployee  
        }  
    });  

var openDialog4Adding = function() {  
	    var consoleDlg = $("#consoleDlg");  
	    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
	    consoleDlg.find("input").removeAttr("disabled").val("");  
	    dialogButtonPanel.find("button:not(:contains('取消'))").hide();  
	    dialogButtonPanel.find("button:contains('添加')").show();  
	    consoleDlg.dialog("option", "title", "添加員工信息 ").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('取消'))").hide();  
	    dialogButtonPanel.find("button:contains('保存')").show();  
	    consoleDlg.dialog("option", "title", "修改員工信息");  
	      
	    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('取消'))").hide();  
	    dialogButtonPanel.find("button:contains('刪除')").show();  
	    consoleDlg.dialog("option", "title", "刪除員工");  
	      
	    loadSelectedRowData();  
	}  
		    	  
     var loadSelectedRowData = function() {
			var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow");
			if (!selectedRowId) {
				hiAlert("請先選擇需要編輯的行!");
				return false;
			} else {
				var params = {
					"employee.eid" : selectedRowId
				};
				// 從Server讀取對應ID的JSON數據
				$.ajax( {
					url : "employee_find.action",
					data : params,
					dataType : "json",
					cache : false,
					error : function(textStatus, errorThrown) {
						hiAlert("系統ajax交互錯誤: " + textStatus);
					},
					success : function(data, textStatus) {
						// 如果讀取結果成功，則將信息載入到對話框中					
					  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);  
					// 根據新載入的數據將表格中的對應數據行一併更新一下
					 var  dataRow = {  
    	    	                 id : data.employee.eid,   // 從Server端得到系統分配的id  
			                     ename :ename,  
			                     esex : esex,
			                     birthday: birthday,
			                     department: department,
			                     eremark:eremark 
	    	                 };
		
					$("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);
		
					// 打開對話框
					consoleDlg.dialog("open");
				}
				});
		
			}
		}; 	      	  
  //數據更新 
   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.esex" : 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("系統ajax交互錯誤: " + textStatus);  
	    	         },  
	    	         success : function(data, textStatus) {  
	    	             if (data.ajaxResult == "success") {  
	    	                 var dataRow = {  
    	    	                 id : data.employee.eid,   // 從Server端得到系統分配的id  
			                     ename :ename,  
			                     esex : esex,
			                     birthday: birthday,
			                     department: department,
			                     eremark:eremark 
	    	                 };  
	    	                 alert("聯繫人信息更新成功!");  
	    	                 consoleDlg.dialog("close");  
	    	                 $("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);  
	    	             } else {  
	    	                 alert("修改操作失敗!");  
	    	             }  
	    	         }  
	    	     });  
    	    };
    	
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,  
		"employee.department" : department,
		"employee.eremark" : eremark   
    };  
      
     var actionUrl = "employee_add.action";
      
    $.ajax( {  
        url : actionUrl,  
        data : params,  
        dataType : "json",  
        cache : false,  
        error : function(textStatus, errorThrown) {  
            alert("系統ajax交互錯誤: " + textStatus);  
        },  
        success : function(data, textStatus) {  
            if(data.ajaxResult == "success") {  
                var dataRow = {  
                   id : data.employee.eid,   // 從Server端得到系統分配的id  
			                     ename :ename,  
			                     esex : esex,
			                     birthday: birthday,
			                     department: department,
			                     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("聯繫人添加操作成功!");  
                  
            } else {  
                alert("添加操作失敗!");  
            }  
        }  
    });  
};  

//數據刪除
      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("系統ajax交互錯誤: " + textStatus);  
		        },  
		        success : function(data, textStatus) {  
		            if (data.ajaxResult == "success") {  
		                $("#gridTable").jqGrid("delRowData", pId);  
		                consoleDlg.dialog("close");  
		                alert("聯繫人刪除成功!");  
		            } else {  
		                alert("刪除操作失敗!");  
		            }  
		        }  
		    });  
		};
以上是我對jqgrid的基本用法的一個總結，關於對jqgrid與後臺進行交互，如：Java中Struts2+Jqgrid的靈活使用會在稍後介紹。如有不足之處，還望多多指正











發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

jqgrid調整寬度自適應

沒有水勒魚 2019-02-22 21:45:15

英愛特快速製表軟件詳細介紹

1549809398 2019-02-22 23:10:58

關於表格的錯誤

542577220 2019-02-22 22:58:39

簡單網頁設計之表格版

zalej 2019-02-22 22:07:44

javascript 動態創建表格：新增、刪除行和單元格

mystart2012 2019-02-22 22:05:18

js對錶格自動排序

kankan365 2019-02-22 21:09:50

bootstrap 表格

菜鳥不菜麼 2019-02-22 20:21:29

XHTML 列表與表格

kinrey 2019-02-22 18:55:14

網頁

sw_227 2019-02-22 18:51:12

html 表格

paopao0 2019-02-22 18:09:21

html的四個簡單示例

zhangjf5050 2019-02-22 17:56:11

table div+css

whyinxj110 2019-02-22 16:48:52

一分鐘做出老闆喜歡的Excel表格！直接套用，提升你的辦公效率！

九江老俵 2019-02-22 16:44:51

html做表格只顯示錶格的外邊框

mM7rthh3XUXP 2019-02-22 16:18:06

數據轉入到excel表格中

to_be_best 2019-02-22 15:23:16