jqGrid 是一個用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕松實現前端頁面與后臺數據的ajax異步通信。
一、要引用的文件
要使用jqGrid，首先頁面上要引入如下css與js文件。
1、css
<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
2、js
<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>
二、使用要點說明
1、獲取值
（1）、獲取單個id
獲取行號，有這種方式：
var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");但是經過實際驗證，這種方式不可行，當選中行，再點擊同一行會出現獲取不到行號的情況。
最后先在js最外部定義一個變量selId，然后使用如下代碼在選中行時賦值：
onSelectRow: function (rowid, status) { selId = rowid; //給最外層的selId賦值 }（2）、獲取多個選中行的id
var ids=$('#gridTable').jqGrid('getGridParam','selarrrow');其輸出格式是逗號分隔的id，如：
1,2,3,4,5
（3）、獲得所有行的ID數組
var ids = $("jqgridtableid").jqGrid('getDataIDs');（4）、獲取行數據
如果想獲取選擇的行的數據，只要傳入rowId即可，如下：
var rowData = $('#gridTable').jqGrid('getRowData',rowId);而這個rowData是一個對象，如果要獲取選擇的行的這個對象的屬性值，如name的值，需如下：
var Name= rowData.name;
（5）、獲取單元格數據
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);（6）、設定行選中
//設定選中行,可設定多行選中： $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);2、自定義分頁、數據交互
何謂自定義？就是允許你用你自己喜歡的js對象與后端做數據交互。如jsonReader。
如果這個地方的Id設置錯了，那么jqGrid就會自動以行號作為Id，這樣會影響刪除的。如果根據Id來刪，很有可能刪錯行。
jsonReader: { id: "Id", //相當于設置主鍵 root: "JsonArray", //Json數據 total: "TotalPage", //總頁數 page: "CurrentPage", //當前頁 records: "TotalRecord",//總記錄數 repeatitems: false },這樣一來，對于數據表格，在C#中，我可以用一個泛型類，就能夠與jqGrid表格進行交互(其中，包括了分頁信息，數據內容)。
/// <summary> /// 分頁ViewModel /// </summary> public class jQGrid<T> where T : class { public jQGrid() { } /// <summary> /// 帶4個參數的構造函數 /// </summary> /// <param name="rows">每頁顯示行數</param> /// <param name="currentPage">當前頁</param> /// <param name="totalRecord">結果總記錄數</param> /// <param name="jsonArray">JSON數據</param> public jQGrid(int rows, int currentPage, int totalRecord, IList<T> jsonArray) { TotalPage = this.CalculateTotalPage(rows, totalRecord); CurrentPage = currentPage; TotalRecord = totalRecord; JsonArray = jsonArray; } public int TotalPage { get; set; } public int CurrentPage { get; set; } public int TotalRecord { get; set; } public IList<T> JsonArray { get; set; } /// <summary> /// 根據每頁顯示數與總記錄數計算出總頁數 /// </summary> /// <param name="rows">每頁顯示數</param> /// <param name="totalRecord">結果總記錄數</param> /// <returns></returns> public int CalculateTotalPage(int rows, int totalRecord) { return Convert.ToInt32(Math.Ceiling((double)totalRecord / (double)rows)); } }3、搜索的實現
搜索的實現主要通過jqGrid的postData像服務器端傳遞參數。
$("#btnSearch").click(function () { var rules = ""; $("#multipleSearchDialog").each(function (i) { $(".div-padding :input").each(function () { if ($(this).val()) { rules += '"' + $(this).attr("name") + '":"' + $(this).val() + '"'; } }) }); ParamJson = '{' + rules + '}'; var postData = $("#grid-table").jqGrid("getGridParam", "postData"); $.extend(postData, { Param: ParamJson }); $("#grid-table").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{ page: 1}]); //重載JQGrid });搜索功能主要通過postData向服務器端傳遞數據。后端獲取參數從而進行處理：
Dictionary<string, string> DicParam = new Dictionary<string, string>(); string Param = Convert.ToString(Request["Param"]); if (!string.IsNullOrEmpty(Param)) { System.Web.Script.Serialization.JavaScriptSerializer sr = new System.Web.Script.Serialization.JavaScriptSerializer(); DicParam = sr.Deserialize(Param, typeof(Dictionary<string, string>)) as Dictionary<string, string>; }這樣就獲取到了查詢參數的鍵值對，至于參數怎么用，一般都是用于sql的where子句。
三、更多jqGrid配置屬性說明
1、屬性
| 參數名稱 | 類型 | 描述 | 默認值 | 是否可以被修改 |
| ajaxGridOptions | object | 對ajax參數進行全局設置，可以覆蓋ajax事件：error，complete 和 beforeSend | 空值 | 是 |
| ajaxGridOptions | object | 對ajax參數進行全局設置 | 空值 | 是 |
| ajaxSelectOptions | object | 對ajax的select參數進行全局設置，設置editoptions跟searchoptions 參數的select屬性值 | 空值 | 是 |
| altclass | String | 用于表格行交替變色的class屬性。你可以定義自己的class來替代默認值。只有當altRows屬性設置為true時，該屬性才起作用 | ui-priority-secondary | 是，但需要重新加載 |
| altRows | boolean | 設置表格是否允許行交替變色值 | false | 是，需重新加載 |
| autoencode | boolean | 當為 ture 時對url進行編碼 | false | 是 |
| autowidth | boolean | 如果為ture時，則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動調整則需要實現函數：setGridWidth | false | 否 |
| caption | String | 定義表格名稱 | 空值 | 否，但是可以用api修改 |
| cellLayout | integer | 定義了單元格padding + border 寬度。通常不必修改此值。初始值為5，paddingLef?2+paddingRight?2+borderLeft?1=5 | 5 | 否 |
| cellEdit | boolean | 啟用或者禁用單元格編輯功能 | false | 是 |
| cellsubmit | String | 定義了單元格內容保存位置：“remote”，“clientArray” | ‘remote' | 是 |
| cellurl | String | 單元格提交的url | 空值 | 是 |
| colModel | array | 對顯示列屬性的設置，是一個數組對象。常用到的屬性：name 列顯示的名稱；index 傳到服務器端用來排序用的列名稱；width 列寬度；align 對齊方式；sortable 是否可以排序 | 空值 | 否 |
| colNames | array[] | 放置列名稱的數組，必須與colModel大小相同 | 空數組 | 否 |
| datastr | String | xmlstring或者jsonstring | 空值 | 是 |
| datatype | string | 從服務器端返回的數據類型，（表格期望接收的數據類型）。可選類型：xml，xmlstring，json，local，function | xml | 是 |
| deselectAfterSort | boolean | 只有當datatype為local時起作用。當排序時不選擇當前行 | true | 是 |
| direction | string | 表格中文字的顯示方向，從左向右（ltr）或者從右向左（rtr）。 | ltr | 否 |
| editurl | string | 定義對form編輯時的url | 空值 | 是 |
| emptyrecords | string | 當返回的數據行數為0時顯示的信息。只有當屬性 viewrecords 設置為ture時起作用 | 在語言包中 | 是 |
| ExpandColClick | boolean | 當為true時，點擊展開行的文本時，treeGrid就能展開或者收縮，不僅僅是點擊圖片 | true | 否 |
| ExpandColumn | string | 指定那列來展開tree grid，默認為第一列，只有在treeGrid為true時起作用 | 空值 | 否 |
| footerrow | boolean | 當為true時，會在翻頁欄之上增加一行 | false | 否 |
| forceFit | boolean | 當為ture時，調整列寬度不會改變表格的寬度。當shrinkToFit 為false時，此屬性會被忽略 | false | 否 |
| gridstate | string | 定義當前表格的狀態：'visible' or 'hidden' | visible | 否 |
| gridview | boolean | 構造一行數據后添加到grid中，如果設為true則是將整個表格的數據都構造完成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用 | false | 是 |
| height | mixed | 表格高度，可以是數字，像素值或者百分比 | 150 | 否 |
| hiddengrid | boolean | 當為ture時，表格不會被顯示，只顯示表格的標題。只有當點擊顯示表格的那個按鈕時才會去初始化表格數據。只有當caption 屬性不為空而且hidegrid為ture時才起作用 | false | 否 |
| hidegrid | boolean | 啟用或者禁用控制表格顯示、隱藏的按鈕，只有當caption 屬性不為空時起效 | true | 否 |
| hoverrows | boolean | 當為false時mouse hovering會被禁用 | false | 是 |
| jsonReader | array | 描述json期望數據格式的數組。 | 否 | |
| lastpage | integer | 只讀屬性，定義了總頁數 | 0 | 否 |
| lastsort | integer | 只讀屬性，定義了最后排序列的索引，從0開始 | 0 | 否 |
| loadonce | boolean | 如果為ture則數據只從服務器端抓取一次，之后所有操作都是在客戶端執行，翻頁功能會被禁用 | false | 否 |
| loadtext | string | 當請求或者排序時所顯示的文字內容 | Loading.... | 否 |
| loadui | string | 當執行ajax請求時要干什么。disable禁用ajax執行提示；enable默認，當執行ajax請求時的提示； block啟用Loading提示，但是阻止其他操作 | enable | 是 |
| mtype | string | 請求的類型：(“POST” or “GET”) | GET | 是 |
| multikey | string | 只有在multiselect設置為ture時起作用，定義使用那個key來做多選。shiftKey，altKey，ctrlKey | 空值 | 是 |
| multiboxonly | boolean | 只有當multiselect = true.起作用，當multiboxonly 為ture時只有選擇checkbox才會起作用， | false | 是 |
| multiselect | boolean | 定義是否可以多選 | false | 否 |
| multiselectWidth | integer | 當multiselect為true時設置multiselect列寬度 | 20 | 否 |
| page | integer | 設置初始的頁碼 | 1 | 是 |
| pager | mixed | 指定分頁欄對象，必須為一個有效的html元素。可以是'pager', '#pager', jQuery('#pager').推薦用'#pager' | 空值 | 否 |
| pagerpos | string | 指定分頁欄的位置 | center | 否 |
| pgbuttons | boolean | 是否顯示翻頁按鈕 | true | 否 |
| pginput | boolean | 是否顯示跳轉頁面的輸入框 | true | 否 |
| pgtext | string | 當前頁信息 | 語言包中設置 | 是 |
| prmNames | array | Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 當參數為null時不會被發到服務器端 | none | 是 |
| postData | array | 此數組內容直接賦值到url上，參數類型：{name1:value1…} | 空array | 是 |
| reccount | integer | 只讀屬性，定義了grid中確切的行數。通常情況下與records屬性相同，但有一種情況例外，假如rowNum=15，但是從服務器端返回的記錄數是20，那么records值是20，但reccount值仍然為15，而且表格中也只顯示15條記錄。 | 0 | 否 |
| recordpos | string | 定義了記錄信息的位置： left, center, right | right | 否 |
| records | integer | 只讀屬性，定義了返回的記錄數 | none | 否 |
| recordtext | string | 顯示記錄數信息。{0} 為記錄數開始，{1}為記錄數結束。 viewrecords為ture時才能起效，且總記錄數大于0時才會顯示此信息 | 語言包 | 是 |
| resizeclass | string | 定義一個class到一個列上用來顯示列寬度調整時的效果 | 空值 | 否 |
| rowList | array[] | 一個數組用來調整表格顯示的記錄數，此參數值會替代rowNum參數值傳給服務器端。如果為空則不顯示，設置格式：[10,20,30]。 | [] | 否 |
| rownumbers | boolean | 如果為ture則會在表格左邊新增一列，顯示行順序號，從1開始遞增。此列名為'rn'. | false | 否 |
| rowNum | integer | 設置表格中顯示的記錄數，參數會被自動傳到后臺。如果此參數設為10，但是從服務器端返回15條記錄，那么在表格中只會顯示10條記錄。如果設為-1則禁用此檢查 | 20 | 是 |
| rownumWidth | integer | 如果rownumbers為true，則可以設置column的寬度 | 25 | 否 |
| savedRow | array | 只讀屬性，只用在編輯模式下保存數據 | 空值 | 否 |
| scroll | boolean or integer | 創建一個動態滾動的表格，當為true時，翻頁欄被禁用，使用垂直滾動條加載數據，且在首次訪問服務器端時將加載所有數據到客戶端。當此參數為數字時，表格只控制可見的幾行，所有數據都在這幾行中加載 | false | 否 |
| scrollOffset | integer | 設置垂直滾動條寬度 | 18 | 否 |
| scrollrows | boolean | 當為true時讓所選擇的行可見 | false | 是 |
| selarrrow | array-[] | 只讀屬性，用來存放當前選擇的行 | empty array [] | 否 |
| selrow | string | 只讀屬性，最后選擇行的id | null | 否 |
| shrinkToFit | boolean | 此屬性用來說明當初始化列寬度時候的計算類型，如果為ture，則按比例初始化列寬度。如果為false，則列寬度使用colModel指定的寬度 | true | 否 |
| sortable | boolean | 是否可排序 | false | 否 |
| sortname | string | 排序列的名稱，此參數會被傳到后臺 | 空字符串 | 是 |
| sortorder | string | 排序順序，升序或者降序（asc or desc） | asc | 是 |
| subGrid | boolean | 是否使用suggrid | false | 否 |
| subGridModel | array-[] | subgrid模型 | empty array | 否 |
| subGridType | mixed | 如果為空則使用表格的dataType | null | 是 |
| subGridUrl | string | 加載subgrid數據的url，jqGrid會把每行的id值加到url中 | 空值 | 是 |
| subGridWidth | integer | subgrid列的寬度 | 20 | 否 |
| toolbar | array | 表 格的工具欄。數組中有兩個值，第一個為是否啟用，第二個指定工具欄位置（相對于body layer），如：[true,”both”] 。工具欄位置可選值：“top”,”bottom”, “both”. 如果工具欄在上面，則工具欄id為“t_”+表格id；如果在下面則為 “tb_”+表格id；如果只有一個工具欄則為 “t_”+表格id | [false,''] | 否 |
| totaltime | integer | 只讀屬性，計算加載數據的時間。目前支持xml跟json數據 | 0 | 否 |
| treedatatype | mixed | 數據類型，通常情況下與datatype相同，不會變 | null | 否 |
| treeGrid | boolean | 啟用或者禁用treegrid模式 | false | 否 |
| treeGridModel | string | treeGrid所使用的方法 | nested | 否 |
| treeIcons | array | 樹的圖標，默認值：{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | 否 | |
| treeReader | array | 擴展表格的colModel且加在colModel定義的后面 | 否 | |
| tree_root_level | numeric | root元素的級別， | 0 | 否 |
| url | string | url | null | 是 |
| userData | array | 從request中取得的一些用戶信息 | empty array | 否 |
| userDataOnFooter | boolean | 當為true時把userData放到底部，用法：如果userData的值與colModel的值相同，那么此列就顯示正確的值，如果不等那么此列就為空 | false | 是 |
| viewrecords | boolean | 是否要顯示總記錄數 | false | 否 |
| viewsortcols | array | 定 義排序列的外觀跟行為。數據格式：[false,'vertical',true].第一個參數是說，是否都要顯示排序列的圖標，false就是只顯示當 前排序列的圖標；第二個參數是指圖標如何顯示，vertical：排序圖標垂直放置，horizontal：排序圖標水平放置；第三個參數指單擊功 能，true：單擊列可排序，false：單擊圖標排序。說明：如果第三個參數為false則第一個參數必須為ture否則不能排序 | 否 | |
| width | number | 如果設置則按此設置為主，如果沒有設置則按colModel中定義的寬度計算 | none | 否 |
| xmlReader | array | 對xml數據結構的描述 | 否 |
| url | 獲取數據的地址 |
| datatype | 從服務器端返回的數據類型，默認xml。可選類型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside |
| mtype | ajax提交方式。POST或者GET，默認GET |
| colNames | 列顯示名稱，是一個數組對象。 |
| colModel | 對顯示列屬性的設置，是一個數組對象。常用到的屬性：name 列顯示的名稱；index 傳到服務器端用來排序用的列名稱；width 列寬度；align 對齊方式；sortable 是否可以排序 |
| pager | 定義翻頁用的導航欄，必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置 |
| rowNum | 在grid上顯示記錄條數，這個參數是要被傳遞到后臺 |
| rowList | 一個下拉選擇框，用來改變顯示記錄數，當選擇時會覆蓋rowNum參數傳遞到后臺 |
| sortname | 默認的排序列。可以是列名稱或者是一個數字，這個參數會被提交到后臺 |
| viewrecords | 定義是否要顯示總記錄數 |
| caption | 表格名稱 |
2、事件
| 事件 | 參數 | 描述 |
| afterInsertRow | rowid rowdata rowelem | 此事件發生在每次插入行后 rowid 為插入的行ID rowdata 是被插入行的數據數組。格式為name:value對，name在colModel定義 rowelem 是應答元素。xml為xml行，json為所有行數據。 注意：若gridview 為true，此事件不會發生 |
| beforeRequest | none | 此事件發生在任何數據請求前，但當datatype為function時不發生。 |
| beforeSelectRow | rowid, e | 此事件發生在用戶點擊行，選中該行前。 rowid 為行的ID，e為事件對象 該事件將返回布爾值true（行被選中）或false（行未被選中）。 |
| gridComplete | none | 此事件發生在表格所有數據裝入和進程完成后。與datatype參數及排序分頁等無關。 |
| loadBeforeSend | xhr, settings | 此事件發生在XMLHttpRequest被發送前，用于修改對象屬性（如headers）。 xhr 為XMLHttpRequest對象。 |
| loadComplete | data | 此事件發生在每個服務器請求后。xhr 為XMLHttpRequest對象。 |
| loadError | xhr, status, error | 此事件在請求失敗時發生。事件有3個參數： xhr 為XMLHttpRequest對象； Satus 為錯誤類型描述；error 為錯誤對象。 |
| onCellSelect | rowid, iCol, cellcontent, e | 此事件在點擊表格特定單元格時發生。 rowid 為行ID；iCol 為列索引； cellcontent 為單元格中內容； e 點擊事件對象。 |
| ondblClickRow | rowid, iRow, iCol, e | 此事件發生在行雙擊后發生。 rowid為行ID；iRow 為行索引（勿與rowid混淆）； iCol為列索引； e 為事件對象。 |
| onHeaderClick | gridstate | 此事件發生在點擊顯示或隱藏表格后發生（hidegrid為true） gridstate為表格狀態，有visible和hidden兩個值 |
| onPaging | pgButton | 此事件發生在點擊page button后，填充數據前，及用戶輸入一個與當前頁頁碼不同的新頁碼并回車時。 |
| onRightClickRow | rowid, iRow, iCol, e | 此事件發生在右擊行后。（此事件在Opera瀏覽器中無效） rowid為行ID；iRow為行索引（勿與rowid混淆） iCol為列索引； e為事件對象 |
| onSelectAll | aRowids, status | 此事件發生在點擊標題的復選框時發生（multiselect為true） aRowids 選定行ID的數組（哪些行的復選框與頭復選框相同） status 頭復選框的選定的布爾值，true為選中，false為 |
| onSelectRow | rowid, status | 此事件發生在行點擊后 rowid 為行ID； status 為選擇狀態。當multiselect為true時使用，當行被選中時返回true；為選中時返回false。 |
| onSortCol | index, iCol, sortorder | 此事件發生在列排序被點擊之后，數據排序前 index 為colModel 中定義的索引名iCol 為列的索引號 sortorder 為新的排序方式，asc或desc |
| resizeStart | event, index | 此事件發生在列被重新定義寬度時。 event 為事件對象；index 為在colModel 中定義的列索引。 |
| resizeStop | newwidth, index | 此事件發生在列被重新定義寬度后。 newwidth 為新的列寬度；index 為在colModel 中定義的列索引。 |
| serializeGridData | postData | 通過此事件可以序列化傳遞給ajax請求的的數據。此事件將返回一個以序列化的數據。若有自定義的數據（如JSON字符串、XML字符串）要發給服務器時，可使用該事件。 |
3、方法
| 方法 | 參數 | 返回值 | 描述 |
| addJSONData | data | none | 用傳遞的data（數組）填充網格。用法：假如我們從web服務器獲得的數據（jsonresponse），則 var mygrid = jQuery(”#”+grid_id)[0]; var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; 將填充網格。當然，myjsongrid中的數據在傳遞到addJSONData之前可以被操作。 |
| addRowData | rowid, data, position, srcrowid | true on success, false otherwise | 插入一新行，rowid 為新行的ID，data（數組）為新行數據，position為新行插入的位置（first為表頭，last為表尾，srcrowid指定偏移位置）。Data數組的格式為：{name1:value1,name2: value2…} ，name為colModel指定的名稱。 |
| addXmlData | data | none | 用傳入的data填充網格。用法：假如我們從web服務器獲得數據 (xmlresponse)，則 var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML); 將填充網格。當然，xmlresponse中的數據在傳遞到addXmlData之前可以被操作。 |
| clearGridData | clearfooter | jqGrid object | 清除網格中當前裝入的數據，如果clearfooter 參數為true，則清除網格最后一行數據。 |
| delRowData | rowid | true on success, false otherwise | 刪除id = rowid的行。但不會刪除服務器上的數據。 |
| footerData | action, data, format | jqGrid object | 此方法獲得或設置網格底部數據。 action 主站蜘蛛池模板： 榕江县| 会同县| 奇台县| 交口县| 随州市| 桃源县| 云浮市| 商河县| 库车县| 宣汉县| 海南省| 揭西县| 图片| 静安区| 商洛市| 鄂托克前旗| 曲周县| 安乡县| 桂东县| 邹平县| 电白县| 阳东县| 赣榆县| 临城县| 灵山县| 高阳县| 靖远县| 东方市| 高邑县| 高台县| 东丰县| 富宁县| 东丰县| 上虞市| 鲁甸县| 施甸县| 蓬安县| 平昌县| 濉溪县| 建德市| 拜泉县| |