一.介紹

(1).介紹

首先對Jqgrid網格外掛做個簡要的說明。在眾多的表格外掛中，Jqgrid的特點是非常鮮明的。
    特點如下:
    1.完整的表格呈現與運算功能，包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。
    2.自定義的工具列。
    3.預設的Navigator工具列，可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。
    4.完整的分頁功能。
    5.按下任一欄位的標頭，皆可以該欄位為排序專案。無論是升序或降序皆可。
    6.預設的action formatter，可以快速而直覺地對每筆資料做運算。
    7.支援多種資料格式。比如json、xml、array等。

案例參考

(2).引用外掛

<!-- jqGrid元件基礎樣式包-必要 -->
		<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
		
		<!-- jqGrid主題包-非必要 --> 
		<!-- 在jqgrid/css/css這個目錄下還有其他的主題包，可以嘗試更換看效果 -->
		<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />

		<!-- jquery外掛包-必要 -->
		<!-- 這個是所有jquery外掛的基礎，首先第一個引入 -->
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		
		<!-- jqGrid外掛包-必要 -->
		<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
		
		<!-- jqGrid外掛的多語言包-非必要 -->
		<!-- 在jqgrid/js/i18n下還有其他的多語言包，可以嘗試更換看效果 -->
		<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
 

二.屬性

官網屬性

url：提交處理資料的地址。
datatype：這個引數用於設定將要得到的資料型別。我最常用的是“json”，其餘的型別還包括：xml、xmlstring、local、javascript、function。
mtype: 定義使用哪種方法發起請求，GET或者POST。
height：Grid的高度，可以接受數字、%值、auto，預設值為150。
width：Grid的寬度，如果未設定，則寬度應為所有列寬的之和；如果設定了寬度，則每列的寬度將會根據shrinkToFit選項的設定，進行設定。
shrinkToFit：此選項用於根據width計算每列寬度的演算法。預設值為true。如果shrinkToFit為true且設定了width值，則每列寬度會根據width成比例縮放；如果shrinkToFit為false且設定了width值，則每列的寬度不會成比例縮放，而是保持原有設定，而Grid將會有水平滾動條。
autowidth：預設值為false。如果設為true，則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段；如果當父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的程式碼中呼叫setGridWidth方法來完成。
pager：定義頁碼控制條PageBar
sortname：指定預設的排序列，可以是列名也可以是數字。此引數會在被傳遞到服務端。
viewrecords：設定是否在PagerBar顯示所有記錄的總數。
caption：Grid的標題。如果設定了，則將顯示在Grid的Header層 ；如果未設定，則標題區域不顯示 。
rowNum：用於設定Grid中一次顯示的行數，預設值為20。
rowList：一個數組，用於設定Grid可以接受的rowNum值。例如[10,20,30]。
prmNames：這是一個數組，用於設定jqGrid將要向服務端傳遞的引數名稱。我們一般不用去改變什麼。
colModel：最重要的陣列之一，用於設定各列的引數。（稍後詳述）
jsonReader：這又是一個數組，用來設定如何解析從Server端發回來的json資料。（稍後詳述）
 

(1).colModel的重要選項

name：為Grid中的每個列設定唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
index：設定排序時所使用的索引名稱，這個index名稱會作為sidx引數傳遞到服務端。
label：表格顯示的列名。
width：設定列的寬度，目前只能接受以px為單位的數值，預設為150。
sortable：設定該列是否可以排序，預設為true。
search：設定該列是否可以被列為搜尋條件，預設為true。
resizable：設定列是否可以變更尺寸，預設為true。
hidden：設定此列初始化時是否為隱藏狀態，預設為false。
formatter：預設型別或用來格式化該列的自定義函式名。常用預設格式有：integer、date、currency、number等

(2).jsonReader選項
    jsonReader是Jqgrid的一個重要選項，用於設定如何解析從服務端發回來的json資料。其預設值為：

jsonReader : {
	root : "rows", // 實際模型的人口
	page : "page", // 當前頁碼
	total : total, // 當前共多少頁
	records : "records", // 總共多少行資料
	repeatitems : true,
	cell : "cell",
	id : "id",
	userdata : "userdata", // 資料
	subgrid : {
		root : "rows",
		repeatitems : true,
		cell : "cell"
	}
}

  我們可以這樣理解，prmNames設定瞭如何將Grid所需要的引數傳給服務端，而jsonReader設定瞭如何去解析從服務端傳回來的json資料。如果沒有設定jsonReader的話，Jqgrid將會根據預設的設定來解析json資料，並顯示在表格裡。一般情況下，我們修改jsonReader的root為服務端傳遞過來的陣列就可以滿足要求了。比如：

jsonReader : {
root : "dataList", // 服務端儲存資料的集合
records : "record", // 可以不要,因為我的服務端是record,不是預設的,才加上的
repeatitems : false
// 其它的全部預設就行
}

三.操作表的基本語法

官網的方法

(1).getGridParam
    這個方法用來獲得jqGrid的選項值。它具有一個可選引數name，name即代表著jqGrid的選項名，如果不傳入name引數，則會返回 Jqgrid整個選項options。例如：

var id = $("#gridTable").jqGrid("getGridParam", "selrow");      //獲得選中行的ID
var sort = $("#gridTable").jqGrid("getGridParam", "sortname");  //獲得排序的欄位
var page = $("#gridTable").jqGrid("getGridParam", "page");      //獲得當前的頁數
var row = $("#gridTable").jqGrid("getGridParam", "rowNum");     //獲得當前頁的行數
var count = $("#gridTable").jqGrid("getGridParam", "records");  //獲得總記錄數
var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多選時，返回選中行的ID

(2).getRowData
    這個方法用來獲得某行的資料。它具有一個rowid引數，Jqgrid會根據這個rowid返回對應行的資料，返回的是name:value型別的陣列。如果rowid未能被找到，則返回一個空陣列；如果未設定rowid引數，則以陣列的形式返回Grid的所有行資料。例如：

var getRowdata = function() {
    var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
    var rowData = $("#gridTable").jqGrid("getRowData", selectedId);

(3).addRowData
    這個方法用於向Grid中插入新的一行。執行成功返回true，否則返回false。它具有4個引數：
        rowid：新行的id號；
        data：新行的資料物件，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；
        position：插入的位置（first：表格頂端；last：表格底端；before：srcrowid之前；after：srcrowid之後）；
        srcrowid：新行將插入到srcrowid指定行的前面或後面。
這個方法可以一次性插入多行，data引數必須是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]這樣的陣列形式。例如:

//1種
    var rows = [  
                {"code":"CN","name":"中國","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"JP","name":"日本","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"RU","name":"俄羅斯聯邦","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"WO","name":"世界智慧財產權組織","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AE","name":"阿拉伯聯合大公國","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AG","name":"安地卡及巴布達","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AL","name":"阿爾巴尼亞","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AN","name":"荷屬安的列斯群島","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AP","name":"非洲地區工業產權組織（ARIPO）","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AS","name":"美屬薩摩亞","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                  
                ];  
    for(var i=0;i<rows.length;i++){  
        $("#addlist").jqGrid('addRowData',i+1,rows[i]);  
    }  
      //2種
   //要新增的jqgrid中的行資料
    var dataRow = {
        "code" : "3a",
        "name" : "上海",
        "operation" : "<input name='checkPersonName'   placeholder='請輸入檢查人員' type='text' >",
    };
    //使用addRowData方法把dataRow新增到表格中
    $("#addlist").jqGrid("addRowData", 1, dataRow); 

(4).setRowData
    這個方法用於為某行資料設定資料值。執行成功返回true，否則返回false。它具有3個引數：
    rowid：更新資料的行id；
    data：更新的資料物件，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；這個資料物件，不必設定完全，需要更新哪列，就設定哪列的name:value對；
    cssprop：如果cssprop為String型別，則會使用jQuery的addClass為行增加相應名稱的CSS類；如果為object型別，則會使用html的css屬性，為行新增樣式。如果只想增加css樣式而不更新資料，可以將data引數設為false。
例如：

var updateStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
lastName : "Li",
firstName : "Si",
email : "<a href="mailto:[email protected]">[email protected]</a>"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};

(5). delRowData
    這個方法用於刪除某行資料。執行成功返回true，否則返回false。具有一個引數rowid，代表要刪除的行id。例如：

ar deleteStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
$("#gridTable").jqGrid('delRowData', selectedId);
};

(6).trigger(“reloadGrid”)
    根據當前設定，重新載入Grid表格，即意味著向服務端重新發送一個新的請求。此方法只能用於已經構建好的Grid。此外，此方法不會使對colModel所做出的改變生效。應該使用gridUnload來重新載入對colModel的新設定。例如:

$("#gridTable").jqGrid("setGridParam", {
datatype : "json",
search : true,
mtype : "post"
}).trigger("reloadGrid");

(7). 其他方法
除了以上介紹的的方法外，jqGrid還有其他有用的方法，例如：addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等以及增強模組提供的方法，例如：filterGrid、GridDestroy、GridUnload、setColProp等。這些方法的具體用法，或淺顯易懂，或不是非常常用。都可以參考官方文件，得到具體指示。

四.簡單案例

1.初始化資料

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
	<title>http://blog.mn886.net/jqGrid</title>
</head>
<body>
<!--新增表單區域開始-->
<form method="post" id="addBatchForm">
    <div >          
        <table id="addlist"></table>
        <div id="addpager"></div>    
    </div>
</form>	
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script>
	$(function(){
	  pageInit();
	});
	function pageInit(){
	$("#addlist").jqGrid({  
        width:930,  
        dataType:'local',         
        colNames:["國家/地區/組織程式碼","國家/地區/組織名稱","操作"],  
        colModel:[  
                    {name:"code",index:"code",align:'center'},  
                    {name:"name",index:"name",align:'center'},  
                    {name:"operation",index:"operation",align:'center'},  
                ],  
        viewrecords:true,  
        rowNum:15,  
        //autoHeight:true,  
        rowList:[15,20,25,30],  
        jsonReader:{  
            root: "rows",   
            page: "page",   
            total: "total",   
            records: "records",   
            repeatitems: false   
  
        },  
        pager:"#addpager",           
    });  
//    
//1種
    var rows = [  
                {"code":"CN","name":"中國","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"JP","name":"日本","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"RU","name":"俄羅斯聯邦","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"WO","name":"世界智慧財產權組織","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AE","name":"阿拉伯聯合大公國","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AG","name":"安地卡及巴布達","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AL","name":"阿爾巴尼亞","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AN","name":"荷屬安的列斯群島","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AP","name":"非洲地區工業產權組織（ARIPO）","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                {"code":"AS","name":"美屬薩摩亞","operation":"<span style='color:blue;cursor:pointer;'>應用</span>"},  
                  
                ];  
    for(var i=0;i<rows.length;i++){  
        $("#addlist").jqGrid('addRowData',i+1,rows[i]);  
    }  
}  

</script>
</body>
</html>