jqGrid各種參數(shù)詳解

1、jqGrid各種參數(shù)詳解 JQGrid JQGrid是一個(gè)在jquety基礎(chǔ)上做的一個(gè)表格控件，以ajax的方式和服務(wù)器端 通信。 JQGrid Demo是一個(gè)在線的演示項(xiàng)目。在這里，可以知道jqgrid可以做什么事 情。 下面是轉(zhuǎn)自其他人blog的一個(gè)學(xué)習(xí)資料，與其說是學(xué)習(xí)資料，說成查詢幫助文檔更加 合適。 jqGrid學(xué)習(xí)之安裝 jqGrid安裝很簡(jiǎn)單，只需把相應(yīng)的css、js文件加入到頁(yè)面中即可。按照官網(wǎng)文檔： /myproj ect/css/ ui jqgrid css /ui-light ness/ /images/ jquery-ui-l. 72custom css /myproj

2、ect/js/ /il8 n/ grid, locale-bg js list of all la nguage files Chan ges txt jquery一1 3. 2. mi n. js jquery. jqGrid mi n. js 在頁(yè)面中寫法： Java代碼 html xml ns二http:/www. w3org/1999/xhtml xml:la ng二n la ng二e My First Grid 編輯自己的themeo jqGrid 也并不需要把所有的css文件都引入進(jìn)來，只需導(dǎo)入核心css文件 a ui. theme, css 以及 “ ui. core, css

3、”即可,文件位于冃錄developme ntb un dle/themes 卜。 jqGrid原理 jqGrid是典型的B/S架構(gòu)，服務(wù)器端只是提供數(shù)據(jù)管理，客戶端只提供數(shù)據(jù)顯示。換句 話說，jqGrid可以以一種更加簡(jiǎn)單的方式來展現(xiàn)你數(shù)據(jù)庫(kù)的信息，而且也可以把客戶 端數(shù)據(jù)傳回給服務(wù)器端。 對(duì)于jqGrid我們所關(guān)心的就是：必須有一段代碼把一些頁(yè)面信息保存到數(shù)據(jù)庫(kù)中，而 且也能夠把響應(yīng)信息返回給客戶端。jqGrid是用如也來實(shí)現(xiàn)對(duì)請(qǐng)求與響應(yīng)的處理。 jqGrid參數(shù) 稱 名 類型 值 認(rèn) 默 1 一可修改 IX U str應(yīng) r g t n s i 類 選 可 o lx , XIrt 認(rèn)cri

4、p hvce 執(zhí) s d 孚八 i , s , pnt 刊匕nile T7- - o 1 厶、V s lx Wx 丄 c LL盡, lx n X -r c J 從型沁 e P y t tr s X a J a ing colNames Arr ay 列顯示名稱，是一個(gè)數(shù)組對(duì)象 colModel Arr ay 常用到的屬性：name列顯不的名稱；index傳到服務(wù) 器端用來排序用的列名稱；width列寬 度；align對(duì)齊方式；sortable是否可以排序 pager str ng 定義翻頁(yè)用的導(dǎo)航欄，必須是有效的html元素。 翻頁(yè)工具欄可以放置在html頁(yè)面任意位置 rowNum nt 在g

5、rid顯示記錄條數(shù)，這個(gè)參數(shù)是要被傳遞至 至0后臺(tái) rowList arr ay 一個(gè)下拉選擇框，用來改變顯示記錄數(shù)，當(dāng)選擇 時(shí)會(huì)覆蓋rowNum參數(shù)傳遞到后臺(tái) sort name str ing 默認(rèn)的排序列。口以疋列名稱或者疋個(gè)數(shù)子， 這個(gè)參數(shù)會(huì)被提交到后臺(tái) viewrecords boo lea n 定義是否要顯示總記錄數(shù) capti on str ing 表格名稱 ajaxGridOpt on sa1 obj ect 對(duì)ajax參數(shù)進(jìn)行全局設(shè)置，可以覆蓋ajax事件 null 是 ajaxSelectO pti on s a2 obj ect 對(duì)ajax的select參數(shù)進(jìn)彳丁全局設(shè)置

6、 null 是 altclass Str ing 用來指定行顯示的CSS,叮以編輯自己的CSS文 件，只有當(dāng)alt Rows設(shè)為ture時(shí)起作用 ui-priorit y- sec on dar y altRows boo lea n 設(shè)置表格zebra-striped值 autoe ncode boo lea n 對(duì)url進(jìn)行編碼 false 是 autowidth boo lea n 如果為ture時(shí)，則當(dāng)表格在首次被創(chuàng)建時(shí)會(huì)根據(jù) 父元素比例重新調(diào)整表格寬度。如果父元素寬度 改變，為了使表格寬度能夠自動(dòng)調(diào)整則需要實(shí) 現(xiàn) 函數(shù)：setGridWidth false 否 cellLayout

7、int ege r 定義了單兀格padding + border寬度。通常不 必修改 此值。初始值為 5 是 cellEdit boo lea n 啟用或者禁用單元格編輯功能 false 是 cellsubmit Str ing 定義了單元格內(nèi)容保存位置 remote 是 cellurl Str ing 單元格提交的url 空值 是 datastr Str ing xmls tring 或者 jsons tring 空值 是 deselectAft erSort boo lea n 只有當(dāng)datatype為local時(shí)起作用。當(dāng)排序時(shí) 不選擇 當(dāng)前行 true 是 directi on str

8、 ing 表格中文字的顯示方向，從左向右(ltr )或者 從 右向左(rtr ) ltr 否 editurl str ing 定義對(duì)form編輯時(shí)的url 空值 是 emptyrecord s str ing 當(dāng)返回的數(shù)據(jù)行數(shù)為0時(shí)顯示的信息。只有當(dāng)屬 性viewrecords設(shè)置為ture時(shí)起作用 是 Expa ndColCI ck boo lea n 當(dāng)為true時(shí)，點(diǎn)擊展開仃的文本時(shí)，treeGrid就能 展開或者收縮，不僅僅是點(diǎn)擊圖片 true 否 Expa ndColum n str ing 指定那列來展開treegrid,默認(rèn)為第一列，只 有在treeGrid為true時(shí)起作用 空

9、值 否 footerrowa 3 boo lea n 當(dāng)為true時(shí)，會(huì)在翻頁(yè)欄之上增加一行 false 否 forceFit boo lea n 當(dāng)為ture時(shí)，調(diào)整列寬度不會(huì)改變表格的寬度。 當(dāng)shrinkToFit為false時(shí)，此屬性會(huì)被忽略 false 否 gridstate str ing 定乂當(dāng)刖表格的狀態(tài):visible or hidden visible 否 gridview boo lea n 構(gòu)造一行數(shù)據(jù)后添加到事id中，如果設(shè)為true則是 將整個(gè)表格的數(shù)據(jù)都構(gòu)造完成后再添加到 grid 中，但 treeGrid, subGrid, or afterl nsertRow

10、 不能 用 false 是 height mix ed 表格高度，可以是數(shù)字，像素值或者百分比 150 否 hidde ngrid boo lea n 當(dāng)為時(shí)，表格不會(huì)被顯示，只顯示表格的標(biāo) 題。只有當(dāng)點(diǎn)擊顯示表格的那個(gè)按鈕時(shí)才會(huì)去初 始化表格數(shù)據(jù)。 false 否 hidegrid boo lea n 啟用或者禁用控制表格顯示、隱藏的按鈕，只有 當(dāng)caption屬性不為空時(shí)起效 true 否 hoverrows boo lea n 當(dāng)為false時(shí)mouse hovering會(huì)被禁用 false 是 son Reader arr ay 描述json數(shù)據(jù)格式的數(shù)組 否 astpage int

11、ege r 只讀屬性，定義了總頁(yè)數(shù) 0 否 astsort int ege r 只讀屬性，定義了最后排序列的索引，從0開始 0 否 oadonee boo lea n 如果為則數(shù)據(jù)只從服務(wù)器端抓取一次，之 后 所有操作都是在客戶端執(zhí)行，翻頁(yè)功能會(huì)被禁用 false 否 oadtext str ing 當(dāng)請(qǐng)求或者排序時(shí)所顯示的文字內(nèi)谷 Load in g 否 oadui str ing 當(dāng)執(zhí)行ajax請(qǐng)求時(shí)要干什么。disable禁用ajax執(zhí)行 提不；enable默認(rèn)，士執(zhí)行ajax請(qǐng)求時(shí)的提不； block啟用Loading提但是阻止其他操作 en able 是 multikey str i

12、ng 只有在multiselect設(shè)置為ture時(shí)起作用，疋義使 用那個(gè) key 來做多選。shi.ftKey , altKey, ctrlKey 空值 是 multibox onl y boo lea n 只有multiselect = true.起作用，當(dāng) multibox only為ture時(shí)只有選擇checkbox才會(huì)起作 用 false 是 multiseleet boo lea n 定義是否可以多選 false 否 multiseleet Width int ege r multiselect 為 true 時(shí)設(shè)置 multiselect 列 寬度 20 否 page int eg

13、e r 設(shè)置初始的頁(yè)碼 1 是 pagerpos str ing 指定分頁(yè)樣的位置 cen ter 否 pgbutt ons boo lea n 是否顯示翻頁(yè)按鈕 true 否 pgin put boo lea n 是否顯示跳轉(zhuǎn)頁(yè)面的輸入框 true 否 pgtext str ing 當(dāng)前頁(yè)信息 是 prmNames arr DefauIt valuesprmNanies: none 是 ay page: page , rows: rows , sort: sidx , order: sord , search: U_search ”, nd:nd , npage:null當(dāng)參數(shù)為null時(shí)不

14、會(huì)被發(fā)到服務(wù) 器端 postData arr ay 此數(shù)組內(nèi)容直接賦值到url,參數(shù)類型： n amel:valuel, 空 array recco unt int ege r 只讀屬性，定義了 grid中確切的行數(shù)。通常情 況 下與records屬性相同，但有一種情況例外，假如 rowNum=15但是從服務(wù)器端返回的記錄數(shù)是20,那么 “cords值是20,但reccount值仍然為15,而且表格 中也只顯示15條記錄。 0 : recordpos str ing 定義了i己錄彳百息、白勺位置：left, cen ter, right righ t records int ege r 只讀屬

15、性，定義了返回的記錄數(shù) none recordtext str ing 顯示記錄數(shù)信息。0）為記錄數(shù)開始，1為記 錄 數(shù)結(jié)束o viewrecords為ture時(shí)才能起效，且 總記錄 數(shù)大于0時(shí)才會(huì)顯示此信息 resizeclass str ing 定義一個(gè)class到一個(gè)列上用來顯示列寬度調(diào)整時(shí) 的效果 空值 rowList arr ay 一個(gè)數(shù)組用來調(diào)整表格顯示的記錄數(shù)，此參數(shù)值 會(huì)替代rowNum參數(shù)值傳給服務(wù)器端。 rownu mbers boo lea n 如果為tue則會(huì)在表格左邊新增一列，顯示行 順 序號(hào)，從1開始遞增。此列名為Snl false rownum Width int

16、 ege r 如果rownumbers為true,則可以設(shè)置column的 寬度 25 savedRow arr ay 只讀屬性，只用在編輯模式下保存數(shù)據(jù) 空值 scroll boo lea n 創(chuàng)建一個(gè)動(dòng)態(tài)滾動(dòng)的表格，當(dāng)為true時(shí)，翻頁(yè) 欄 被禁用，使用垂直滾動(dòng)條加載數(shù)據(jù)，且在首次訪 問服務(wù)器端時(shí)將加載所有數(shù)據(jù)到客戶端。當(dāng)此參 數(shù)為數(shù)字時(shí)，表格只控制可見的幾行，所有數(shù)據(jù) 都在這幾行中加載 false scrollOffse int ege r 設(shè)置垂直滾動(dòng)條寬度 18 scrollrows boo lea n 當(dāng)為true時(shí)讓所選擇的行可見 false selarrrow arr ay 只

17、讀屬性，用來存放當(dāng)前選擇的行 array 臺(tái) selrow str ing 只讀屬性，最后選擇行的id null shri nkToFit boo lea n 此屬性用來說明當(dāng)初始化列寬度時(shí)候的計(jì)算類型， 如果為ture,則按比例初始化列寬度。如果為 false,則列寬度使用colModel指定的寬度 true 臺(tái) sortable boo lea n 是否可排序 false sort name str ing 排序列的名稱，此參數(shù)會(huì)被傳到后臺(tái) 空字符串 sortorder str ing 排序順序，升序或者降序(asc or desc ) asc subGrid boo lea n 是否使用

18、suggrid false subGridMode arr ay subgrid 模型 array subGridType mix ed 如果為空則使用表格的dataType null 是 subGridUrl str ing 加載subgrid數(shù)據(jù)的url , jqGrid會(huì)把每彳J的id 值加到url中 空值 subGridWidt h int ege r subgrid列的寬度 20 toolbar arr ay 表格的工具欄。數(shù)組中有兩個(gè)值，第一個(gè)為是否啟 用，第二個(gè)指定工具樣位置(相對(duì)于body ayer ),如：true,both o 工具樣位置 口J選 值：top ，” bott

19、om ,a both 如果 工具欄在上面，則工具欄id為“ t +表格id ; 如果在下面則為+表格id；如果只有一 個(gè)工具欄則為“+表格id false, 否 totaltime int ege r 只讀屬性，計(jì)算加載數(shù)據(jù)的時(shí)間。目前支持xml 跟json數(shù)據(jù) 0 否 treedatatyp e mix ed 數(shù)據(jù)類型，通常情況下與datatype相同，不會(huì)變 null 否 treeGrid boo lea n 啟用或者禁用treegrid模式 false 否 treeGridMod el str ing treeGrid所使用的方法 Xested 否 treelc ons arr ay 樹

20、的圖標(biāo)，默認(rèn)值： plus:J ui-ico n-tria ngleTF,mi nu s:ui-ic on-tria ngleT-s, leaf: ui-ic onradio-off A_ treeReader arr ay 擴(kuò)展表格的colModel且加在colModel疋義的后 面 A- tree_root_l evel num eri c r oot兀素的級(jí)別， 0 ; A- userData arr ay 從request中取得的一些用戶信息 array userData OnF ooter boo lea n 當(dāng)為true時(shí)把userData放到底部,用法：如果 userData的值

21、與colModel的值相同，那么此列 就顯不 正確的值，如果不等那么此列就為空 false viewrecords boo lea n 是否要顯示總記錄數(shù) false A viewsortcol s arr ay 定義排序列的外觀跟行為。數(shù)據(jù)格式： false, ? verticar , true.第個(gè)參數(shù)是說，是 否都要顯示排序列的圖標(biāo)，false就是只顯示 當(dāng) 前 排序列的圖標(biāo)；第二個(gè)參數(shù)是指圖標(biāo)如何顯 zj, vertical :排序圖標(biāo)垂直放置 horizontal :排序 圖標(biāo)水平放置；第三個(gè)參數(shù)指單擊功能， true :單擊列可排序,false :單擊圖標(biāo)排序。說 明：如果第三個(gè)參

22、數(shù)為false則第一個(gè)參數(shù)必須為 Ere否則不能排序 A width num ber 如果設(shè)置則按此設(shè)置為主，如果沒有設(shè)置則按 colModel中定義的寬度計(jì)算 none A xmlReader arr ay 對(duì)數(shù)據(jù)結(jié)構(gòu)的描述 A Jqgrid學(xué)習(xí) ColModel API ColModel是jqGrid里最重要的一個(gè)屬性，設(shè)置表格列的屬性。 屬性 數(shù)據(jù) 類型 備注 默認(rèn) 值 alig n stri ng left, cen ter, right left classe stri 設(shè)置列的css。多個(gè)class之間用空格分隔,如：classl empt s ng class2，o表格默認(rèn)的cs

23、s屬性是ui-ellipsis y stri ng datefm stri ng ” /”- ”，and ” . ”都是有效的日期分隔符。y,Y,yyyy年 (y yy 刀 m, mm for monthsd, dd 日 ISO Date (Y-m - d) defval stri ng 查詢字段的默認(rèn)值 空 editab e bool ean 單兀格是否町編輯 fals e editop tions arra y 編輯的一系列選項(xiàng)。 name: _department_id , index: _department_id，, w idth:200, editable: true, ed it

24、 type：，selec t，, ed ito pt ion s: dataUrl: ”$ ctx/admin/deplistforstu. action，這 個(gè)是演示動(dòng)態(tài)從服務(wù)器端獲取數(shù)據(jù)。 empt y editru es arra y 編輯的規(guī)貝 U (name:? age， , index:age?, width:90, editable:true, editrules: edithidde n：true, required:true , nu mber:true, minV alue:1 0, maxValue:100,設(shè)定 年齡的最大值為100,最小值為10,而且為數(shù) 字類型，并且

25、為必輸字段。 empt y editty pe stri 川以編輯的類型。口選值：text, textarea, select, checkbox, password, butt on, i mage and file text fixed bool ean 列寬度是否要固定不可變 fals e formop tions arra r 對(duì)于form進(jìn)行編輯時(shí)的屬性設(shè)置 empt V format opti on arra y 對(duì)某些列進(jìn)行格式化的設(shè)置 none format ter mixe d 對(duì)列進(jìn)行格式化時(shí)設(shè)置的函數(shù)名或者類型 name: sex , index:，sex，, align

26、： center，,width:60,editable:true, edittype:，se lec t , ed ito pt ions: value:0:待疋;1:男;2: 女, formatter: function(cellvalue, options, rowObject) var temp = jsonp、local or die nt Side、xmlstring json stri page: yyy , ng 、script function (,) Json數(shù)據(jù) 需要定義jsonReader來跟服務(wù)器端返回的數(shù)據(jù)做對(duì)應(yīng)，其默認(rèn)值: json Reader : root: :

27、rows, page: z，pagez，, total: total/z, records: records, repeatitems: true, cell: cell, id： id , userdata: ，zuserdataz，, subgrid: root:rows, repeatitems: true, cell：/zcellz/ 這樣服務(wù)器端返回的數(shù)據(jù)格式: total: xxx， records: zzz, rows : id: 1，cell：rcellir； z，celll2 cell23, id:2，cell: z/cell2rz, cell22, jsonReader 的

28、屬性 total 總頁(yè)數(shù) page 當(dāng)前頁(yè) records 查詢出的記錄數(shù) rows 包含實(shí)際數(shù)據(jù)的數(shù)組 id 行id cell 當(dāng)前行的所有單元格 自定義: jQuery（%ridid）. jqGrid（ jsonReader : :root:invdata, page: z，currpagez total: totalpages, records: totalrecords， 11 cell: invrow ); totalpages: xxx, currpage: yyy， totalrecords: zzz， invdata : invrow:cellll, id:2，invrow:

29、Tcelr； cell22，cell23, repeatitems指明每行的數(shù)據(jù)是可以重復(fù)的，如果設(shè)為false來搜索元素，這個(gè)名字就 ,則會(huì)從返回的數(shù)據(jù)中按名字 jsonReader : root: z/invdata，z, page: currpage, total: totalpages, records: totalrecords, repeatiterns: false, id: 0 totalpages: xxx, currpage: yyy， totalrecords: zzz, in vdata : in vid:T：i nvdate: /，cellll/，, amou nt:

30、，zcelll2，z, tax: /，celll3，z, to t al:1234， note:somenote, in vid:2, i nvdate:，cell21， amou nt: cell22, tax: cell23，to tal:2345, note: z，some note, 此例中，id屬性值為a invid ”。 一旦當(dāng)此屬性設(shè)為false時(shí)，我們就不必把所有在colModel定義的name值都賦值。因?yàn)?是按name來進(jìn)行搜索元素的，所以他的排序也不是按colModel中指定的排序結(jié)果。 用戶數(shù)據(jù)(user data)在某些情況下，我們需要從服務(wù)器端返回一些參數(shù)但并不想直

31、 接把他們顯示到表 格中，而是想在別的地方顯示，那么我們就需要用到userdata標(biāo) 簽 jsonReader: userdata: userdata, total: xxx， page: yyy, records: zzz， userdata: totalinvoice:240. 00, tax:40. 00, rows id：T, cell:/zcellirz, celll2，celll3, id:2， cell:cell21， cell22， cell23, 在客戶端我們可以有下面兩種方法得到這些額外信息: 1. jQuery (，grid_id，/). getGridParam(，us

32、erData，) 2. jQuery (，grid_id，0 . getUserDataO 3. jQuery (，grid_id，0 . getUserDataltem ( key ) Jqgrid學(xué)習(xí)事件 var lastSel; jQuery(“#gridid). jqGrid( onSelectRow: function(id) 辻(id lastSel=id; jQuery (5 #gridid，). editRow(id,true); , ) 事件 參數(shù) 備注 afterl nsertRow rowidrowdatarowe1em 當(dāng)插入每行時(shí)觸發(fā)。rowid插入當(dāng) 前行的id ;

33、 rowdata插入行的數(shù) 據(jù)，格式為 name: value , name 為 colModel中的名字 beforeRequest none 向服務(wù)器端發(fā)起請(qǐng)求之前觸發(fā)此 事件但如果datatype是一個(gè)fun ctio n時(shí)例外 beforeSelectRow rowid, e 當(dāng)用戶點(diǎn)擊當(dāng)前行在未選擇此 行 時(shí)觸發(fā)。rowid :此行id ; e:事 件對(duì)象。返回值為tu“或者 false。如果返回true則選擇完 成，如果返回false則不會(huì)選擇 此 行也不會(huì)觸發(fā)其他事件 gridComplete none 當(dāng)表格所有數(shù)據(jù)都加載完成而且 其他的處理也都完成時(shí)觸發(fā)此事 件，排序，翻頁(yè)同

34、樣也會(huì)觸發(fā)此 事件 oadComplete xhr 當(dāng)從服務(wù)器返回響應(yīng)時(shí)執(zhí)行， xhr I XNILHttpRequest 對(duì)象 oadError xhr, status, error 如果請(qǐng)求服務(wù)器失敗則調(diào)用此 方 法。xhr： XMLHttpRequest 對(duì) 象； satus :錯(cuò)誤類型，字符串類型； error : exception 對(duì)象 on CellSelect rowid, iCol, cellc onten t, e 當(dāng)點(diǎn)擊單兀格時(shí)觸發(fā)。rowid :當(dāng) 前行id ; iCol :當(dāng)前單元格索 引；cellContent :當(dāng)刖單兀格內(nèi) 容；e:eve nt對(duì)象 on dbl

35、ClickRow rowid, iRow, iCol, e 雙擊行時(shí)觸發(fā)。rowid :當(dāng)前行 id ; iRow：當(dāng)前行索引位置； iCol :當(dāng)前單兀格位置索引；e:eve nt對(duì)象 on HeaderClick gridstate 當(dāng)點(diǎn)擊顯示/隱藏表格的那個(gè)按鈕 時(shí)觸發(fā)；gridstate ：表格狀態(tài)，叮 選值： visible or hidden on Pagi ng pgButt on 點(diǎn)擊翻頁(yè)按鈕填充數(shù)據(jù)之前觸發(fā) 此事件，同樣當(dāng)輸入頁(yè)碼跳轉(zhuǎn)頁(yè) 面時(shí)也會(huì)觸發(fā)此事件 on RightClickRow rowid, iRow, iCol, e 在行上右擊鼠標(biāo)時(shí)觸發(fā)此事件。 rowid :

36、當(dāng)刖行id ; iRow：當(dāng)刖行 位置索引；iCol :當(dāng)前單元格 位置索引；e: eve nt對(duì)象 on SelectAll aRowids, status multiselect為ture 且點(diǎn)擊頭部 的checkbox時(shí)才會(huì)觸發(fā)此事 件。 aRowids :所有選中行的id集合，為 個(gè)數(shù)組。status : boolean 變量 說明checkbox的 選擇狀態(tài),true 選中false不 選中。無論checkbox 是否選擇，aRowids始終有值 on SelectRow rowid, status 當(dāng)選擇行時(shí)觸發(fā)此事件。rowid : 當(dāng)前彳丁 id ; status :選擇狀態(tài)，

37、 -P| multiselect為true時(shí)此參數(shù)才 可用 on SortCol in dex,iCol, sortorder 當(dāng)點(diǎn)擊排序列但是數(shù)據(jù)還未進(jìn)行 變化時(shí)觸發(fā)此事件。index I name 在colModel中位置索引；iCol :當(dāng) 前單兀格位置索引；sortorder : 排序狀態(tài):desc或者asc resizeStart eve nt, i ndex 當(dāng)開始改變一個(gè)列寬度時(shí)觸發(fā) 此事件。eve nt : eve nt對(duì)象； index :當(dāng)刖列在colModel中位置 索引 resizeStopn ewidth, in dex當(dāng)列寬度改變之后觸發(fā)此事件。 newidth :

38、列改變后的寬度； index :當(dāng)刖列在colModel中的 位 置索引 serializeGridData postData 向服務(wù)器發(fā)起請(qǐng)求時(shí)會(huì)把數(shù)據(jù)進(jìn) 行序列化，用戶自定義數(shù)據(jù)也可 以被提交到服務(wù)器端 Jqgrid學(xué)習(xí)方法 jqGrid的方法,從3. 6開始已經(jīng)完全兼容jQuery UI庫(kù)。 jQuery (z/#grid_idzz) jqGridMethod( parameterl, parameterN ); jQuery(“#grid_id) setGridParam() hideCol (z，somecol) trigger (z，re loadGrid); 如果使用新的API：

39、 jQuery (，#grid_id，/) jqGrid(，method , parameterl, parameterN ); jQuery(z，#grid_id，z) jqGrid( setGridParam，, ) jqGrid(，hideCoT , som ecolz/). trigger CreloadGrid); jqGrid配置使用新的api My First Grid /s cript jQuery. jgrid.no_legacy_api = true; v/head - - jqGrid方法 方法名 參數(shù) 返回值 說明 addJSOXData data none 使用傳來的

40、data數(shù)據(jù)填充表格。使用方 var my grid 二 jQuery ( ”+grid_id) var myjson grid = eval ( ( +jsonresponse. responseTe mygrid. addJSONData(myjs on grid); myjson grid =n ull; addRowData rowid, data, positi on, srcrowid 成功為 true,否 則為 fa 1 QA 根據(jù)參數(shù)插入一仃新的數(shù)據(jù)，rowid為的 數(shù)據(jù),position為新增仃的位置,sr位置。 data 數(shù)據(jù)格式：namel: value 1,為在 col

41、Model 中指定的名稱 addXMLData data none 根據(jù)傳來的數(shù)據(jù)填充表格。用法:var jQuery ( ”# +grid_id) 0; mygrid. addXmlData(xmlresp on se.resp clearGridData clearfooter jqGrid 對(duì)象 清除表格當(dāng)前加載的數(shù)據(jù)。如果clearf 法刪除表格最后一行的數(shù)據(jù) delRowData rowid 成功為 true 否 則為 false 根據(jù)rowid刪除行，但不會(huì)從服務(wù)器端 footerData action, data, format gGrid 對(duì)象 設(shè)置或者取得底部數(shù)據(jù)。actio

42、n : “ ge 為get,如果為“ get返回值為n colMode 1中名稱。如果為“set ”則值 是 getCell rowid, iCol 單元格內(nèi) 返回指定rowid , iCol的單兀格內(nèi)容， class, properties 對(duì)象 列的位置索引，從o開始；data :列顯修 改;class :如果是string則會(huì)使用 入到 單兀格的css中，女【果是array貝中； properties :設(shè)置 label 的屬性 setRowData rowid, data, cssprop 成功 true 否 則 false 更新行的值，rowid為行id。data值格n amel:

43、valuel, name2: value2, nam cssprop :如 果是string貝U會(huì)使用addC的css中，如 果是array或者對(duì)象則會(huì) setSelectio n rowid, on selectrow qGrid 對(duì)象 選擇或反選指定彳丁。如果on selectrow on SelectRow, on selectrow 默認(rèn)為 tur showCol coin ame jqGrid 顯示列。coiname可 以是數(shù)組name namel 或者name2必須是colModel中丨 trigger ( reloadGrid ”) none jqGrid 對(duì)象 重新加載當(dāng)前表格

44、，也會(huì)向服務(wù)器發(fā)起 updateColu mns none none 同步表格的寬度，用在表格拖拽時(shí)，用 mygrid=jQuery( ” #grid id ”) 0 ； myg jqGdd的通用方法和設(shè)置 這些方法并不和jqGrid對(duì)象綁定，可以隨意使用: jQuery. jgrid jqGridF un cti on( parameterl, parameterN ); 函數(shù)名 參數(shù) 返回值 說明 ajaxOpti ons 空對(duì)象 none 這個(gè)函數(shù)II以改變jqgrid中用到的ajax 函數(shù)可以覆蓋當(dāng)前所有aj加請(qǐng)求設(shè)置。從 有3個(gè)級(jí)別的ajax設(shè)置：第一個(gè)級(jí)別就 如也請(qǐng)求；第一個(gè)級(jí)別就

45、是通過此函數(shù)設(shè) 設(shè)置是控制全局ajax請(qǐng)求的設(shè)置： jQuery. exte nd(jQuery. ajax(method sp opti on s,ajaxOptio ns, ThirdLevelaja 然我們也可以單獨(dú)設(shè)置ajax的參數(shù) qlD stri ng 解析后的string 轉(zhuǎn)義字符串，把兩個(gè)反斜杠()轉(zhuǎn)化為單 grid htmlDecode stri ng 轉(zhuǎn)換后string 把轉(zhuǎn)碼后的字符串還原 grid. htmlE ncode stri ng 編碼后的string 把字符串編碼 grid format stri ng 格式化后string 簡(jiǎn)單字符串模板。用法：Exampl

46、e jQueryjqgformat(“ Please en ter a va and 1. ”, 4, resuIt :“ Please enter 4 and 8. ” grid getCell In dex cell index 這個(gè)方法是用來修復(fù)在ie7里的一個(gè)bug grid.stri ngToDoc xmlstring xmlDoc 把xmlstring轉(zhuǎn)換為dom對(duì)象 grid.stripHtml content new content 去掉html標(biāo)簽返回標(biāo)簽中內(nèi)容 grid.parse son stri ng 對(duì)象 把一個(gè)jsonstring轉(zhuǎn)換為json對(duì)象 jqGrid的方

47、法 方法洛 參數(shù) 返回值 說明 filterGrid grid_id, params HTML 對(duì) 象 構(gòu)造jqGrid的查詢界面。grid_id:表格id filterToolbar params jqGrid 對(duì)象 同上。不同的是搜索輸入框在header層下： getColProp coin ame array 返回指左列的屬性集合。name為colModel GridDestroy .1 . boolea n 從dom上刪除此grid GridU nload 1 boolea n 跟GridDestroy不同的是table對(duì)象跟pac setGridState state qGrid 對(duì)

48、象 設(shè)置grid的狀態(tài)，顯示或者隱藏。這個(gè)方法 setColProp coin ame, properties qGrid 對(duì)象 設(shè)置新的屬性，對(duì)于動(dòng)態(tài)改變列屬性是非常 jQuery( ” #grid id ”).setColProp C coIna sortGrid coin ame, reload qGrid 對(duì)象 按指定列進(jìn)行排序。效果同 setGridParam(sort name:J m yn ame)trig 新加載數(shù)據(jù) updateGridRows data, rowid namejs on reader boolea n 修改表格中某行的數(shù)據(jù)，data數(shù)據(jù)格式：n ame: v

49、alue , n ame2: value2, , n ame 為 稱。 jsonreader : boolean 值，默認(rèn) false 并不是 name value形式而只是value Jqgrid學(xué)習(xí)酉己fi json IE8 , FF3以及Chrome 3已經(jīng)支持JSON配置: vmeta http-equiv二Content-Type content二text/html; charset二utf-8 / -My First Grid script type二text/javascript jQuery. jgrid.useJSON = true; 這段代碼要放到語(yǔ)言包之后jqGrid.j

50、s文件之前。 如果瀏覽器不支持JSON那么我們只能用eval函數(shù)解析json. 除了 JqGrid本身提供對(duì)json的類庫(kù)外，我們可以使用JSON. parse來處理JSON配置如下： vhtml xml ns二/1999/xhtml xml: la ng二e n la ng=，/e n My First Grid -lightness/jquery-ui-l 7. 1. custom. css / jqgrid css / link rel=，/stylesheet type二text/css media二screen href=，css/ui link re

51、l=，/stylesheetype二text/css media二screen href二css/ui /script script type二text/javascript jQuery. extend (jQuery. jgrid, parse:function(jsstring) return JSON. parse(jsstring); ); Jqgrid學(xué)習(xí)翻頁(yè) jqGrid的翻頁(yè)要定義在html里，通常是在grid的下面，且是一個(gè)div對(duì)象: jQuery (z，#grid_id，z). jqGrid( pager : #gridpager，, )； pager : 不必給翻頁(yè)設(shè)置

52、任何的css屬性。在jqGrid里定義的翻頁(yè)可以是:pager : ? ttgridpager，, * gridpager* or pager : jQuery(* #gridpager，).推 薦使用前兩個(gè)，當(dāng)使用其他方式時(shí)jqGfid的導(dǎo)入導(dǎo)出功能時(shí)會(huì)引起錯(cuò)誤。 導(dǎo)航欄的屬性： $ jgrid = defaults : recordtext: View 0 一 1 of 2, emptyrecords: No records to view, loadtext: Loading、 如果想改變這些設(shè)置： 1.jQuery.exte nd(jQuery. jgrid. defauIts， em

53、ptyrecords: Nothi ng to display”，.)； 2. jQuery (#grid_id) jqGrid ( pager : ? #gridpager, emptyrecords: Noth ing to display, ); 導(dǎo)航欄的屬性: 屬性名 類型 說明 默認(rèn)值 是否可 以被修 改 astpage n teger 只讀屬性，總頁(yè)數(shù) 0 N0 pager mixed 導(dǎo)航欄對(duì)象，必須是一個(gè)有效的html兀 素，位置可以隨意 空字符 串 NO pagerpos stri ng 定義導(dǎo)航樣的位置，默認(rèn)分為三部分：翻 頁(yè)，導(dǎo)航工具及記錄信息 cen ter NO pg

54、butt ons boolea n 是否顯示翻頁(yè)按鈕 true NO pgin put boolea n 是否顯示跳轉(zhuǎn)頁(yè)面的輸入框 true NO pgtext string 頁(yè)面信息，第一個(gè)值是當(dāng)前頁(yè)第一個(gè)值是 總頁(yè)數(shù) 語(yǔ)言包 YES recco unt in teger 只讀屬性，實(shí)際記錄數(shù)，千萬不能跟 records參數(shù)搞混了，通常情況下他們是相 同的，假如我們定義rowNum=15但 我們從服 務(wù)器端返回的記錄為20即 0 NO records=20,而 reccount=15,表格中也 顯示15條記錄 NO recordpos stri ng 定義記錄信息的位置，可選值：left,

55、cen ter, right right records n teger 只讀屬性，從服務(wù)器端返回的記錄數(shù) none NO recordtext string 顯不記錄的信息，只有當(dāng)viewrecords為 true時(shí)起效，且記錄數(shù)必須大于0 語(yǔ)言包 yes rowList array 可以改變表格可以顯示的記錄數(shù)，格式 為10, 20, 30 array no rowXum n teger 設(shè)置表格可以顯示的記錄數(shù) 20 yes viewrecordsboolea n 是否要顯示總記錄數(shù)信息 false no jQuery(/z#grid_idz/) setGridParam( rowNum

56、: 10) trigger (z/reloadGrid/z); 跟翻頁(yè)相關(guān)的事件只有一個(gè)：on Pagi ng on Pagi ng pgButt on 當(dāng)點(diǎn)擊翻頁(yè)按鈕但還為展現(xiàn)數(shù)據(jù)時(shí)觸發(fā)此事件，當(dāng)然這 跳轉(zhuǎn)欄輸入頁(yè)碼改變頁(yè)時(shí)也同樣觸發(fā)此事件。參數(shù) pgButton nJ 選值： first, last, prev, next jqGdd的翻頁(yè)導(dǎo)航是一個(gè)方法，你可以事先定義一些其他操作，比如：編輯、新增、刪除及搜索。也 可以增加自定義的函數(shù)。導(dǎo)航工具欄是定義到翻頁(yè)控件上的。定義如下： vtable id二lisx/table v/div -jQuery(“#grid_id) jqGrid( )

57、; jQuery (/z#grid_id，z). navGridC #gridp8gei? , parameters, prmEdit, prmA dd, prmDel, prmSearch, prmView); jQuery (z，#grid_id，z) jqGrid( pager : ttgridpager , )； jQuery (/z#grid_id，z). jqGridC navGrid，, ftgridpager , parameters, prmE dit, prmAdd, prmDel, prmSearch, prmView); jQuery (/z#grid_id，z). j

58、qGrid( pager : ttgridpager , ).navGridC ttgridpager , parameters, prmEdit, prmAdd, prmDel, prm Search, prmView); grid_id : gridpager 表格id :導(dǎo)航欄id parameters 參數(shù)列表 事件 prmEdit, prmAdd, prmDel, prmSearch, prmView : $.jgrid = search : caption: Search Fi nd:Fi nd”. Reset: Reset, odata : equal , not equaT ,

59、 less, less or equal , great er J greater or equal , begins with J does not begin with J is in J is not in, ends with , does not end with , contains，J does not conta in, groupOps: op: AND, text: all , op: 0R，text: a n y , matchText: match, rulesText: rules7 , edit : addCaption: Add Record, edit Cap

60、tion: Edit Record, bSubmit: Submit, bCancel: Cancel, bClose: Close, saveData: Data has been changed! Save changes?7, bYes : Yes, bNo :No, bExit : Cancel, , view : caption: View Record, bClose: Close , del : Cancel caption: Delete, msg: Delete selected record(s)?z，, bSubmit: Delete, bCancel: , nav :