jqGrid各種參數(shù)詳解

1、jqGrid各種參數(shù)詳解 JQGrid JQGrid是一個在jquety基礎(chǔ)上做的一個表格控件，以ajax的方式和服務(wù)器端 通信。 JQGrid Demo是一個在線的演示項目。在這里，可以知道jqgrid可以做什么事 情。 下面是轉(zhuǎn)自其他人blog的一個學(xué)習(xí)資料，與其說是學(xué)習(xí)資料，說成查詢幫助文檔更加 合適。 jqGrid學(xué)習(xí)之安裝 jqGrid安裝很簡單，只需把相應(yīng)的css、js文件加入到頁面中即可。按照官網(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 在頁面中寫法： Java代碼 html xml ns二http:/www. w3org/1999/xhtml xml:la ng二n la ng二e My First Grid 編輯自己的themeo jqGrid 也并不需要把所有的css文件都引入進來，只需導(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可以以一種更加簡單的方式來展現(xiàn)你數(shù)據(jù)庫的信息，而且也可以把客戶 端數(shù)據(jù)傳回給服務(wù)器端。 對于jqGrid我們所關(guān)心的就是：必須有一段代碼把一些頁面信息保存到數(shù)據(jù)庫中，而 且也能夠把響應(yīng)信息返回給客戶端。jqGrid是用如也來實現(xiàn)對請求與響應(yīng)的處理。 jqGrid參數(shù) 稱 名 類型 值 認 默 1 一可修改 IX U str應(yīng) r g t n s i 類 選 可 o lx , XIrt 認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 列顯示名稱，是一個數(shù)組對象 colModel Arr ay 常用到的屬性：name列顯不的名稱；index傳到服務(wù) 器端用來排序用的列名稱；width列寬 度；align對齊方式；sortable是否可以排序 pager str ng 定義翻頁用的導(dǎo)航欄，必須是有效的html元素。 翻頁工具欄可以放置在html頁面任意位置 rowNum nt 在g

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

6、 null 是 altclass Str ing 用來指定行顯示的CSS,叮以編輯自己的CSS文 件，只有當alt Rows設(shè)為ture時起作用 ui-priorit y- sec on dar y altRows boo lea n 設(shè)置表格zebra-striped值 autoe ncode boo lea n 對url進行編碼 false 是 autowidth boo lea n 如果為ture時，則當表格在首次被創(chuàng)建時會根據(jù) 父元素比例重新調(diào)整表格寬度。如果父元素寬度 改變，為了使表格寬度能夠自動調(diào)整則需要實 現(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 只有當datatype為local時起作用。當排序時 不選擇 當前行 true 是 directi on str

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

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

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

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

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

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

14、會被發(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ù)大于0時才會顯示此信息 resizeclass str ing 定義一個class到一個列上用來顯示列寬度調(diào)整時 的效果 空值 rowList arr ay 一個數(shù)組用來調(diào)整表格顯示的記錄數(shù)，此參數(shù)值 會替代rowNum參數(shù)值傳給服務(wù)器端。 rownu mbers boo lea n 如果為tue則會在表格左邊新增一列，顯示行 順 序號，從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)建一個動態(tài)滾動的表格，當為true時，翻頁 欄 被禁用，使用垂直滾動條加載數(shù)據(jù)，且在首次訪 問服務(wù)器端時將加載所有數(shù)據(jù)到客戶端。當此參 數(shù)為數(shù)字時，表格只控制可見的幾行，所有數(shù)據(jù) 都在這幾行中加載 false scrollOffse int ege r 設(shè)置垂直滾動條寬度 18 scrollrows boo lea n 當為true時讓所選擇的行可見 false selarrrow arr ay 只

17、讀屬性，用來存放當前選擇的行 array 臺 selrow str ing 只讀屬性，最后選擇行的id null shri nkToFit boo lea n 此屬性用來說明當初始化列寬度時候的計算類型， 如果為ture,則按比例初始化列寬度。如果為 false,則列寬度使用colModel指定的寬度 true 臺 sortable boo lea n 是否可排序 false sort name str ing 排序列的名稱，此參數(shù)會被傳到后臺 空字符串 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會把每彳J的id 值加到url中 空值 subGridWidt h int ege r subgrid列的寬度 20 toolbar arr ay 表格的工具欄。數(shù)組中有兩個值，第一個為是否啟 用，第二個指定工具樣位置(相對于body ayer ),如：true,both o 工具樣位置 口J選 值：top ，” bott

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

20、的圖標，默認值： 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 擴展表格的colModel且加在colModel疋義的后 面 A- tree_root_l evel num eri c r oot兀素的級別， 0 ; A- userData arr ay 從request中取得的一些用戶信息 array userData OnF ooter boo lea n 當為true時把userData放到底部,用法：如果 userData的值

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

22、數(shù)為false則第一個參數(shù)必須為 Ere否則不能排序 A width num ber 如果設(shè)置則按此設(shè)置為主，如果沒有設(shè)置則按 colModel中定義的寬度計算 none A xmlReader arr ay 對數(shù)據(jù)結(jié)構(gòu)的描述 A Jqgrid學(xué)習(xí) ColModel API ColModel是jqGrid里最重要的一個屬性，設(shè)置表格列的屬性。 屬性 數(shù)據(jù) 類型 備注 默認 值 alig n stri ng left, cen ter, right left classe stri 設(shè)置列的css。多個class之間用空格分隔,如：classl empt s ng class2，o表格默認的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 查詢字段的默認值 空 editab e bool ean 單兀格是否町編輯 fals e editop tions arra y 編輯的一系列選項。 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，這 個是演示動態(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 川以編輯的類型?？谶x值：text, textarea, select, checkbox, password, butt on, i mage and file text fixed bool ean 列寬度是否要固定不可變 fals e formop tions arra r 對于form進行編輯時的屬性設(shè)置 empt V format opti on arra y 對某些列進行格式化的設(shè)置 none format ter mixe d 對列進行格式化時設(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ù)做對應(yīng)，其默認值: 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 總頁數(shù) page 當前頁 records 查詢出的記錄數(shù) rows 包含實際數(shù)據(jù)的數(shù)組 id 行id cell 當前行的所有單元格 自定義: 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來搜索元素，這個名字就 ,則會從返回的數(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 ”。 一旦當此屬性設(shè)為false時，我們就不必把所有在colModel定義的name值都賦值。因為 是按name來進行搜索元素的，所以他的排序也不是按colModel中指定的排序結(jié)果。 用戶數(shù)據(jù)(user data)在某些情況下，我們需要從服務(wù)器端返回一些參數(shù)但并不想直

31、 接把他們顯示到表 格中，而是想在別的地方顯示，那么我們就需要用到userdata標 簽 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 當插入每行時觸發(fā)。rowid插入當 前行的id ;

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

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

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

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

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

38、列改變后的寬度； index :當刖列在colModel中的 位 置索引 serializeGridData postData 向服務(wù)器發(fā)起請求時會把數(shù)據(jù)進 行序列化，用戶自定義數(shù)據(jù)也可 以被提交到服務(wù)器端 Jqgrid學(xué)習(xí)方法 jqGrid的方法,從3. 6開始已經(jīng)完全兼容jQuery UI庫。 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 對象 清除表格當前加載的數(shù)據(jù)。如果clearf 法刪除表格最后一行的數(shù)據(jù) delRowData rowid 成功為 true 否 則為 false 根據(jù)rowid刪除行，但不會從服務(wù)器端 footerData action, data, format gGrid 對象 設(shè)置或者取得底部數(shù)據(jù)。actio

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

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

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

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

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

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

48、象 設(shè)置grid的狀態(tài)，顯示或者隱藏。這個方法 setColProp coin ame, properties qGrid 對象 設(shè)置新的屬性，對于動態(tài)改變列屬性是非常 jQuery( ” #grid id ”).setColProp C coIna sortGrid coin ame, reload qGrid 對象 按指定列進行排序。效果同 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 值，默認 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; 這段代碼要放到語言包之后jqGrid.j

50、s文件之前。 如果瀏覽器不支持JSON那么我們只能用eval函數(shù)解析json. 除了 JqGrid本身提供對json的類庫外，我們可以使用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í)翻頁 jqGrid的翻頁要定義在html里，通常是在grid的下面，且是一個div對象: jQuery (z，#grid_id，z). jqGrid( pager : #gridpager，, )； pager : 不必給翻頁設(shè)置

52、任何的css屬性。在jqGrid里定義的翻頁可以是:pager : ? ttgridpager，, * gridpager* or pager : jQuery(* #gridpager，).推 薦使用前兩個，當使用其他方式時jqGfid的導(dǎo)入導(dǎo)出功能時會引起錯誤。 導(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)航欄的屬性: 屬性名 類型 說明 默認值 是否可 以被修 改 astpage n teger 只讀屬性，總頁數(shù) 0 N0 pager mixed 導(dǎo)航欄對象，必須是一個有效的html兀 素，位置可以隨意 空字符 串 NO pagerpos stri ng 定義導(dǎo)航樣的位置，默認分為三部分：翻 頁，導(dǎo)航工具及記錄信息 cen ter NO pg

54、butt ons boolea n 是否顯示翻頁按鈕 true NO pgin put boolea n 是否顯示跳轉(zhuǎn)頁面的輸入框 true NO pgtext string 頁面信息，第一個值是當前頁第一個值是 總頁數(shù) 語言包 YES recco unt in teger 只讀屬性，實際記錄數(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 顯不記錄的信息，只有當viewrecords為 true時起效，且記錄數(shù)必須大于0 語言包 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); 跟翻頁相關(guān)的事件只有一個：on Pagi ng on Pagi ng pgButt on 當點擊翻頁按鈕但還為展現(xiàn)數(shù)據(jù)時觸發(fā)此事件，當然這 跳轉(zhuǎn)欄輸入頁碼改變頁時也同樣觸發(fā)此事件。參數(shù) pgButton nJ 選值： first, last, prev, next jqGdd的翻頁導(dǎo)航是一個方法，你可以事先定義一些其他操作，比如：編輯、新增、刪除及搜索。也 可以增加自定義的函數(shù)。導(dǎo)航工具欄是定義到翻頁控件上的。定義如下： 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 :