jqgrid學習

原創 zgjsczwj 2018-08-23 04:30
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代碼
<em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  </em>
< em><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  </em>
< em><head>  </em>
< em><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  </em>
< em><title>My First Grid</title>  </em>
< em>   </em>
< em><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />  </em>
< em><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />  </em>
< em><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />  </em>
< em><style>  </em>
< em>html, body {  </em>
< em>   margin: 0;  </em>
< em>    padding: 0;  </em>
< em>    font-size: 75%;  </em>
< em>}  </em>
< em></style>  </em>
< em>   </em>
< em><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>  </em>
< em><script src="js/src/grid.loader.js" type="text/javascript"></script>  </em>
< em>   </em>
< em></head>  </em>
< em><body>  </em>
< em>...  </em>
< em></body>  </em>
< em></html></em> 
需要說明的是，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
表格名稱		    

<a>ajaxGridOptions</a>ajaxGridOptions[a1]
object
對ajax參數進行全局設置，可以覆蓋ajax事件
null
是

<a>ajaxSelectOptions</a>[/url][a2]
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
定義了單元格內容保存位置
&lsquo;remote&rsquo;
是

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時起作用
空值
否

<a>footerrow</a>ajaxSelectOptions[a3]
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&hellip;}
空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:&rsquo;__department_id&rsquo;,index:&rsquo;__department_id&rsquo;,width:200,editable:true,edittype:&rsquo;select&rsquo;,editoptions: {dataUrl:"${ctx}/admin/deplistforstu.action"}},這個是演示動態從服務器端獲取數據。
empty

editrules
array
編輯的規則{name:&rsquo;age&rsquo;,index:&rsquo;age&rsquo;, 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:&rsquo;sex&rsquo;,index:&rsquo;sex&rsquo;, align:&rsquo;center&rsquo;,width:60,editable:true,edittype:&rsquo;select&rsquo;,editoptions: {value:&rsquo;0:待定;1:男;2:女&rsquo;},formatter:function(cellvalue, options, rowObject){ var temp = "<img src=&rsquo;${ctx}/jquery-ui-1.7.2.custom/css/img/" if(cellvalue==1){ temp = temp +"user-white.png"; } else if(cellvalue==2){ temp = temp +"user-white-female.png"; } else { temp = temp + "user-silhouette.png"; } temp = temp + "&lsquo; border=&rsquo;0&prime; />" return temp; }},//返回性別的圖標。
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
& lsquo;unformat&rsquo;單元格值
null


Jqgrid學習 -------數據
jqGrid可支持的數據類型：xml、json、jsonp、local or clientSide、xmlstring、jsonstring 、script、function (&hellip;)。
Json數據
需要定義jsonReader來跟服務器端返回的數據做對應，其默認值：
&middot; jsonReader : { 
& middot;      root: "rows", 
& middot;      page: "page", 
& middot;      total: "total", 
& middot;      records: "records", 
& middot;      repeatitems: true, 
& middot;      cell: "cell", 
& middot;      id: "id", 
& middot;      userdata: "userdata", 
& middot;      subgrid: {root:"rows",  
& middot;         repeatitems: true,  
& middot;        cell:"cell" 
& middot;      } 

這樣服務器端返回的數據格式：
&middot; {  
& middot;   total: "xxx",  
& middot;   page: "yyy",  
& middot;   records: "zzz", 
& middot;   rows : [ 
& middot;     {id:"1", cell:["cell11", "cell12", "cell13"]}, 
& middot;     {id:"2", cell:["cell21", "cell22", "cell23"]}, 
& middot;       ... 
& middot;   ] 
& middot; }
jsonReader的屬性

total
總頁數

page
當前頁

records
查詢出的記錄數

rows
包含實際數據的數組

id
行id

cell
當前行的所有單元格


自定義：
&middot; jQuery("#gridid").jqGrid({ 
& middot; ... 
& middot;    jsonReader : { 
& middot;       root:"invdata", 
& middot;       page: "currpage", 
& middot;       total: "totalpages", 
& middot;       records: "totalrecords", 
& middot;       cell: "invrow" 
& middot;    }, 
& middot; ... 
& middot; });
& middot; totalpages: "xxx",  
& middot;   currpage: "yyy", 
& middot;   totalrecords: "zzz", 
& middot;   invdata : [ 
& middot;     {id:"1", invrow:["cell11", "cell12", "cell13"]}, 
& middot;     {id:"2", invrow:["cell21", "cell22", "cell23"]}, 
& middot;       ... 
& middot;   ] 
repeatitems   指明每行的數據是可以重複的，如果設爲false，則會從返回的數據中按名字來搜索元素，這個名字就是colModel中的名字
&middot; jsonReader : { 
& middot;       root:"invdata", 
& middot;       page: "currpage", 
& middot;       total: "totalpages", 
& middot;       records: "totalrecords", 
& middot;       repeatitems: false, 
& middot;       id: "0" 
& middot;    }
& middot;  totalpages: "xxx",  
& middot;   currpage: "yyy", 
& middot;   totalrecords: "zzz", 
& middot;   invdata : [ 
& middot;     {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"}, 
& middot;     {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"}, 
& middot;       ... 
& middot;   ] 
此例中，id屬性值爲"invid"。 一旦當此屬性設爲false時，我們就不必把所有在colModel定義的name值都賦值。因爲是按name來進行搜索元素的，所以他的排序也不是按colModel中指定的排序結果。
用戶數據（user data） 在某些情況下，我們需要從服務器端返回一些參數但並不想直接把他們顯示到表格中，而是想在別的地方顯示，那麼我們就需要用到userdata標籤
&middot; jsonReader: { 
& middot;   ... 
& middot;   userdata: "userdata", 
& middot;   ... 
& middot; }
& middot; {  
& middot;   total: "xxx",  
& middot;   page: "yyy",  
& middot;   records: "zzz",  
& middot;   userdata: {totalinvoice:240.00, tax:40.00},  
& middot;   rows : [  
& middot;     {id:"1", cell:["cell11", "cell12", "cell13"]},  
& middot;     {id:"2", cell:["cell21", "cell22", "cell23"]},  
& middot;     ...  
& middot;   ]  
& middot; }
在客戶端我們可以有下面兩種方法得到這些額外信息：
1.     jQuery("grid_id").getGridParam('userData') 
2.     jQuery("grid_id").getUserData() 
3.     jQuery("grid_id").getUserDataItem( key ) 
Jqgrid學習 -------事件
&middot; var lastSel; 
& middot; jQuery("#gridid").jqGrid({ 
& middot; ... 
& middot;    onSelectRow: function(id){  
& middot;       if(id && id!==lastSel){  
& middot;          jQuery('#gridid').restoreRow(lastSel);  
& middot;          lastSel=id;  
& middot;       }  
& middot;       jQuery('#gridid').editRow(id, true);  
& middot;    }, 
& middot; ... 
& middot; })


事件
參數
備註

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
& middot; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
& middot; <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
& middot; <head> 
& middot; <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
& middot; <title>My First Grid</title> 
& middot;   
& middot; <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> 
& middot; <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
& middot;   
& middot; <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
& middot; <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
& middot; <script type="text/javascript"> 
& middot;     jQuery.jgrid.no_legacy_api = true; 
& middot; </script> 
& middot; <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
& middot;   
& middot; </head> 
& middot; <body> 
& middot; ... 
& middot; </body> 
& middot; </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&hellip;} 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}&hellip;]。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&hellip;} 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&hellip;}, {name:value,name2:value2&hellip;}]，name爲colModel中的名稱；rowidname某行的名稱。jsonreader：boolean值，默認false。如果爲true則是定義數據的格式，data的值並不是name：value形式而只是value

Jqgrid學習 -------配置 json
IE8，FF3以及Chrome 3已經支持JSON，配置：
&middot; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
& middot; <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
& middot; <head> 
& middot; <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
& middot; <title>My First Grid</title> 
& middot;   
& middot; <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> 
& middot; <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
& middot;   
& middot; <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
& middot; <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
& middot; <script type="text/javascript"> 
& middot;     jQuery.jgrid.useJSON = true; 
& middot; </script> 
& middot; <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
& middot;   
& middot; </head> 
& middot; <body> 
& middot; ... 
& middot; </body> 
& middot; </html>
這段代碼要放到語言包之後jqGrid.js文件之前。 如果瀏覽器不支持JSON，那麼我們只能用eval函數解析json。
除了jqGrid本身提供對json的類庫外，我們可以使用JSON.parse來處理JSON，配置如下：
&middot; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
& middot; <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
& middot; <head> 
& middot; <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
& middot; <title>My First Grid</title> 
& middot;   
& middot; <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> 
& middot; <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
& middot;   
& middot; <script src="js/json2.js" type="text/javascript"></script> 
& middot; <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
& middot; <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
& middot; <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
& middot; <script type="text/javascript"> 
& middot;    jQuery.extend(jQuery.jgrid,{ 
& middot;       parse:function(jsstring) { 
& middot;          return JSON.parse(jsstring); 
& middot;       } 
& middot;    }); 
& middot; </script> 
& middot;   
& middot; </head> 
& middot; <body> 
& middot; ... 
& middot; </body> 
& middot; </html>

Jqgrid學習 -------翻頁
jqGrid的翻頁要定義在html裏，通常是在grid的下面，且是一個div對象：
&middot; <table id="list"></table>  
& middot;    <div id="gridpager"></div>
& middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    pager : '#gridpager', 
& middot; ... 
& middot; });
不必給翻頁設置任何的css屬性。在jqGrid裏定義的翻頁可以是：:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推薦使用前兩個，當使用其他方式時jqGrid的導入導出功能時會引起錯誤。
導航欄的屬性：
&middot; $.jgrid = { 
& middot;     defaults : { 
& middot;         recordtext: "View {0} - {1} of {2}", 
& middot;             emptyrecords: "No records to view", 
& middot;         loadtext: "Loading...", 
& middot;         pgtext : "Page {0} of {1}" 
& middot;     }, 
& middot; ... 
& middot; }
如果想改變這些設置：
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的翻頁導航是一個方法，你可以事先定義一些其他操作，比如：編輯、新增、刪除及搜索。也可以增加自定義的函數。導航工具欄是定義到翻頁控件上的。定義如下：
&middot; <body> 
& middot; ... 
& middot;    <table id="list"></table>  
& middot;    <div id="gridpager"></div>  
& middot; ... 
& middot; </body>

& middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    pager : '#gridpager', 
& middot; ... 
& middot; }); 
& middot; jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 

& middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    pager : '#gridpager', 
& middot; ... 
& middot; }); 
& middot; jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 
& middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    pager : '#gridpager', 
& middot; ... 
& middot; }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView); 
& middot; ...

grid_id ：表格id gridpager ：導航欄id parameters ：參數列表 prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件
&middot; $.jgrid = { 
& middot; ... 
& middot;    search : { 
& middot;      caption: "Search...", 
& middot;      Find: "Find", 
& middot;      Reset: "Reset", 
& middot;      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'], 
& middot;      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], 
& middot;      matchText: " match", 
& middot;      rulesText: " rules" 
& middot;    }, 
& middot;    edit : { 
& middot;      addCaption: "Add Record", 
& middot;      editCaption: "Edit Record", 
& middot;      bSubmit: "Submit", 
& middot;      bCancel: "Cancel", 
& middot;      bClose: "Close", 
& middot;      saveData: "Data has been changed! Save changes?", 
& middot;      bYes : "Yes", 
& middot;      bNo : "No", 
& middot;      bExit : "Cancel", 
& middot;   }, 
& middot;   view : { 
& middot;     caption: "View Record", 
& middot;     bClose: "Close" 
& middot;   }, 
& middot;   del : { 
& middot;     caption: "Delete", 
& middot;     msg: "Delete selected record(s)?", 
& middot;     bSubmit: "Delete", 
& middot;     bCancel: "Cancel" 
& middot;   }, 
& middot;   nav : { 
& middot;     edittext: "", 
& middot;     edittitle: "Edit selected row", 
& middot;     addtext:"", 
& middot;     addtitle: "Add new row", 
& middot;     deltext: "", 
& middot;     deltitle: "Delete selected row", 
& middot;     searchtext: "", 
& middot;     searchtitle: "Find records", 
& middot;     refreshtext: "", 
& middot;     refreshtitle: "Reload Grid", 
& middot;     alertcap: "Warning", 
& middot;     alerttext: "Please, select row", 
& middot;     viewtext: "", 
& middot;     viewtitle: "View selected row" 
& middot;   }, 
& middot; ...

屬性
類型
說明
默認值

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
當鼠標移到查看按鈕上的提示信息
查看所選記錄


& middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    pager : '#gridpager', 
& middot; ... 
& middot; }).navGrid('#gridpager',{view:true, del:false},  
& middot; {}, // use default settings for edit 
& middot; {}, // use default settings for add 
& middot; {},  // delete instead that del:false we need this 
& middot; {multipleSearch : true}, // enable the advanced searching 
& middot; {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/ 
& middot; );
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
如果設置多個按鈕：
&middot; jQuery("#grid_id") 
& middot; .navGrid('#pager',{edit:false,add:false,del:false,search:false}) 
& middot; .navButtonAdd('#pager',{ 
& middot;    caption:"Add",  
& middot;    buttonicon:"ui-icon-add",  
& middot;    onClickButton: function(){  
& middot;      alert("Adding Row"); 
& middot;    },  
& middot;    position:"last" 
& middot; }) 
& middot; .navButtonAdd('#pager',{ 
& middot;    caption:"Del",  
& middot;    buttonicon:"ui-icon-del",  
& middot;    onClickButton: function(){  
& middot;       alert("Deleting Row"); 
& middot;    },  
& middot;    position:"last" 
& middot; });
按鈕間的分隔
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
默認參數：
{sepclass : "ui-separator",sepcontent: ''}

sepclass：ui-jqgrid的屬性名 sepcontent：分隔符的內容.
Jqgrid學習 -------格式化
jqGrid的格式化是定義在語言包中
&middot; $jgrid = { 
& middot; ... 
& middot;    formatter : { 
& middot;      integer : {thousandsSeparator: " ", defaultValue: '0'}, 
& middot;      number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'}, 
& middot;      currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'}, 
& middot;      date : { 
& middot;        dayNames: [ 
& middot;          "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat", 
& middot;          "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" 
& middot;        ], 
& middot;        monthNames: [ 
& middot;          "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", 
& middot;          "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" 
& middot;        ], 
& middot;        AmPm : ["am","pm","AM","PM"], 
& middot;        S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'}, 
& middot;        srcformat: 'Y-m-d', 
& middot;        newformat: 'd/m/Y', 
& middot;        masks : { 
& middot;          ISO8601Long:"Y-m-d H:i:s", 
& middot;          ISO8601Short:"Y-m-d", 
& middot;          ShortDate: "n/j/Y", 
& middot;          LongDate: "l, F d, Y", 
& middot;          FullDateTime: "l, F d, Y g:i:s A", 
& middot;          MonthDay: "F d", 
& middot;          ShortTime: "g:i A", 
& middot;          LongTime: "g:i:s A", 
& middot;          SortableDateTime: "Y-m-d\\TH:i:s", 
& middot;          UniversalSortableDateTime: "Y-m-d H:i:sO", 
& middot;          YearMonth: "F, Y" 
& middot;        }, 
& middot;        reformatAfterEdit : false 
& middot;      }, 
& middot;      baseLinkUrl: '', 
& middot;      showAction: '', 
& middot;      target: '', 
& middot;      checkbox : {disabled:true}, 
& middot;      idName : 'id' 
& middot;    } 
& middot; ...
這些設置可以通過colModel中的formatoptions參數修改
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel : [ 
& middot;    ... 
& middot;       {name:'myname', ... formatter:'number', ...}, 
& middot;    ... 
& middot;    ], 
& middot; ... 
& middot; });
此實例是對名爲"myname"的列進行格式化，格式化類是"number"，假如初始值爲"1234.1"則格式化後顯示爲"1 234.10" 。
如果給某列進行格式化：
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel : [ 
& middot;    ... 
& middot;       {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } , 
& middot;    ... 
& middot;    ], 
& middot; ... 
& middot; });
這個設置會覆蓋語言包中的設置。

select類型的格式化實例：
原始數據
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ], 
& middot; ... 
& middot; });
使用格式化後
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ] 
& middot; ... 
& middot; });
結果是，表格的數據值爲1或者2但是現實的是One或者Two。
對超鏈接使用select類型的格式化：
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...}  
& middot;       ...  
& middot;    ] 
& middot; ... 
& middot; });
得到[url=http://www.blogjava.net/ilovebabyfat/archive/2012/04/06/373456.html#_msocom_2]
如果想改變id值則
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...}  
& middot;       ...  
& middot;    ] 
& middot; ... 
& middot; });
得到footerrow

Jqgrid學習 -------自定義格式化
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel: [  
& middot;       ...  
& middot;       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, 
& middot;       ... 
& middot;    ] 
& middot; ... 
& middot; }); 
& middot;   
& middot; function currencyFmatter (cellvalue, options, rowObject) 
& middot; { 
& middot;    // do something here 
& middot;    return new_format_value 
& middot; }
cellvalue：要被格式化的值 options：對數據進行格式化時的參數設置，格式爲： { rowId: rid, colModel: cm} rowObject：行數據

數據的反格式化跟格式化用法相似.
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel: [  
& middot;       ...  
& middot;       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency}, 
& middot;       ... 
& middot;    ] 
& middot; ... 
& middot; }); 
& middot;   
& middot; function currencyFmatter (cellvalue, options, rowObject) 
& middot; { 
& middot;   
& middot;    return "$"+cellvalue; 
& middot; } 
& middot; function  unformatCurrency (cellvalue, options) 
& middot; { 
& middot;   
& middot;    return cellvalue.replace("$",""); 
& middot; } 
表格中數據實際值爲123.00，但是顯示的是$123.00; 我們使用getRowData ，getCell 方法取得的值是123.00。 創建通用的格式化函數
&middot; <script type="text/javascript"> 
& middot; jQuery.extend($.fn.fmatter , { 
& middot;     currencyFmatter : function(cellvalue, options, rowdata) { 
& middot;     return "$"+cellvalue; 
& middot; } 
& middot; }); 
& middot; jQuery.extend($.fn.fmatter.currencyFmatter , { 
& middot;     unformat : function(cellvalue, options) { 
& middot;     return cellvalue.replace("$",""); 
& middot; } 
& middot; }); 
& middot;   
& middot; </script>
具體使用：
&middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel: [  
& middot;       ...  
& middot;       {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, 
& middot;       ... 
& middot;    ] 
& middot; ... 
& middot; })
Jqgrid學習 -------搜索
表格中所有的列都可以作爲搜索條件。 所用到的語言包文件
&middot; $.jgrid = { 
& middot; ... 
& middot;    search : { 
& middot;      caption: "Search...", 
& middot;      Find: "Find", 
& middot;      Reset: "Reset", 
& middot;      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'], 
& middot;      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], 
& middot;      matchText: " match", 
& middot;      rulesText: " rules" 
& middot;    }
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'}}

& middot; jQuery("#grid_id").jqGrid({ 
& middot; ... 
& middot;    colModel: [  
& middot;       ...  
& middot;       {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} }, 
& middot;       ... 
& middot;    ] 
& middot; ... 
& middot; }); 
& middot; datePick = function(elem) 
& middot; { 
& middot;    jQuery(elem).datepicker(); 
& middot; }
需要說明的： 所有的搜索都是使用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>&hellip;<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>&hellip;<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
& lsquo;&rsquo;

marksearched
當爲true時，每次查詢之後所有查詢的列都標記爲可查詢列
true
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

jqGrid參數-----colModel的設置

伊佐奈美須八尾 2018-08-27 14:03:12

jqgrid前臺數據顯示問題原因和解決方案

macalzheng 2018-08-27 05:01:53

java 反射異常和 找不action的解決方案

macalzheng 2018-08-27 05:01:50

jqgrid設置rowid：用唯一列代替行號

ksy 2018-08-26 03:23:52

jqGrid增刪查改彈出頁面一閃就自動關閉

lyon0098 2018-08-26 03:14:04

jqGrid一些使用

orzma 2018-08-25 14:52:53

jqGrid表格之subGrid

feverlook 2018-08-25 08:38:42

jqGrid表格之自定義subGrid

feverlook 2018-08-25 08:38:42

利用jqGrid裏的formatter對字體加粗和更改顏色

Little_naive 2018-08-25 03:57:57

jqGrid置頂所有選中行

解夕 2018-08-24 14:07:39

jqGrid的使用方法(編輯,刪除,更新,新增)

lfhy1987 2018-08-24 12:17:35

Struts2與jqGrid的參數傳遞

守护小公主 2018-08-24 09:31:49

jqGrid 學習筆記整理——進階篇（二）

XeonMic 2018-08-24 06:57:48

jqGrid 學習筆記整理——終極篇（一）

XeonMic 2018-08-24 06:57:48

jqGrid 學習筆記整理——基礎篇

XeonMic 2018-08-24 06:57:46