下面是轉自其他人blog的一個學習資料，與其說是學習資料，說成查詢幫助文檔更加合適。
jqGrid學習之 ------------- 安裝
jqGrid安裝很簡單，只需把相應的css、js文件加入到頁面中即可。
按照官網文檔:
/myproject/css/
ui.jqgrid.css
/ui-lightness/
/images/
jquery-ui-1.7.2.custom.css
/myproject/js/
/i18n/
grid.locale-bg.js
list of all language files
….
Changes.txt
jquery-1.3.2.min.js
jquery.jqGrid.min.js
在頁面中寫法：
Java代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
需要說明的是，jquery-ui的字體大小與jqgrid字體大小不一致，故需要在頁面上在加上一段
style來指定頁面上文字大小。
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 (…)。
Json數據
需要定義jsonReader來跟服務器端返回的數據做對應，其默認值：
· jsonReader : {
· root: "rows",
· page: "page",
· total: "total",
· records: "records",
· repeatitems: true,
· cell: "cell",
· id: "id",
· userdata: "userdata",
· subgrid: {root:"rows",
· repeatitems: true,
· cell:"cell"
· }
這樣服務器端返回的數據格式：
· {
· total: "xxx",
· page: "yyy",
· records: "zzz",
· rows : [
· {id:"1", cell:["cell11", "cell12", "cell13"]},
· {id:"2", cell:["cell21", "cell22", "cell23"]},
· ...
· ]
· }
jsonReader的屬性
|
total |
總頁數 |
|
page |
當前頁 |
|
records |
查詢出的記錄數 |
|
rows |
包含實際數據的數組 |
|
id |
行id |
|
cell |
當前行的所有單元格 |
自定義：
· jQuery("#gridid").jqGrid({
· ...
· jsonReader : {
· root:"invdata",
· page: "currpage",
· total: "totalpages",
· records: "totalrecords",
· cell: "invrow"
· },
· ...
· });
· totalpages: "xxx",
· currpage: "yyy",
· totalrecords: "zzz",
· invdata : [
· {id:"1", invrow:["cell11", "cell12", "cell13"]},
· {id:"2", invrow:["cell21", "cell22", "cell23"]},
· ...
· ]
repeatitems
指明每行的數據是可以重複的，如果設爲false，則會從返回的數據中按名字來搜索元素，這個名字就是colModel中的名字
· jsonReader : {
· root:"invdata",
· page: "currpage",
· total: "totalpages",
· records: "totalrecords",
· repeatitems: false,
· id: "0"
· }
· totalpages: "xxx",
· currpage: "yyy",
· totalrecords: "zzz",
· invdata : [
· {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
· {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
· ...
· ]
此例中，id屬性值爲“invid”。
一旦當此屬性設爲false時，我們就不必把所有在colModel定義的name值都賦值。因爲是按name來進行搜索元素的，所以他的排序也不是按colModel中指定的排序結果。
用戶數據（user data）
在某些情況下，我們需要從服務器端返回一些參數但並不想直接把他們顯示到表格中，而是想在別的地方顯示，那麼我們就需要用到userdata標籤
· jsonReader: {
· ...
· userdata: "userdata",
· ...
· }
· {
· total: "xxx",
· page: "yyy",
· records: "zzz",
· userdata: {totalinvoice:240.00, tax:40.00},
· rows : [
· {id:"1", cell:["cell11", "cell12", "cell13"]},
· {id:"2", cell:["cell21", "cell22", "cell23"]},
· ...
· ]
· }
在客戶端我們可以有下面兩種方法得到這些額外信息：
1. jQuery("grid_id").getGridParam('userData')
2. jQuery("grid_id").getUserData()
3. jQuery("grid_id").getUserDataItem( key )
Jqgrid學習 -------事件
· var lastSel;
· jQuery("#gridid").jqGrid({
· ...
· onSelectRow: function(id){
· if(id && id!==lastSel){
· jQuery('#gridid').restoreRow(lastSel);
· lastSel=id;
· }
· jQuery('#gridid').editRow(id, true);
· },
· ...
· })
|
事件 |
參數 |
備註 |
|
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的方法，從3.6開始已經完全兼容jQuery UI庫。
jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");
如果使用新的API：
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
jqGrid配置使用新的api
· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
· <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
· <head>
· <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
· <title>My First Grid</title>
·
· <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
· <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
·
· <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
· <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
· <script type="text/javascript">
· jQuery.jgrid.no_legacy_api = true;
· </script>
· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
·
· </head>
· <body>
· ...
· </body>
· </html>
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學習 -------配置 json
IE8，FF3以及Chrome 3已經支持JSON，配置：
· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
· <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
· <head>
· <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
· <title>My First Grid</title>
·
· <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
· <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
·
· <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
· <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
· <script type="text/javascript">
· jQuery.jgrid.useJSON = true;
· </script>
· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
·
· </head>
· <body>
· ...
· </body>
· </html>
這段代碼要放到語言包之後jqGrid.js文件之前。
如果瀏覽器不支持JSON，那麼我們只能用eval函數解析json。
除了jqGrid本身提供對json的類庫外，我們可以使用JSON.parse來處理JSON，配置如下：
· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
· <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
· <head>
· <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
· <title>My First Grid</title>
·
· <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
· <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
·
· <script src="js/json2.js" type="text/javascript"></script>
· <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
· <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
· <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
· <script type="text/javascript">
· jQuery.extend(jQuery.jgrid,{
· parse:function(jsstring) {
· return JSON.parse(jsstring);
· }
· });
· </script>
·
· </head>
· <body>
· ...
· </body>
· </html>
Jqgrid學習 -------翻頁
jqGrid的翻頁要定義在html裏，通常是在grid的下面，且是一個div對象：
· <table id="list"></table>
· <div id="gridpager"></div>
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· });
不必給翻頁設置任何的css屬性。在jqGrid裏定義的翻頁可以是：:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推薦使用前兩個，當使用其他方式時jqGrid的導入導出功能時會引起錯誤。
導航欄的屬性：
· $.jgrid = {
· defaults : {
· recordtext: "View {0} - {1} of {2}",
· emptyrecords: "No records to view",
· loadtext: "Loading...",
· pgtext : "Page {0} of {1}"
· },
· ...
· }
如果想改變這些設置：
1． jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
2． jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
emptyrecords: "Nothing to display",
...
});
導航欄的屬性：
|
屬性名 |
類型 |
說明 |
默認值 |
是否可以被修改 |
|
lastpage |
integer |
只讀屬性，總頁數 |
0 |
NO |
|
pager |
mixed |
導航欄對象，必須是一個有效的html元素，位置可以隨意 |
空字符串 |
NO |
|
pagerpos |
string |
定義導航欄的位置，默認分爲三部分：翻頁，導航工具及記錄信息 |
center |
NO |
|
pgbuttons |
boolean |
是否顯示翻頁按鈕 |
true |
NO |
|
pginput |
boolean |
是否顯示跳轉頁面的輸入框 |
true |
NO |
|
pgtext |
string |
頁面信息，第一個值是當前頁第二個值是總頁數 |
語言包 |
YES |
|
reccount |
integer |
只讀屬性，實際記錄數，千萬不能跟records 參數搞混了，通常情況下他們是相同的，假如我們定義rowNum=15，但我們從服務器端返回的記錄爲20即records=20，而reccount=15，表格中也顯示15條記錄 |
0 |
NO |
|
recordpos |
string |
定義記錄信息的位置，可選值：left, center, right |
right |
NO |
|
records |
integer |
只讀屬性，從服務器端返回的記錄數 |
none |
NO |
|
recordtext |
string |
顯示記錄的信息，只有當viewrecords爲true時起效，且記錄數必須大於0 |
語言包 |
yes |
|
rowList |
array |
可以改變表格可以顯示的記錄數，格式爲[10,20,30] |
array |
no |
|
rowNum |
integer |
設置表格可以顯示的記錄數 |
20 |
yes |
|
viewrecords |
boolean |
是否要顯示總記錄數信息 |
false |
no |
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
跟翻頁相關的事件只有一個：onPaging
|
onPaging |
pgButton |
當點擊翻頁按鈕但還爲展現數據時觸發此事件，當然這跳轉欄輸入頁碼改變頁時也同樣觸發此事件。參數pgButton可選值： first,last,prev,next |
|
|
jqGrid的翻頁導航是一個方法，你可以事先定義一些其他操作，比如：編輯、新增、刪除及搜索。也可以增加自定義的函數。導航工具欄是定義到翻頁控件上的。定義如下：
· <body>
· ...
· <table id="list"></table>
· <div id="gridpager"></div>
· ...
· </body>
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· });
· jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· });
· jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
· ...
grid_id ：表格id
gridpager ：導航欄id
parameters ：參數列表
prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件
· $.jgrid = {
· ...
· search : {
· caption: "Search...",
· Find: "Find",
· Reset: "Reset",
· odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
· groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
· matchText: " match",
· rulesText: " rules"
· },
· edit : {
· addCaption: "Add Record",
· editCaption: "Edit Record",
· bSubmit: "Submit",
· bCancel: "Cancel",
· bClose: "Close",
· saveData: "Data has been changed! Save changes?",
· bYes : "Yes",
· bNo : "No",
· bExit : "Cancel",
· },
· view : {
· caption: "View Record",
· bClose: "Close"
· },
· del : {
· caption: "Delete",
· msg: "Delete selected record(s)?",
· bSubmit: "Delete",
· bCancel: "Cancel"
· },
· nav : {
· edittext: "",
· edittitle: "Edit selected row",
· addtext:"",
· addtitle: "Add new row",
· deltext: "",
· deltitle: "Delete selected row",
· searchtext: "",
· searchtitle: "Find records",
· refreshtext: "",
· refreshtitle: "Reload Grid",
· alertcap: "Warning",
· alerttext: "Please, select row",
· viewtext: "",
· viewtitle: "View selected row"
· },
· ...
|
屬性 |
類型 |
說明 |
默認值 |
|
add |
boolean |
是否啓用新增功能，當點擊按鈕時會觸發editGridRow事件 |
true |
|
addicon |
string |
給新增功能設置圖標，只有UI theme裏的圖標纔可以使用 |
ui-icon-plus |
|
addtext |
string |
新增按鈕上的文字 |
空 |
|
addtitle |
string |
當鼠標移到新增按鈕上時顯示的提示 |
新增一行 |
|
alertcap |
string |
當我們edit,delete or view一行記錄時出現的提示信息 |
警告 |
|
alerttext |
string |
當edit,delete or view一行記錄時的文本提示 |
請選擇一行記錄 |
|
closeOnEscape |
boolean |
是否可以使用esc鍵關閉對話框 |
true |
|
del |
boolean |
是否啓用刪除功能，啓用時會觸發事件delGridRow |
true |
|
delicon |
string |
設置刪除按鈕的圖標，只有UI theme裏的圖標纔可以使用 |
ui-icon-trash |
|
deltext |
string |
設置到刪除按鈕上的文字信息 |
空 |
|
deltitle |
string |
當鼠標移到刪除按鈕上時出現的提示 |
刪除鎖選擇的行 |
|
edit |
boolean |
是否啓用可編輯功能，當編輯時會觸發事件editGridRow |
true |
|
editicon |
string |
設置編輯按鈕的圖標，只有UI theme裏的圖標纔可以使用 |
ui-icon-pencil |
|
edittext |
string |
編輯按鈕上文字 |
空 |
|
edittitle |
string |
當鼠標移到編輯按鈕上出現的提示信息 |
編輯所選擇的行 |
|
position |
string |
定義按鈕位置，可選值left, center and right. |
left |
|
refresh |
boolean |
是否啓用刷新按鈕，當點擊刷新按鈕時會觸發trigger(“reloadGrid”)事件，而且會清空搜索條件值 |
true |
|
refreshicon |
string |
設置刷新圖標，只有UI theme裏的圖標纔可以使用 |
ui-icon-refresh |
|
refreshtext |
string |
刷新按鈕上文字信息 |
空 |
|
refreshtitle |
string |
當鼠標移到刷新按鈕上的提示信息 |
重新加載 |
|
refreshstate |
string |
指明表格如何刷新。firstpage：從第一頁開始刷新；current：只刷新當前頁內容 |
firstpage |
|
afterRefresh |
function |
當點擊刷新按鈕之後觸發此事件 |
null |
|
search |
boolean |
是否啓用搜索按鈕，會觸發searchGrid 事件 |
true |
|
searchhicon |
string |
設置搜索按鈕的圖標，只有UI theme裏的圖標纔可以使用 |
ui-icon-search |
|
searchtext |
string |
搜索按鈕上的文字 |
空 |
|
searchtitle |
string |
當鼠標移到搜索按鈕上的提示信息 |
搜索 |
|
view |
boolean |
是否啓用查看按鈕，會觸發事件viewGridRow |
false |
|
viewicon |
string |
設置查看按鈕的圖標，只有UI theme裏的圖標纔可以使用 |
ui-icon-document |
|
viewtext |
string |
查看按鈕上文字 |
空 |
|
viewtitle |
string |
當鼠標移到查看按鈕上的提示信息 |
查看所選記錄 |
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· }).navGrid('#gridpager',{view:true, del:false},
· {}, // use default settings for edit
· {}, // use default settings for add
· {}, // delete instead that del:false we need this
· {multipleSearch : true}, // enable the advanced searching
· {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
· );
Jqgrid學習 -------自定義按鈕
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}
caption：按鈕名稱，可以爲空，string類型
buttonicon：按鈕的圖標，string類型，必須爲UI theme圖標
onClickButton：按鈕事件，function類型，默認null
position：first或者last，按鈕位置
title：string類型，按鈕的提示信息
cursor：string類型，光標類型，默認爲pointer
id：string類型，按鈕id
如果設置多個按鈕：
· jQuery("#grid_id")
· .navGrid('#pager',{edit:false,add:false,del:false,search:false})
· .navButtonAdd('#pager',{
· caption:"Add",
· buttonicon:"ui-icon-add",
· onClickButton: function(){
· alert("Adding Row");
· },
· position:"last"
· })
· .navButtonAdd('#pager',{
· caption:"Del",
· buttonicon:"ui-icon-del",
· onClickButton: function(){
· alert("Deleting Row");
· },
· position:"last"
· });
按鈕間的分隔
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
默認參數：
{sepclass : “ui-separator”,sepcontent: ''}
sepclass：ui-jqgrid的屬性名
sepcontent：分隔符的內容.
Jqgrid學習 -------格式化
jqGrid的格式化是定義在語言包中
· $jgrid = {
· ...
· formatter : {
· integer : {thousandsSeparator: " ", defaultValue: '0'},
· number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},
· currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
· date : {
· dayNames: [
· "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
· "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
· ],
· monthNames: [
· "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
· "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
· ],
· AmPm : ["am","pm","AM","PM"],
· S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'},
· srcformat: 'Y-m-d',
· newformat: 'd/m/Y',
· masks : {
· ISO8601Long:"Y-m-d H:i:s",
· ISO8601Short:"Y-m-d",
· ShortDate: "n/j/Y",
· LongDate: "l, F d, Y",
· FullDateTime: "l, F d, Y g:i:s A",
· MonthDay: "F d",
· ShortTime: "g:i A",
· LongTime: "g:i:s A",
· SortableDateTime: "Y-m-d\\TH:i:s",
· UniversalSortableDateTime: "Y-m-d H:i:sO",
· YearMonth: "F, Y"
· },
· reformatAfterEdit : false
· },
· baseLinkUrl: '',
· showAction: '',
· target: '',
· checkbox : {disabled:true},
· idName : 'id'
· }
· ...
這些設置可以通過colModel中的formatoptions參數修改
· jQuery("#grid_id").jqGrid({
· ...
· colModel : [
· ...
· {name:'myname', ... formatter:'number', ...},
· ...
· ],
· ...
· });
此實例是對名爲“myname”的列進行格式化，格式化類是“number”，假如初始值爲“1234.1”則格式化後顯示爲“1 234.10” 。
如果給某列進行格式化：
· jQuery("#grid_id").jqGrid({
· ...
· colModel : [
· ...
· {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,
· ...
· ],
· ...
· });
這個設置會覆蓋語言包中的設置。
select類型的格式化實例：
原始數據
· jQuery("#grid_id").jqGrid({
· ...
· colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],
· ...
· });
使用格式化後
· jQuery("#grid_id").jqGrid({
· ...
· colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
· ...
· });
結果是，表格的數據值爲1或者2但是現實的是One或者Two。
對超鏈接使用select類型的格式化：
· jQuery("#grid_id").jqGrid({
· ...
· colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...}
· ...
· ]
· ...
· });
得到http://localhost/someurl.php?id=123&action=edit
如果想改變id值則
· jQuery("#grid_id").jqGrid({
· ...
· colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...}
· ...
· ]
· ...
· });
得到http://localhost/someurl.php?myid=123&action=edit
Jqgrid學習 -------自定義格式化
· jQuery("#grid_id").jqGrid({
· ...
· colModel: [
· ...
· {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
· ...
· ]
· ...
· });
·
· function currencyFmatter (cellvalue, options, rowObject)
· {
· // do something here
· return new_format_value
· }
cellvalue：要被格式化的值
options：對數據進行格式化時的參數設置，格式爲：
{ rowId: rid, colModel: cm}
rowObject：行數據
數據的反格式化跟格式化用法相似.
· jQuery("#grid_id").jqGrid({
· ...
· colModel: [
· ...
· {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},
· ...
· ]
· ...
· });
·
· function currencyFmatter (cellvalue, options, rowObject)
· {
·
· return "$"+cellvalue;
· }
· function unformatCurrency (cellvalue, options)
· {
·
· return cellvalue.replace("$","");
· }
表格中數據實際值爲123.00，但是顯示的是$123.00; 我們使用getRowData ，getCell 方法取得的值是123.00。
創建通用的格式化函數
· <script type="text/javascript">
· jQuery.extend($.fn.fmatter , {
· currencyFmatter : function(cellvalue, options, rowdata) {
· return "$"+cellvalue;
· }
· });
· jQuery.extend($.fn.fmatter.currencyFmatter , {
· unformat : function(cellvalue, options) {
· return cellvalue.replace("$","");
· }
· });
·
· </script>
具體使用：
· jQuery("#grid_id").jqGrid({
· ...
· colModel: [
· ...
· {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
· ...
· ]
· ...
· })
Jqgrid學習 -------搜索
表格中所有的列都可以作爲搜索條件。
所用到的語言包文件
· $.jgrid = {
· ...
· search : {
· caption: "Search...",
· Find: "Find",
· Reset: "Reset",
· odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
· groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
· matchText: " match",
· rulesText: " rules"
· }
colModel 設置
|
可選參數 |
類型 |
說明 |
默認值 |
|
search |
boolean |
是否是搜索列 |
true |
|
stype |
string |
搜索類型，text類型或者select類型 |
text |
|
searchoptions |
object |
對搜索條件進行一些設置 |
|
searchoptions 參數
|
屬性 |
類型 |
說明 |
|
dataUrl |
string |
只有當搜索類型爲select才起效 |
|
buildSelect |
function |
只有當dataUrl設置時此參數才起效，通過一個function來構建下拉框 |
|
dataInit |
function |
初始化時調用，用法：dataInit: function(elem) {do something}通常用在日期的選擇上. Example:dataInit : function (elem) {$(elem).datepicker();} |
|
dataEvents |
array |
事件列表，用法：dataEvents: [{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},{ type: 'keypress', fn: function(e) { console.log('keypress'); } }] |
|
attr |
object |
設置屬性值。attr : { title: “Some title” } |
|
searchhidden |
boolean |
默認情況下，隱藏值不是搜索列。爲了使隱藏值可以作爲搜索列則將此設爲true |
|
sopt |
array |
此參數只用到單列搜索上，說明搜索條件。可用值： ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']意 思爲['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'] |
|
defaultValue |
string |
默認值 |
|
value |
mixed |
只用在搜索類型爲select下。可以是string或者object，如果爲string則格式爲value:label，且以“；”結尾；如果爲object格式爲editoptions:{value:{1:'One';2:'Two'}} |
· jQuery("#grid_id").jqGrid({
· ...
· colModel: [
· ...
· {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} },
· ...
· ]
· ...
· });
· datePick = function(elem)
· {
· jQuery(elem).datepicker();
· }
需要說明的：
所有的搜索都是使用url來到服務器端查詢數據。
當執行搜索時會用查詢數據填充postData array
發送到服務器端搜索字符串的名稱爲_search
當點擊刷新按鈕時不會使用搜索條件
每個搜索方法都有自己的數據清空方法
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 |
