jqGrid皮膚
從3.5版本開始，jqGrid完全支持jquery UI的theme。我們可以從http://jqueryui.com/themeroller/下載我們所需要的theme。當然，你也可以編輯自己的theme。jqGrid
也並不需要把所有的css文件都引入進來，只需導入核心css文件“ui.theme.css ” 以及“ui.core.css”即可，文件位於目錄development-bundle/themes下。
jqGrid原理
jqGrid是典型的B/S架構，服務器端只是提供數據管理，客戶端只提供數據顯示。換句話說，jqGrid可以以一種更加簡單的方式來展現你數據庫的信息，而且也可以把客戶端數據傳回給服務器端。
對於jqGrid我們所關心的就是：必須有一段代碼把一些頁面信息保存到數據庫中，而且也能夠把響應信息返回給客戶端。jqGrid是用ajax來實現對請求與響應的處理。
jqGrid參數
| 名稱 |
類型 |
描述 |
默認值 |
可修改 |
| url |
string |
獲取數據的地址 |
|
|
| datatype |
string |
從服務器端返回的數據類型，默認xml。可選類型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside |
|
|
| mtype |
string |
ajax提交方式。POST或者GET，默認GET |
|
|
| colNames |
Array |
列顯示名稱，是一個數組對象 |
|
|
| colModel |
Array |
常用到的屬性：name 列顯示的名稱；index 傳到服務器端用來排序用的列名稱；width 列寬度；align 對齊方式；sortable 是否可以排序 |
|
|
| pager |
string |
定義翻頁用的導航欄，必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位置 |
|
|
| rowNum |
int |
在grid上顯示記錄條數，這個參數是要被傳遞到后台 |
|
|
| rowList |
array |
一個下拉選擇框，用來改變顯示記錄數，當選擇時會覆蓋rowNum參數傳遞到后台 |
|
|
| sortname |
string |
默認的排序列。可以是列名稱或者是一個數字，這個參數會被提交到后台 |
|
|
| viewrecords |
boolean |
定義是否要顯示總記錄數 |
|
|
| caption |
string |
表格名稱 |
|
|
| object |
對ajax參數進行全局設置，可以覆蓋ajax事件 |
null |
是 |
|
| object |
對ajax的select參數進行全局設置 |
null |
是 |
|
| altclass |
String |
用來指定行顯示的css，可以編輯自己的css文件，只有當altRows設為 ture時起作用 |
ui-priority-secondary |
|
| altRows |
boolean |
設置表格 zebra-striped 值 |
|
|
| autoencode |
boolean |
對url進行編碼 |
false |
是 |
| autowidth |
boolean |
如果為ture時，則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動調整則需要實現函數：setGridWidth |
false |
否 |
| cellLayout |
integer |
定義了單元格padding + border 寬度。通常不必修改此值。初始值為 |
5 |
是 |
| cellEdit |
boolean |
啟用或者禁用單元格編輯功能 |
false |
是 |
| cellsubmit |
String |
定義了單元格內容保存位置 |
‘remote’ |
是 |
| cellurl |
String |
單元格提交的url |
空值 |
是 |
| datastr |
String |
xmlstring或者jsonstring |
空值 |
是 |
| 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時起作用 |
空值 |
否 |
| 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時，表格不會被顯示，只顯示表格的標題。只有當點擊顯示表格的那個按鈕時才會去初始化表格數據。 |
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 |
是 |
| 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 |
是 |
| 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參數值傳給服務器端。 |
[] |
否 |
| rownumbers |
boolean |
如果為ture則會在表格左邊新增一列，顯示行順序號，從1開始遞增。此列名為'rn'. |
false |
否 |
| rownumWidth |
integer |
如果rownumbers為true，則可以設置column的寬度 |
25 |
否 |
| savedRow |
array |
只讀屬性，只用在編輯模式下保存數據 |
空值 |
否 |
| scroll |
boolean |
創建一個動態滾動的表格，當為true時，翻頁欄被禁用，使用垂直滾動條加載數據，且在首次訪問服務器端時將加載所有數據到客戶端。當此參數為數字時，表格只控制可見的幾行，所有數據都在這幾行中加載 |
false |
否 |
| scrollOffset |
integer |
設置垂直滾動條寬度 |
18 |
否 |
| scrollrows |
boolean |
當為true時讓所選擇的行可見 |
false |
是 |
| selarrrow |
array |
只讀屬性，用來存放當前選擇的行 |
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模型 |
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 |
r oot元素的級別， |
0 |
否 |
| userData |
array |
從request中取得的一些用戶信息 |
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數據結構的描述 |
|
否 |
Jqgrid學習 -------ColModel API
ColModel 是jqGrid里最重要的一個屬性，設置表格列的屬性。
| 屬性 |
數據類型 |
備注 |
默認值 |
| align |
string |
left, center, right. |
left |
| classes |
string |
設置列的css。多個class之間用空格分隔，如：'class1 class2' 。表格默認的css屬性是ui-ellipsis |
empty string |
| datefmt |
string |
”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日. |
ISO Date (Y-m-d) |
| defval |
string |
查詢字段的默認值 |
空 |
| editable |
boolean |
單元格是否可編輯 |
false |
| editoptions |
array |
編輯的一系列選項。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}},這個是演示動態從服務器端獲取數據。 |
empty |
| editrules |
array |
編輯的規則{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},設定 年齡的最大值為100，最小值為10，而且為數字類型，並且為必輸字段。 |
empty |
| edittype |
string |
可以編輯的類型。可選值：text, textarea, select, checkbox, password, button, image and file. |
text |
| fixed |
boolean |
列寬度是否要固定不可變 |
false |
| formoptions |
array |
對於form進行編輯時的屬性設置 |
empty |
| formatoptions |
array |
對某些列進行格式化的設置 |
none |
| formatter |
mixed |
對列進行格式化時設置的函數名或者類型 {name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){ |
none |
| hidedlg |
boolean |
是否顯示或者隱藏此列 |
false |
| hidden |
boolean |
在初始化表格時是否要隱藏此列 |
false |
| index |
string |
索引。其和后台交互的參數為sidx |
empty |
| jsonmap |
string |
定義了返回的json數據映射 |
none |
| key |
boolean |
當從服務器端返回的數據中沒有id時，將此作為唯一rowid使用只有一個列可以做這項設置。如果設置多於一個，那么只選取第一個，其他被忽略 |
false |
| label |
string |
如果colNames為空則用此值來作為列的顯示名稱，如果都沒有設置則使用name 值 |
none |
| name |
string |
表格列的名稱，所有關鍵字，保留字都不能作為名稱使用包括subgrid, cb and rn. |
Required |
| resizable |
boolean |
是否可以被resizable |
true |
| search |
boolean |
在搜索模式下，定義此列是否可以作為搜索列 |
true |
| searchoptions |
array |
設置搜索參數 |
empty |
| sortable |
boolean |
是否可排序 |
true |
| sorttype |
string |
用在當datatype為local時，定義搜索列的類型，可選值：int/integer - 對integer排序float/number/currency - 排序數字date - 排序日期text - 排序文本 |
text |
| stype |
string |
定義搜索元素的類型 |
text |
| surl |
string |
搜索數據時的url |
empty |
| width |
number |
默認列的寬度，只能是象素值，不能是百分比 |
150 |
| xmlmap |
string |
定義當前列跟返回的xml數據之間的映射關系 |
none |
| unformat |
function |
‘unformat’單元格值 |
null |
Jqgrid學習 -------數據
jqGrid可支持的數據類型：xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。
Jqgrid學習 -------事件
| 事件 |
參數 |
備注 |
| afterInsertRow |
rowidrowdatarowelem |
當插入每行時觸發。rowid插入當前行的id；rowdata插入行的數據，格式為name: value，name為colModel中的名字 |
| beforeRequest |
none |
向服務器端發起請求之前觸發此事件但如果datatype是一個function時例外 |
| beforeSelectRow |
rowid, e |
當用戶點擊當前行在未選擇此行時觸發。rowid：此行id；e：事件對象。返回值為ture或者false。如果返回true則選擇完成，如果返回false則不會選擇此行也不會觸發其他事件 |
| gridComplete |
none |
當表格所有數據都加載完成而且其他的處理也都完成時觸發此事件，排序，翻頁同樣也會觸發此事件 |
| loadComplete |
xhr |
當從服務器返回響應時執行，xhr：XMLHttpRequest 對象 |
| loadError |
xhr,status,error |
如果請求服務器失敗則調用此方法。xhr：XMLHttpRequest 對象；satus：錯誤類型，字符串類型；error：exception對象 |
| onCellSelect |
rowid,iCol,cellcontent,e |
當點擊單元格時觸發。rowid：當前行id；iCol：當前單元格索引；cellContent：當前單元格內容；e：event對象 |
| ondblClickRow |
rowid,iRow,iCol,e |
雙擊行時觸發。rowid：當前行id；iRow：當前行索引位置；iCol：當前單元格位置索引；e:event對象 |
| onHeaderClick |
gridstate |
當點擊顯示/隱藏表格的那個按鈕時觸發；gridstate：表格狀態，可選值：visible or hidden |
| onPaging |
pgButton |
點擊翻頁按鈕填充數據之前觸發此事件，同樣當輸入頁碼跳轉頁面時也會觸發此事件 |
| onRightClickRow |
rowid,iRow,iCol,e |
在行上右擊鼠標時觸發此事件。rowid：當前行id；iRow：當前行位置索引；iCol：當前單元格位置索引；e：event對象 |
| onSelectAll |
aRowids,status |
multiselect為ture，且點擊頭部的checkbox時才會觸發此事件。aRowids：所有選中行的id集合，為一個數組。status：boolean變量說明checkbox的選擇狀態，true選中false不選中。無論checkbox是否選擇，aRowids始終有 值 |
| onSelectRow |
rowid,status |
當選擇行時觸發此事件。rowid：當前行id；status：選擇狀態，當multiselect 為true時此參數才可用 |
| onSortCol |
index,iCol,sortorder |
當點擊排序列但是數據還未進行變化時觸發此事件。index：name在colModel中位置索引；iCol：當前單元格位置索引；sortorder：排序狀態：desc或者asc |
| resizeStart |
event, index |
當開始改變一個列寬度時觸發此事件。event：event對象；index：當前列在colModel中位置索引 |
| resizeStop |
newwidth, index |
當列寬度改變之后觸發此事件。newwidth：列改變后的寬度；index：當前列在colModel中的位置索引 |
| serializeGridData |
postData |
向服務器發起請求時會把數據進行序列化，用戶自定義數據也可以被提交到服務器端
|
Jqgrid學習 -------方法
jqGrid方法
| 方法名 |
參數 |
返回值 |
說明 |
| addJSONData |
data |
none |
使用傳來的data數據填充表格。使用方法： var mygrid = jQuery(”#”+grid_id)[0]; var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; |
| addRowData |
rowid,data, position, srcrowid |
成功為true, 否則為false |
根據參數插入一行新的數據，rowid為新行的id，data為新行的數據，position為新增行的位置，srcrowid為新增行的參考位置。data數據格式：{name1:value1,name2: value2…} name為在colModel中指定的名稱 |
| addXMLData |
data |
none |
根據傳來的數據填充表格。用法：var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML); |
| clearGridData |
clearfooter |
jqGrid對象 |
清除表格當前加載的數據。如果clearfooter為true時則此方法刪除表格最后一行的數據 |
| delRowData |
rowid |
成功為true否則為false |
根據rowid刪除行，但不會從服務器端刪除數據 |
| footerData |
action,data, format |
jgGrid對象 |
設置或者取得底部數據。action：“get”或者“set”，默認為“get”，如果為“get”返回值為name:value，name為colModel中名稱。如果為“set”則值為name：value，name是colModel中的名稱。format：默認為true，當為 true時，在設置新值時會調用formatter格式化數值 |
| getCell |
rowid, iCol |
單元格內容 |
返回指定rowid，iCol的單元格內容，iCol既可以是當前列在colModel中的位置索引也可以是name值。注意：在編輯行或者單元格時不能使用此方法，此時返回的並不是改變的值，而是原始值 |
| getCol |
colname, returntype, mathoperation |
array[] or value |
返回列的值。colname既可以是當前列在colModel中的位置索引也可以是name值。returntype指定返回數據的類型，默認為 false。當為false時，返回的數組中只包含列的值，當為true時返回數組是對象數組，具體格式 {id:rowid, value:cellvalue} ，id為行的id，value為列的值。如： [{id:1,value:1},{id:2,value:2}…]。mathoperation 可選值為'sum, 'avg', 'count' |
| getDataIDs |
none |
array[] |
返回當前grid里所有數據的id |
| getGridParam |
name |
mixed value |
返回請求的參數信息 |
| getInd |
rowid,rowcontent |
mixed |
如果rowcontent為false，返回行所在的索引位置，id為行id。rowcontent默認為false。如果rowconent為ture則返回的為行對象，如果找不到行則返回false |
| getRowData |
rowid or none |
array[] |
返回指定行的數據，返回數據類型為name:value，name為colModel中的名稱，value為所在行的列的值，如果根據rowid找不到則返回空。在編輯模式下不能用此方法來獲取數據，它得到的並不是編輯后的值 |
| hideCol |
colnameor[colnames] |
jqGrid對象 |
如果參數為一個列名則隱藏此列，如果給定的是數組則隱藏指定的所有列。格式： [“name1”,”name2”] |
| remapColumns |
permutation, updateCells, keepHeader |
none |
調整表格列的顯示順序,permutation為當前列的順序，假如值是[1,0,2]，那么第一列就會在第二位顯示。如果updateCells為ture則是對單元格數據進行重新排序，如果keepHeader為true則對header數據顯示位置進行調整 |
| resetSelection |
none |
jqGrid對象 |
選擇或者反選行數據，在多選模式下也同樣起作用 |
| setCaption |
caption |
jqGrid對象 |
設置表格的標題 |
| setCell |
rowid,colname, data, class, properties |
jqGrid對象 |
改變單元格的值。rowid：當前行id；colname：列名稱，也可以是列的位置索引，從0開始；data：改變單元格的內容，如果為空則不更新；class：如果是string則會使用addClass方法將其加入到單元格的css中，如果是array則會直接加到style屬性 中；properties：設置單元格屬性 |
| setGridParam |
object |
jqGrid對象 |
設置grid的參數。有些參數的修改必須要重新加載grid才可以生效，這個方法可以覆蓋事件 |
| setGridHeight |
new_height |
jqGrid對象 |
動態改變grid的高度，只能對單元格的高度進行設置而不能對表格的高度進行動態修改。new_height：可以是象素值，百分比或者"auto" |
| setGridWidth |
new_width,shrink |
jqGrid對象 |
動態改變表格的寬度。new_width:表格寬度，象素值；shrink：true或者false，作用同shrinkToFit |
| setLabel |
colname, data, class, properties |
jqGrid對象 |
給指定列設置一個新的顯示名稱。colname：列名稱，也可以是列的位置索引，從0開始；data：列顯示名稱，如果為空則不修改；class：如果是 string則會使用addClass方法將其加入到單元格的css中，如果是array則會直接加到style屬性中；properties：設置label的屬性 |
| setRowData |
rowid,data, cssprop |
成功true否則false |
更新行的值，rowid為行id。data值格式：{name1:value1,name2: value2…} name為colModel中名稱；cssprop：如果是string則會使用addClass方法將其加入到行的css中，如果是array或者對象 則會直接加到style屬性中 |
| setSelection |
rowid,onselectrow |
jqGrid對象 |
選擇或反選指定行。如果onselectrow為ture則會觸發事件onSelectRow，onselectrow默認為ture |
| showCol |
colname |
jqGrid |
顯示列。colname可以是數組[“name1”,”name2”],但是name1或者name2必須是colModel中的name |
| trigger(“reloadGrid”) |
none |
jqGrid對象 |
重新加載當前表格，也會向服務器發起新的請求 |
| updateColumns |
none |
none |
同步表格的寬度，用在表格拖拽時，用法：var mygrid=jQuery(”#grid_id”)[0];mygrid.updateColumns(); |
jqGrid的通用方法和設置
這些方法並不和jqGrid對象綁定，可以隨意使用：
jQuery.jgrid.jqGridFunction( parameter1,...parameterN );
| 函數名 |
參數 |
返回值 |
說明 |
| ajaxOptions |
空對象 |
none |
這個函數可以改變jqgrid中用到的ajax請求參數，這個函數可以覆蓋當前所有ajax請求設置。從3.6版本開始起有3個級別的ajax設置：第一 個級別就是在模塊中設置ajax請求；第二個級別就是通過此函數設置；第三級別的設置是控制全局ajax請求的設置：jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds)); 當然我們也可以單獨設置ajax的參數 |
| jqID |
string |
解析后的string |
轉義字符串，把兩個反斜杠(\\)轉化為單個反斜杠(\) |
| jgrid.htmlDecode |
string |
轉換后string |
把轉碼后的字符串還原 |
| jgrid.htmlEncode |
string |
編碼后的string |
把字符串編碼 |
| jgrid.format |
string |
格式化后string |
簡單字符串模板。用法：Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4,result : “Please enter a value between 4 and 8.” |
| jgrid.getCellIndex |
cell |
index |
這個方法是用來修復在ie7里的一個bug |
| jgrid.stringToDoc |
xmlstring |
xmlDoc |
把xmlstring轉換為dom對象 |
| jgrid.stripHtml |
content |
new_content |
去掉html標簽返回標簽中內容 |
| jgrid.parse |
jsonstring |
對象 |
把一個jsonstring轉換為json對象 |
jqGrid的方法
| 方法名 |
參數 |
返回值 |
說明 |
| filterGrid |
grid_id,params |
HTML對象 |
構造jqGrid的查詢界面。grid_id:表格id；params：參數 |
| filterToolbar |
params |
jqGrid對象 |
同上。不同的是搜索輸入框在header層下方 |
| getColProp |
colname |
array |
返回指定列的屬性集合。name為colModel中名稱 |
| GridDestroy |
grid_id |
boolean |
從dom上刪除此grid |
| GridUnload |
grid_id |
boolean |
跟GridDestroy不同的是table對象跟pager對象並不會被刪除，以便下次使用 |
| setGridState |
state |
jqGrid對象 |
設置grid的狀態，顯示或者隱藏。這個方法不會觸發onHeaderClick事件。 |
| setColProp |
colname, properties |
jqGrid對象 |
設置新的屬性，對於動態改變列屬性是非常有用的，但是有些屬性的修改並不會起效。用法：jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}}); |
| sortGrid |
colname, reload |
jqGrid對象 |
按指定列進行排序。效果同setGridParam({sortname:'myname'}).trigger('reloadGrid'). 如果reload為true則會重新加載數據 |
| updateGridRows |
data,rowidname,jsonreader |
boolean |
修改表格中某行的數據，data數據格式：[{name:value,name1:value1…}, {name:value,name2:value2…}]，name為colModel中的名稱；rowidname某行的名稱。 jsonreader：boolean值，默認false。如果為true則是定義數據的格式，data的值並不是name：value形式而只是 value |
Jqgrid學習 -------搜索工具欄
搜索工具欄只是在列標題下面構造一個輸入框。且使用表格的url進行搜索記錄，發到服務器端數據格式為name:value，而且是附加在postData之后。
jQuery("#grid_id").filterToolbar(options);
jQuery("#grid_id").jqGrid('filterToolbar',options);
options：參數
| 可選參數 |
類型 |
描述 |
默認值 |
| autosearch |
boolean |
查詢規則，如果是text類型則是當按下回車鍵才去執行查詢；如果是select類型的查詢則當值改變時就去執行查詢 |
true |
| beforeSearch |
function |
執行查詢之前觸發此事件 |
null |
| afterSearch |
function |
查詢完成后觸發事件 |
null |
| beforeClear |
function |
清空查詢條件值時觸發事件 |
null |
| afterClear |
function |
清空查詢條件后觸發事件 |
null |
方法：
| 方法 |
描述 |
| triggerToolbar |
執行查詢時調用此方法 |
| clearToolbar |
當清空查詢條件值時觸發此函數 |
| toggleToolbar |
Toggeles工具欄 |
Jqgrid學習 -------自定義搜索
<div id="mysearch"></div>
jQuery("#mysearch").filterGrid('#grid_id',options);
options：參數
| 參數 |
描述 |
默認值 |
| gridModel |
當為ture我們會使用colModel中的屬性構造查詢條件，所用到的參數：name, index, edittype, editoptions, search.還有一個參數：defval：查詢條件的默認值；surl：當edittype:'select'時獲取select數據的url，格 式：<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select> |
false |
| gridNames |
gridModel為true時起效，設置查詢列的名稱 |
false |
| filterModel |
gridModel為false時起效，格式：{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。label：字段顯示名稱；name：列名；stype：輸入框類型，text或者select；surl：獲取select數據的地 址，要求的內容為html格式：<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>；sopt：同editoptions |
[] |
| formtype |
定義表單如何被構造，'horizontal' or 'vertical' |
|
| autosearch |
如果為true:當點擊回車鍵觸發查詢；當select值變化時觸發查詢 |
|
| formclass |
可以使用的css |
filterform |
| tableclass |
可以使用到table上的css |
filtertable |
| buttonclass |
按鈕上使用的css |
filterbutton |
| searchButton |
搜索按鈕 |
Search |
| clearButton |
清空數據的按鈕 |
Clear |
| enableSearch |
啟用禁用搜索按鈕 |
false |
| enableClear |
啟用禁用清空按鈕 |
false |
| beforeSearch |
搜索之前觸發的事件 |
null |
| afterSearch |
搜索完成之后觸發的事件 |
null |
| beforeClear |
清空數據之前觸發的事件 |
null |
| afterClear |
清空數據之后觸發事件 |
null |
| url |
搜索數據的url |
‘’ |
| marksearched |
當為true時，每次查詢之后所有查詢的列都標記為可查詢列 |
true
|