JQGrid 参数、属性API
JQGrid是一個(gè)在jquery基礎(chǔ)上做的一個(gè)表格控件,以ajax的方式和服務(wù)器端通信。
JQGrid Demo?是一個(gè)在線的演示項(xiàng)目。在這里,可以知道jqgrid可以做什么事情。下面是轉(zhuǎn)自其他人blog的一個(gè)學(xué)習(xí)資料,與其說(shuō)是學(xué)習(xí)資料,說(shuō)成查詢幫助文檔更加合適。
jqGrid學(xué)習(xí)之?-------------?安裝
jqGrid安裝很簡(jiǎn)單,只需把相應(yīng)的css、js文件加入到頁(yè)面中即可。?
按照官網(wǎng)文檔:
/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
?
在頁(yè)面中寫法:
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>??
需要說(shuō)明的是,jquery-ui的字體大小與jqgrid字體大小不一致,故需要在頁(yè)面上在加上一段?
style來(lái)指定頁(yè)面上文字大小。
?
jqGrid皮膚
從3.5版本開始,jqGrid完全支持jquery UI的theme。我們可以從http://jqueryui.com/themeroller/下載我們所需要的theme。當(dāng)然,你也可以編輯自己的theme。jqGrid?
也并不需要把所有的css文件都引入進(jìn)來(lái),只需導(dǎo)入核心css文件“ui.theme.css?”?以及“ui.core.css”即可,文件位于目錄development-bundle/themes下。
jqGrid原理
jqGrid是典型的B/S架構(gòu),服務(wù)器端只是提供數(shù)據(jù)管理,客戶端只提供數(shù)據(jù)顯示。換句話說(shuō),jqGrid可以以一種更加簡(jiǎn)單的方式來(lái)展現(xiàn)你數(shù)據(jù)庫(kù)的信息,而且也可以把客戶端數(shù)據(jù)傳回給服務(wù)器端。?
對(duì)于jqGrid我們所關(guān)心的就是:必須有一段代碼把一些頁(yè)面信息保存到數(shù)據(jù)庫(kù)中,而且也能夠把響應(yīng)信息返回給客戶端。jqGrid是用ajax來(lái)實(shí)現(xiàn)對(duì)請(qǐng)求與響應(yīng)的處理。
jqGrid參數(shù)
| 名稱 | 類型 | 描述 | 默認(rèn)值 | 可修改 |
| url | string | 獲取數(shù)據(jù)的地址 | ? | ? |
| datatype | string | 從服務(wù)器端返回的數(shù)據(jù)類型,默認(rèn)xml。可選類型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside | ? | ? |
| mtype | string | ajax提交方式。POST或者GET,默認(rèn)GET | ? | ? |
| colNames | Array | 列顯示名稱,是一個(gè)數(shù)組對(duì)象 | ? | ? |
| colModel | Array | 常用到的屬性:name?列顯示的名稱;index?傳到服務(wù)器端用來(lái)排序用的列名稱;width?列寬度;align?對(duì)齊方式;sortable?是否可以排序 | ? | ? |
| pager | string | 定義翻頁(yè)用的導(dǎo)航欄,必須是有效的html元素。翻頁(yè)工具欄可以放置在html頁(yè)面任意位置 | ? | ? |
| rowNum | int | 在grid上顯示記錄條數(shù),這個(gè)參數(shù)是要被傳遞到后臺(tái) | ? | ? |
| rowList | array | 一個(gè)下拉選擇框,用來(lái)改變顯示記錄數(shù),當(dāng)選擇時(shí)會(huì)覆蓋rowNum參數(shù)傳遞到后臺(tái) | ? | ? |
| sortname | string | 默認(rèn)的排序列。可以是列名稱或者是一個(gè)數(shù)字,這個(gè)參數(shù)會(huì)被提交到后臺(tái) | ? | ? |
| viewrecords | boolean | 定義是否要顯示總記錄數(shù) | ? | ? |
| caption | string | 表格名稱 | ? | ? |
| ajaxGridOptions[a1]? | object | 對(duì)ajax參數(shù)進(jìn)行全局設(shè)置,可以覆蓋ajax事件 | null | 是 |
| ajaxSelectOptions[a2]? | object | 對(duì)ajax的select參數(shù)進(jìn)行全局設(shè)置 | null | 是 |
| altclass | String | 用來(lái)指定行顯示的css,可以編輯自己的css文件,只有當(dāng)altRows設(shè)為?ture時(shí)起作用 | ui-priority-secondary | ? |
| altRows | boolean | 設(shè)置表格?zebra-striped?值 | ? | ? |
| autoencode | boolean | 對(duì)url進(jìn)行編碼 | false | 是 |
| autowidth | boolean | 如果為ture時(shí),則當(dāng)表格在首次被創(chuàng)建時(shí)會(huì)根據(jù)父元素比例重新調(diào)整表格寬度。如果父元素寬度改變,為了使表格寬度能夠自動(dòng)調(diào)整則需要實(shí)現(xiàn)函數(shù):setGridWidth | false | 否 |
| cellLayout | integer | 定義了單元格padding + border?寬度。通常不必修改此值。初始值為 | 5 | 是 |
| cellEdit | boolean | 啟用或者禁用單元格編輯功能 | false | 是 |
| cellsubmit | String | 定義了單元格內(nèi)容保存位置 | ‘remote’ | 是 |
| cellurl | String | 單元格提交的url | 空值 | 是 |
| datastr | String | xmlstring或者jsonstring | 空值 | 是 |
| deselectAfterSort | boolean | 只有當(dāng)datatype為local時(shí)起作用。當(dāng)排序時(shí)不選擇當(dāng)前行 | true | 是 |
| direction | string | 表格中文字的顯示方向,從左向右(ltr)或者從右向左(rtr) | ltr | 否 |
| editurl | string | 定義對(duì)form編輯時(shí)的url | 空值 | 是 |
| emptyrecords | string | 當(dāng)返回的數(shù)據(jù)行數(shù)為0時(shí)顯示的信息。只有當(dāng)屬性?viewrecords?設(shè)置為ture時(shí)起作用 | ? | 是 |
| ExpandColClick | boolean | 當(dāng)為true時(shí),點(diǎn)擊展開行的文本時(shí),treeGrid就能展開或者收縮,不僅僅是點(diǎn)擊圖片 | true | 否 |
| ExpandColumn | string | 指定那列來(lái)展開tree grid,默認(rèn)為第一列,只有在treeGrid為true時(shí)起作用 | 空值 | 否 |
| footerrow[a3]? | boolean | 當(dāng)為true時(shí),會(huì)在翻頁(yè)欄之上增加一行 | false | 否 |
| forceFit | boolean | 當(dāng)為ture時(shí),調(diào)整列寬度不會(huì)改變表格的寬度。當(dāng)shrinkToFit?為false時(shí),此屬性會(huì)被忽略 | false | 否 |
| gridstate | string | 定義當(dāng)前表格的狀態(tài):'visible' or 'hidden' | visible | 否 |
| gridview | boolean | 構(gòu)造一行數(shù)據(jù)后添加到grid中,如果設(shè)為true則是將整個(gè)表格的數(shù)據(jù)都構(gòu)造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow?不能用 | false | 是 |
| height | mixed | 表格高度,可以是數(shù)字,像素值或者百分比 | 150 | 否 |
| hiddengrid | boolean | 當(dāng)為ture時(shí),表格不會(huì)被顯示,只顯示表格的標(biāo)題。只有當(dāng)點(diǎn)擊顯示表格的那個(gè)按鈕時(shí)才會(huì)去初始化表格數(shù)據(jù)。 | false | 否 |
| hidegrid | boolean | 啟用或者禁用控制表格顯示、隱藏的按鈕,只有當(dāng)caption?屬性不為空時(shí)起效 | true | 否 |
| hoverrows | boolean | 當(dāng)為false時(shí)mouse hovering會(huì)被禁用 | false | 是 |
| jsonReader | array | 描述json?數(shù)據(jù)格式的數(shù)組 | ? | 否 |
| lastpage | integer | 只讀屬性,定義了總頁(yè)數(shù) | 0 | 否 |
| lastsort | integer | 只讀屬性,定義了最后排序列的索引,從0開始 | 0 | 否 |
| loadonce | boolean | 如果為ture則數(shù)據(jù)只從服務(wù)器端抓取一次,之后所有操作都是在客戶端執(zhí)行,翻頁(yè)功能會(huì)被禁用 | false | 否 |
| loadtext | string | 當(dāng)請(qǐng)求或者排序時(shí)所顯示的文字內(nèi)容 | Loading.... | 否 |
| loadui | string | 當(dāng)執(zhí)行ajax請(qǐng)求時(shí)要干什么。disable禁用ajax執(zhí)行提示;enable默認(rèn),當(dāng)執(zhí)行ajax請(qǐng)求時(shí)的提示;?block啟用Loading提示,但是阻止其他操作 | enable | 是 |
| multikey | string | 只有在multiselect設(shè)置為ture時(shí)起作用,定義使用那個(gè)key來(lái)做多選。shiftKey,altKey,ctrlKey | 空值 | 是 |
| multiboxonly | boolean | 只有當(dāng)multiselect = true.起作用,當(dāng)multiboxonly?為ture時(shí)只有選擇checkbox才會(huì)起作用 | false | 是 |
| multiselect | boolean | 定義是否可以多選 | false | 否 |
| multiselectWidth | integer | 當(dāng)multiselect為true時(shí)設(shè)置multiselect列寬度 | 20 | 否 |
| page | integer | 設(shè)置初始的頁(yè)碼 | 1 | 是 |
| pagerpos | string | 指定分頁(yè)欄的位置 | center | 否 |
| pgbuttons | boolean | 是否顯示翻頁(yè)按鈕 | true | 否 |
| pginput | boolean | 是否顯示跳轉(zhuǎn)頁(yè)面的輸入框 | true | 否 |
| pgtext | string | 當(dāng)前頁(yè)信息 | ? | 是 |
| prmNames | array | Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null}?當(dāng)參數(shù)為null時(shí)不會(huì)被發(fā)到服務(wù)器端 | none | 是 |
| postData | array | 此數(shù)組內(nèi)容直接賦值到url上,參數(shù)類型:{name1:value1…} | 空array | 是 |
| reccount | integer | 只讀屬性,定義了grid中確切的行數(shù)。通常情況下與records屬性相同,但有一種情況例外,假如rowNum=15,但是從服務(wù)器端返回的記錄數(shù)是20,那么records值是20,但reccount值仍然為15,而且表格中也只顯示15條記錄。 | 0 | 否 |
| recordpos | string | 定義了記錄信息的位置:?left, center, right | right | 否 |
| records | integer | 只讀屬性,定義了返回的記錄數(shù) | none | 否 |
| recordtext | string | 顯示記錄數(shù)信息。{0}?為記錄數(shù)開始,{1}為記錄數(shù)結(jié)束。?viewrecords為ture時(shí)才能起效,且總記錄數(shù)大于0時(shí)才會(huì)顯示此信息 | ? | ? |
| resizeclass | string | 定義一個(gè)class到一個(gè)列上用來(lái)顯示列寬度調(diào)整時(shí)的效果 | 空值 | 否 |
| rowList | array | 一個(gè)數(shù)組用來(lái)調(diào)整表格顯示的記錄數(shù),此參數(shù)值會(huì)替代rowNum參數(shù)值傳給服務(wù)器端。 | [] | 否 |
| rownumbers | boolean | 如果為ture則會(huì)在表格左邊新增一列,顯示行順序號(hào),從1開始遞增。此列名為'rn'. | false | 否 |
| rownumWidth | integer | 如果rownumbers為true,則可以設(shè)置column的寬度 | 25 | 否 |
| savedRow | array | 只讀屬性,只用在編輯模式下保存數(shù)據(jù) | 空值 | 否 |
| scroll | boolean | 創(chuàng)建一個(gè)動(dòng)態(tài)滾動(dòng)的表格,當(dāng)為true時(shí),翻頁(yè)欄被禁用,使用垂直滾動(dòng)條加載數(shù)據(jù),且在首次訪問(wèn)服務(wù)器端時(shí)將加載所有數(shù)據(jù)到客戶端。當(dāng)此參數(shù)為數(shù)字時(shí),表格只控制可見(jiàn)的幾行,所有數(shù)據(jù)都在這幾行中加載 | false | 否 |
| scrollOffset | integer | 設(shè)置垂直滾動(dòng)條寬度 | 18 | 否 |
| scrollrows | boolean | 當(dāng)為true時(shí)讓所選擇的行可見(jiàn) | false | 是 |
| selarrrow | array | 只讀屬性,用來(lái)存放當(dāng)前選擇的行 | array | 否 |
| selrow | string | 只讀屬性,最后選擇行的id | null | 否 |
| shrinkToFit | boolean | 此屬性用來(lái)說(shuō)明當(dāng)初始化列寬度時(shí)候的計(jì)算類型,如果為ture,則按比例初始化列寬度。如果為false,則列寬度使用colModel指定的寬度 | true | 否 |
| sortable | boolean | 是否可排序 | false | 否 |
| sortname | string | 排序列的名稱,此參數(shù)會(huì)被傳到后臺(tái) | 空字符串 | 是 |
| sortorder | string | 排序順序,升序或者降序(asc or desc) | asc | 是 |
| subGrid | boolean | 是否使用suggrid | false | 否 |
| subGridModel | array | subgrid模型 | array | 否 |
| subGridType | mixed | 如果為空則使用表格的dataType | null | 是 |
| subGridUrl | string | 加載subgrid數(shù)據(jù)的url,jqGrid會(huì)把每行的id值加到url中 | 空值 | 是 |
| subGridWidth | integer | subgrid列的寬度 | 20 | 否 |
| toolbar | array | 表格的工具欄。數(shù)組中有兩個(gè)值,第一個(gè)為是否啟用,第二個(gè)指定工具欄位置(相對(duì)于body layer),如:[true,”both”]?。工具欄位置可選值:“top”,”bottom”, “both”.?如果工具欄在上面,則工具欄id為“t_”+表格id;如果在下面則為?“tb_”+表格id;如果只有一個(gè)工具欄則為?“t_”+表格id | [false,''] | 否 |
| totaltime | integer | 只讀屬性,計(jì)算加載數(shù)據(jù)的時(shí)間。目前支持xml跟json數(shù)據(jù) | 0 | 否 |
| treedatatype | mixed | 數(shù)據(jù)類型,通常情況下與datatype相同,不會(huì)變 | null | 否 |
| treeGrid | boolean | 啟用或者禁用treegrid模式 | false | 否 |
| treeGridModel | string | treeGrid所使用的方法 | Nested | 否 |
| treeIcons | array | 樹的圖標(biāo),默認(rèn)值:{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | ? | 否 |
| treeReader | array | 擴(kuò)展表格的colModel且加在colModel定義的后面 | ? | 否 |
| tree_root_level | numeric | r oot元素的級(jí)別, | 0 | 否 |
| userData | array | 從request中取得的一些用戶信息 | array | 否 |
| userDataOnFooter | boolean | 當(dāng)為true時(shí)把userData放到底部,用法:如果userData的值與colModel的值相同,那么此列就顯示正確的值,如果不等那么此列就為空 | false | 是 |
| viewrecords | boolean | 是否要顯示總記錄數(shù) | false | 否 |
| viewsortcols | array | 定義排序列的外觀跟行為。數(shù)據(jù)格式:[false,'vertical',true].第一個(gè)參數(shù)是說(shuō),是否都要顯示排序列的圖標(biāo),false就是只顯示?當(dāng)前排序列的圖標(biāo);第二個(gè)參數(shù)是指圖標(biāo)如何顯示,vertical:排序圖標(biāo)垂直放置,horizontal:排序圖標(biāo)水平放置;第三個(gè)參數(shù)指單擊功?能,true:單擊列可排序,false:單擊圖標(biāo)排序。說(shuō)明:如果第三個(gè)參數(shù)為false則第一個(gè)參數(shù)必須為ture否則不能排序 | ? | 否 |
| width | number | 如果設(shè)置則按此設(shè)置為主,如果沒(méi)有設(shè)置則按colModel中定義的寬度計(jì)算 | none | 否 |
| xmlReader | array | 對(duì)xml數(shù)據(jù)結(jié)構(gòu)的描述 | ? | 否 |
?
Jqgrid學(xué)習(xí)?-------ColModel API
ColModel?是jqGrid里最重要的一個(gè)屬性,設(shè)置表格列的屬性。
| 屬性 | 數(shù)據(jù)類型 | 備注 | 默認(rèn)值 |
| align | string | left, center, right. | left |
| classes | string | 設(shè)置列的css。多個(gè)class之間用空格分隔,如:'class1 class2'?。表格默認(rèn)的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 | 查詢字段的默認(rèn)值 | 空 |
| editable | boolean | 單元格是否可編輯 | false |
| editoptions | array | 編輯的一系列選項(xiàng)。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}},這個(gè)是演示動(dòng)態(tài)從服務(wù)器端獲取數(shù)據(jù)。 | empty |
| editrules | array | 編輯的規(guī)則{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},設(shè)定?年齡的最大值為100,最小值為10,而且為數(shù)字類型,并且為必輸字段。 | empty |
| edittype | string | 可以編輯的類型。可選值:text, textarea, select, checkbox, password, button, image and file. | text |
| fixed | boolean | 列寬度是否要固定不可變 | false |
| formoptions | array | 對(duì)于form進(jìn)行編輯時(shí)的屬性設(shè)置 | empty |
| formatoptions | array | 對(duì)某些列進(jìn)行格式化的設(shè)置 | none |
| formatter | mixed | 對(duì)列進(jìn)行格式化時(shí)設(shè)置的函數(shù)名或者類型 {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 | 在初始化表格時(shí)是否要隱藏此列 | false |
| index | string | 索引。其和后臺(tái)交互的參數(shù)為sidx | empty |
| jsonmap | string | 定義了返回的json數(shù)據(jù)映射 | none |
| key | boolean | 當(dāng)從服務(wù)器端返回的數(shù)據(jù)中沒(méi)有id時(shí),將此作為唯一rowid使用只有一個(gè)列可以做這項(xiàng)設(shè)置。如果設(shè)置多于一個(gè),那么只選取第一個(gè),其他被忽略 | false |
| label | string | 如果colNames為空則用此值來(lái)作為列的顯示名稱,如果都沒(méi)有設(shè)置則使用name?值 | none |
| name | string | 表格列的名稱,所有關(guān)鍵字,保留字都不能作為名稱使用包括subgrid, cb and rn. | Required |
| resizable | boolean | 是否可以被resizable | true |
| search | boolean | 在搜索模式下,定義此列是否可以作為搜索列 | true |
| searchoptions | array | 設(shè)置搜索參數(shù) | empty |
| sortable | boolean | 是否可排序 | true |
| sorttype | string | 用在當(dāng)datatype為local時(shí),定義搜索列的類型,可選值:int/integer -?對(duì)integer排序float/number/currency -?排序數(shù)字date -?排序日期text -?排序文本 | text |
| stype | string | 定義搜索元素的類型 | text |
| surl | string | 搜索數(shù)據(jù)時(shí)的url | empty |
| width | number | 默認(rèn)列的寬度,只能是象素值,不能是百分比 | 150 |
| xmlmap | string | 定義當(dāng)前列跟返回的xml數(shù)據(jù)之間的映射關(guān)系 | none |
| unformat | function | ‘unformat’單元格值 | null |
?
Jqgrid學(xué)習(xí)?-------數(shù)據(jù)
jqGrid可支持的數(shù)據(jù)類型:xml、json、jsonp、local or clientSide、xmlstring、jsonstring?
、script、function (…)。
Json數(shù)據(jù)
需要定義jsonReader來(lái)跟服務(wù)器端返回的數(shù)據(jù)做對(duì)應(yīng),其默認(rèn)值:
·?jsonReader?:?{??
·??????root:?"rows",??
·??????page:?"page",??
·??????total:?"total",??
·??????records:?"records",??
·??????repeatitems:?true,??
·??????cell:?"cell",??
·??????id:?"id",??
·??????userdata:?"userdata",??
·??????subgrid:?{root:"rows",???
·?????????repeatitems:?true,???
·????????cell:"cell"??
·??????}??
?
這樣服務(wù)器端返回的數(shù)據(jù)格式:
·?{???
·???total:?"xxx",???
·???page:?"yyy",???
·???records:?"zzz",??
·???rows?:?[??
·?????{id:"1",?cell:["cell11",?"cell12",?"cell13"]},??
·?????{id:"2",?cell:["cell21",?"cell22",?"cell23"]},??
·???????...??
·???]??
·?}
jsonReader的屬性
| total | 總頁(yè)數(shù) |
| page | 當(dāng)前頁(yè) |
| records | 查詢出的記錄數(shù) |
| rows | 包含實(shí)際數(shù)據(jù)的數(shù)組 |
| id | 行id |
| cell | 當(dāng)前行的所有單元格 |
?
自定義:
·?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?
??指明每行的數(shù)據(jù)是可以重復(fù)的,如果設(shè)為false,則會(huì)從返回的數(shù)據(jù)中按名字來(lái)搜索元素,這個(gè)名字就是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”。?
一旦當(dāng)此屬性設(shè)為false時(shí),我們就不必把所有在colModel定義的name值都賦值。因?yàn)槭前磏ame來(lái)進(jìn)行搜索元素的,所以他的排序也不是按colModel中指定的排序結(jié)果。
用戶數(shù)據(jù)(user data)?
在某些情況下,我們需要從服務(wù)器端返回一些參數(shù)但并不想直接把他們顯示到表格中,而是想在別的地方顯示,那么我們就需要用到userdata標(biāo)簽
·?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學(xué)習(xí)?-------事件
·?var?lastSel;??
·?jQuery("#gridid").jqGrid({??
·?...??
·????onSelectRow:?function(id){???
·???????if(id?&&?id!==lastSel){???
·??????????jQuery('#gridid').restoreRow(lastSel);???
·??????????lastSel=id;???
·???????}???
·???????jQuery('#gridid').editRow(id,?true);???
·????},??
·?...??
·?})
?
| 事件 | 參數(shù) | 備注 |
| afterInsertRow | rowidrowdatarowelem | 當(dāng)插入每行時(shí)觸發(fā)。rowid插入當(dāng)前行的id;rowdata插入行的數(shù)據(jù),格式為name: value,name為colModel中的名字 |
| beforeRequest | none | 向服務(wù)器端發(fā)起請(qǐng)求之前觸發(fā)此事件但如果datatype是一個(gè)function時(shí)例外 |
| beforeSelectRow | rowid, e | 當(dāng)用戶點(diǎn)擊當(dāng)前行在未選擇此行時(shí)觸發(fā)。rowid:此行id;e:事件對(duì)象。返回值為ture或者false。如果返回true則選擇完成,如果返回false則不會(huì)選擇此行也不會(huì)觸發(fā)其他事件 |
| gridComplete | none | 當(dāng)表格所有數(shù)據(jù)都加載完成而且其他的處理也都完成時(shí)觸發(fā)此事件,排序,翻頁(yè)同樣也會(huì)觸發(fā)此事件 |
| loadComplete | xhr | 當(dāng)從服務(wù)器返回響應(yīng)時(shí)執(zhí)行,xhr:XMLHttpRequest?對(duì)象 |
| loadError | xhr,status,error | 如果請(qǐng)求服務(wù)器失敗則調(diào)用此方法。xhr:XMLHttpRequest?對(duì)象;satus:錯(cuò)誤類型,字符串類型;error:exception對(duì)象 |
| onCellSelect | rowid,iCol,cellcontent,e | 當(dāng)點(diǎn)擊單元格時(shí)觸發(fā)。rowid:當(dāng)前行id;iCol:當(dāng)前單元格索引;cellContent:當(dāng)前單元格內(nèi)容;e:event對(duì)象 |
| ondblClickRow | rowid,iRow,iCol,e | 雙擊行時(shí)觸發(fā)。rowid:當(dāng)前行id;iRow:當(dāng)前行索引位置;iCol:當(dāng)前單元格位置索引;e:event對(duì)象 |
| onHeaderClick | gridstate | 當(dāng)點(diǎn)擊顯示/隱藏表格的那個(gè)按鈕時(shí)觸發(fā);gridstate:表格狀態(tài),可選值:visible or hidden |
| onPaging | pgButton | 點(diǎn)擊翻頁(yè)按鈕填充數(shù)據(jù)之前觸發(fā)此事件,同樣當(dāng)輸入頁(yè)碼跳轉(zhuǎn)頁(yè)面時(shí)也會(huì)觸發(fā)此事件 |
| onRightClickRow | rowid,iRow,iCol,e | 在行上右擊鼠標(biāo)時(shí)觸發(fā)此事件。rowid:當(dāng)前行id;iRow:當(dāng)前行位置索引;iCol:當(dāng)前單元格位置索引;e:event對(duì)象 |
| onSelectAll | aRowids,status | multiselect為ture,且點(diǎn)擊頭部的checkbox時(shí)才會(huì)觸發(fā)此事件。aRowids:所有選中行的id集合,為一個(gè)數(shù)組。status:boolean變量說(shuō)明checkbox的選擇狀態(tài),true選中false不選中。無(wú)論checkbox是否選擇,aRowids始終有?值 |
| onSelectRow | rowid,status | 當(dāng)選擇行時(shí)觸發(fā)此事件。rowid:當(dāng)前行id;status:選擇狀態(tài),當(dāng)multiselect?為true時(shí)此參數(shù)才可用 |
| onSortCol | index,iCol,sortorder | 當(dāng)點(diǎn)擊排序列但是數(shù)據(jù)還未進(jìn)行變化時(shí)觸發(fā)此事件。index:name在colModel中位置索引;iCol:當(dāng)前單元格位置索引;sortorder:排序狀態(tài):desc或者asc |
| resizeStart | event, index | 當(dāng)開始改變一個(gè)列寬度時(shí)觸發(fā)此事件。event:event對(duì)象;index:當(dāng)前列在colModel中位置索引 |
| resizeStop | newwidth, index | 當(dāng)列寬度改變之后觸發(fā)此事件。newwidth:列改變后的寬度;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("#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方法
| 方法名 | 參數(shù) | 返回值 | 說(shuō)明 |
| addJSONData | data | none | 使用傳來(lái)的data數(shù)據(jù)填充表格。使用方法: 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 | 根據(jù)參數(shù)插入一行新的數(shù)據(jù),rowid為新行的id,data為新行的數(shù)據(jù),position為新增行的位置,srcrowid為新增行的參考位置。data數(shù)據(jù)格式:{name1:value1,name2: value2…} name為在colModel中指定的名稱 |
| addXMLData | data | none | 根據(jù)傳來(lái)的數(shù)據(jù)填充表格。用法:var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML); |
| clearGridData | clearfooter | jqGrid對(duì)象 | 清除表格當(dāng)前加載的數(shù)據(jù)。如果clearfooter為true時(shí)則此方法刪除表格最后一行的數(shù)據(jù) |
| delRowData | rowid | 成功為true否則為false | 根據(jù)rowid刪除行,但不會(huì)從服務(wù)器端刪除數(shù)據(jù) |
| footerData | action,data, format | jgGrid對(duì)象 | 設(shè)置或者取得底部數(shù)據(jù)。action:“get”或者“set”,默認(rèn)為“get”,如果為“get”返回值為name:value,name為?colModel中名稱。如果為“set”則值為name:value,name是colModel中的名稱。format:默認(rèn)為true,當(dāng)為?true時(shí),在設(shè)置新值時(shí)會(huì)調(diào)用formatter格式化數(shù)值 |
| getCell | rowid, iCol | 單元格內(nèi)容 | 返回指定rowid,iCol的單元格內(nèi)容,iCol既可以是當(dāng)前列在colModel中的位置索引也可以是name值。注意:在編輯行或者單元格時(shí)不能使用此方法,此時(shí)返回的并不是改變的值,而是原始值 |
| getCol | colname, returntype, mathoperation | array[] or value | 返回列的值。colname既可以是當(dāng)前列在colModel中的位置索引也可以是name值。returntype指定返回?cái)?shù)據(jù)的類型,默認(rèn)為?false。當(dāng)為false時(shí),返回的數(shù)組中只包含列的值,當(dāng)為true時(shí)返回?cái)?shù)組是對(duì)象數(shù)組,具體格式?{id:rowid, value:cellvalue}?,id為行的id,value為列的值。如:?[{id:1,value:1},{id:2,value:2}…]。mathoperation?可選值為'sum, 'avg', 'count' |
| getDataIDs | none | array[] | 返回當(dāng)前grid里所有數(shù)據(jù)的id |
| getGridParam | name | mixed value | 返回請(qǐng)求的參數(shù)信息 |
| getInd | rowid,rowcontent | mixed | 如果rowcontent為false,返回行所在的索引位置,id為行id。rowcontent默認(rèn)為false。如果rowconent為ture則返回的為行對(duì)象,如果找不到行則返回false |
| getRowData | rowid or none | array[] | 返回指定行的數(shù)據(jù),返回?cái)?shù)據(jù)類型為name:value,name為colModel中的名稱,value為所在行的列的值,如果根據(jù)rowid找不到則返回空。在編輯模式下不能用此方法來(lái)獲取數(shù)據(jù),它得到的并不是編輯后的值 |
| hideCol | colnameor[colnames] | jqGrid對(duì)象 | 如果參數(shù)為一個(gè)列名則隱藏此列,如果給定的是數(shù)組則隱藏指定的所有列。格式:?[“name1”,”name2”] |
| remapColumns | permutation, updateCells, keepHeader | none | 調(diào)整表格列的顯示順序,permutation為當(dāng)前列的順序,假如值是[1,0,2],那么第一列就會(huì)在第二位顯示。如果updateCells為ture則是對(duì)單元格數(shù)據(jù)進(jìn)行重新排序,如果keepHeader為true則對(duì)header數(shù)據(jù)顯示位置進(jìn)行調(diào)整 |
| resetSelection | none | jqGrid對(duì)象 | 選擇或者反選行數(shù)據(jù),在多選模式下也同樣起作用 |
| setCaption | caption | jqGrid對(duì)象 | 設(shè)置表格的標(biāo)題 |
| setCell | rowid,colname, data, class, properties | jqGrid對(duì)象 | 改變單元格的值。rowid:當(dāng)前行id;colname:列名稱,也可以是列的位置索引,從0開始;data:改變單元格的內(nèi)容,如果為空則不更?新;class:如果是string則會(huì)使用addClass方法將其加入到單元格的css中,如果是array則會(huì)直接加到style屬性?中;properties:設(shè)置單元格屬性 |
| setGridParam | object | jqGrid對(duì)象 | 設(shè)置grid的參數(shù)。有些參數(shù)的修改必須要重新加載grid才可以生效,這個(gè)方法可以覆蓋事件 |
| setGridHeight | new_height | jqGrid對(duì)象 | 動(dòng)態(tài)改變grid的高度,只能對(duì)單元格的高度進(jìn)行設(shè)置而不能對(duì)表格的高度進(jìn)行動(dòng)態(tài)修改。new_height:可以是象素值,百分比或者"auto" |
| setGridWidth | new_width,shrink | jqGrid對(duì)象 | 動(dòng)態(tài)改變表格的寬度。new_width:表格寬度,象素值;shrink:true或者false,作用同shrinkToFit |
| setLabel | colname, data, class, properties | jqGrid對(duì)象 | 給指定列設(shè)置一個(gè)新的顯示名稱。colname:列名稱,也可以是列的位置索引,從0開始;data:列顯示名稱,如果為空則不修改;class:如果是?string則會(huì)使用addClass方法將其加入到單元格的css中,如果是array則會(huì)直接加到style屬性中;properties:設(shè)置?label的屬性 |
| setRowData | rowid,data, cssprop | 成功true否則false | 更新行的值,rowid為行id。data值格式:{name1:value1,name2: value2…} name為colModel中名稱;cssprop:如果是string則會(huì)使用addClass方法將其加入到行的css中,如果是array或者對(duì)象?則會(huì)直接加到style屬性中 |
| setSelection | rowid,onselectrow | jqGrid對(duì)象 | 選擇或反選指定行。如果onselectrow為ture則會(huì)觸發(fā)事件onSelectRow,onselectrow默認(rèn)為ture |
| showCol | colname | jqGrid | 顯示列。colname可以是數(shù)組[“name1”,”name2”],但是name1或者name2必須是colModel中的name |
| trigger(“reloadGrid”) | none | jqGrid對(duì)象 | 重新加載當(dāng)前表格,也會(huì)向服務(wù)器發(fā)起新的請(qǐng)求 |
| updateColumns | none | none | 同步表格的寬度,用在表格拖拽時(shí),用法:var mygrid=jQuery(”#grid_id”)[0];mygrid.updateColumns(); |
jqGrid的通用方法和設(shè)置?
這些方法并不和jqGrid對(duì)象綁定,可以隨意使用:
jQuery.jgrid.jqGridFunction(?parameter1,...parameterN?);
| 函數(shù)名 | 參數(shù) | 返回值 | 說(shuō)明 |
| ajaxOptions | 空對(duì)象 | none | 這個(gè)函數(shù)可以改變jqgrid中用到的ajax請(qǐng)求參數(shù),這個(gè)函數(shù)可以覆蓋當(dāng)前所有ajax請(qǐng)求設(shè)置。從3.6版本開始起有3個(gè)級(jí)別的ajax設(shè)置:第一個(gè)級(jí)別就是在模塊中設(shè)置ajax請(qǐng)求;第二個(gè)級(jí)別就是通過(guò)此函數(shù)設(shè)置;第三級(jí)別的設(shè)置是控制全局ajax請(qǐng)求的設(shè)置:jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds));?當(dāng)然我們也可以單獨(dú)設(shè)置ajax的參數(shù) |
| jqID | string | 解析后的string | 轉(zhuǎn)義字符串,把兩個(gè)反斜杠(\\)轉(zhuǎn)化為單個(gè)反斜杠(\) |
| jgrid.htmlDecode | string | 轉(zhuǎn)換后string | 把轉(zhuǎn)碼后的字符串還原 |
| jgrid.htmlEncode | string | 編碼后的string | 把字符串編碼 |
| jgrid.format | string | 格式化后string | 簡(jiǎn)單字符串模板。用法: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 | 這個(gè)方法是用來(lái)修復(fù)在ie7里的一個(gè)bug |
| jgrid.stringToDoc | xmlstring | xmlDoc | 把xmlstring轉(zhuǎn)換為dom對(duì)象 |
| jgrid.stripHtml | content | new_content | 去掉html標(biāo)簽返回標(biāo)簽中內(nèi)容 |
| jgrid.parse | jsonstring | 對(duì)象 | 把一個(gè)jsonstring轉(zhuǎn)換為json對(duì)象 |
?
?
jqGrid的方法
| 方法名 | 參數(shù) | 返回值 | 說(shuō)明 |
| filterGrid | grid_id,params | HTML對(duì)象 | 構(gòu)造jqGrid的查詢界面。grid_id:表格id;params:參數(shù) |
| filterToolbar | params | jqGrid對(duì)象 | 同上。不同的是搜索輸入框在header層下方 |
| getColProp | colname | array | 返回指定列的屬性集合。name為colModel中名稱 |
| GridDestroy | grid_id | boolean | 從dom上刪除此grid |
| GridUnload | grid_id | boolean | 跟GridDestroy不同的是table對(duì)象跟pager對(duì)象并不會(huì)被刪除,以便下次使用 |
| setGridState | state | jqGrid對(duì)象 | 設(shè)置grid的狀態(tài),顯示或者隱藏。這個(gè)方法不會(huì)觸發(fā)onHeaderClick事件。 |
| setColProp | colname, properties | jqGrid對(duì)象 | 設(shè)置新的屬性,對(duì)于動(dòng)態(tài)改變列屬性是非常有用的,但是有些屬性的修改并不會(huì)起效。用法:jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}}); |
| sortGrid | colname, reload | jqGrid對(duì)象 | 按指定列進(jìn)行排序。效果同setGridParam({sortname:'myname'}).trigger('reloadGrid').如果reload為true則會(huì)重新加載數(shù)據(jù) |
| updateGridRows | data,rowidname,jsonreader | boolean | 修改表格中某行的數(shù)據(jù),data數(shù)據(jù)格式:[{name:value,name1:value1…}, {name:value,name2:value2…}],name為colModel中的名稱;rowidname某行的名稱。?jsonreader:boolean值,默認(rèn)false。如果為true則是定義數(shù)據(jù)的格式,data的值并不是name:value形式而只是?value |
Jqgrid學(xué)習(xí)?-------配置?json
IE8,FF3以及Chrome 3已經(jīng)支持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>
這段代碼要放到語(yǔ)言包之后jqGrid.js文件之前。?
如果瀏覽器不支持JSON,那么我們只能用eval函數(shù)解析json。
除了jqGrid本身提供對(duì)json的類庫(kù)外,我們可以使用JSON.parse來(lái)處理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學(xué)習(xí)?-------翻頁(yè)
jqGrid的翻頁(yè)要定義在html里,通常是在grid的下面,且是一個(gè)div對(duì)象:
·?<table?id="list"></table>???
·????<div?id="gridpager"></div>
·?jQuery("#grid_id").jqGrid({??
·?...??
·????pager?:?'#gridpager',??
·?...??
·?});
不必給翻頁(yè)設(shè)置任何的css屬性。在jqGrid里定義的翻頁(yè)可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager').?推薦使用前兩個(gè),當(dāng)使用其他方式時(shí)jqGrid的導(dǎo)入導(dǎo)出功能時(shí)會(huì)引起錯(cuò)誤。
導(dǎo)航欄的屬性:
·?$.jgrid?=?{??
·?????defaults?:?{??
·?????????recordtext:?"View?{0}?-?{1}?of?{2}",??
·?????????????emptyrecords:?"No?records?to?view",??
·?????????loadtext:?"Loading...",??
·?????????pgtext?:?"Page?{0}?of?{1}"??
·?????},??
·?...??
·?}
如果想改變這些設(shè)置:
1.???jQuery.extend(jQuery.jgrid.defaults,{emptyrecords:?"Nothing?to?display",...});
?
2.????jQuery("#grid_id").jqGrid({??
...??
??????????????pager?:?'#gridpager',??
??????????????emptyrecords:?"Nothing?to?display",??
????????????????...??
????????????????});
導(dǎo)航欄的屬性:
| 屬性名 | 類型 | 說(shuō)明 | 默認(rèn)值 | 是否可以被修改 |
| lastpage | integer | 只讀屬性,總頁(yè)數(shù) | 0 | NO |
| pager | mixed | 導(dǎo)航欄對(duì)象,必須是一個(gè)有效的html元素,位置可以隨意 | 空字符串 | NO |
| pagerpos | string | 定義導(dǎo)航欄的位置,默認(rèn)分為三部分:翻頁(yè),導(dǎo)航工具及記錄信息 | center | NO |
| pgbuttons | boolean | 是否顯示翻頁(yè)按鈕 | true | NO |
| pginput | boolean | 是否顯示跳轉(zhuǎn)頁(yè)面的輸入框 | true | NO |
| pgtext | string | 頁(yè)面信息,第一個(gè)值是當(dāng)前頁(yè)第二個(gè)值是總頁(yè)數(shù) | 語(yǔ)言包 | YES |
| reccount | integer | 只讀屬性,實(shí)際記錄數(shù),千萬(wàn)不能跟records?參數(shù)搞混了,通常情況下他們是相同的,假如我們定義rowNum=15,但我們從服務(wù)器端返回的記錄為20即records=20,而reccount=15,表格中也顯示15條記錄 | 0 | NO |
| recordpos | string | 定義記錄信息的位置,可選值:left, center, right | right | NO |
| records | integer | 只讀屬性,從服務(wù)器端返回的記錄數(shù) | none | NO |
| recordtext | string | 顯示記錄的信息,只有當(dāng)viewrecords為true時(shí)起效,且記錄數(shù)必須大于0 | 語(yǔ)言包 | yes |
| rowList | array | 可以改變表格可以顯示的記錄數(shù),格式為[10,20,30] | array | no |
| rowNum | integer | 設(shè)置表格可以顯示的記錄數(shù) | 20 | yes |
| viewrecords | boolean | 是否要顯示總記錄數(shù)信息 | false | no |
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");??
跟翻頁(yè)相關(guān)的事件只有一個(gè):onPaging
| onPaging | pgButton | 當(dāng)點(diǎn)擊翻頁(yè)按鈕但還為展現(xiàn)數(shù)據(jù)時(shí)觸發(fā)此事件,當(dāng)然這跳轉(zhuǎn)欄輸入頁(yè)碼改變頁(yè)時(shí)也同樣觸發(fā)此事件。參數(shù)pgButton可選值:?first,last,prev,next | ? | ? |
jqGrid的翻頁(yè)導(dǎo)航是一個(gè)方法,你可以事先定義一些其他操作,比如:編輯、新增、刪除及搜索。也可以增加自定義的函數(shù)。導(dǎo)航工具欄是定義到翻頁(yè)控件上的。定義如下:
·?<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?:導(dǎo)航欄id?
parameters?:參數(shù)列表?
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"??
·???},??
·?...
| 屬性 | 類型 | 說(shuō)明 | 默認(rèn)值 |
| add | boolean | 是否啟用新增功能,當(dāng)點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)editGridRow事件 | true |
| addicon | string | 給新增功能設(shè)置圖標(biāo),只有UI theme里的圖標(biāo)才可以使用 | ui-icon-plus |
| addtext | string | 新增按鈕上的文字 | 空 |
| addtitle | string | 當(dāng)鼠標(biāo)移到新增按鈕上時(shí)顯示的提示 | 新增一行 |
| alertcap | string | 當(dāng)我們edit,delete or view一行記錄時(shí)出現(xiàn)的提示信息 | 警告 |
| alerttext | string | 當(dāng)edit,delete or view一行記錄時(shí)的文本提示 | 請(qǐng)選擇一行記錄 |
| closeOnEscape | boolean | 是否可以使用esc鍵關(guān)閉對(duì)話框 | true |
| del | boolean | 是否啟用刪除功能,啟用時(shí)會(huì)觸發(fā)事件delGridRow | true |
| delicon | string | 設(shè)置刪除按鈕的圖標(biāo),只有UI theme里的圖標(biāo)才可以使用 | ui-icon-trash |
| deltext | string | 設(shè)置到刪除按鈕上的文字信息 | 空 |
| deltitle | string | 當(dāng)鼠標(biāo)移到刪除按鈕上時(shí)出現(xiàn)的提示 | 刪除鎖選擇的行 |
| edit | boolean | 是否啟用可編輯功能,當(dāng)編輯時(shí)會(huì)觸發(fā)事件editGridRow | true |
| editicon | string | 設(shè)置編輯按鈕的圖標(biāo),只有UI theme里的圖標(biāo)才可以使用 | ui-icon-pencil |
| edittext | string | 編輯按鈕上文字 | 空 |
| edittitle | string | 當(dāng)鼠標(biāo)移到編輯按鈕上出現(xiàn)的提示信息 | 編輯所選擇的行 |
| position | string | 定義按鈕位置,可選值left, center and right. | left |
| refresh | boolean | 是否啟用刷新按鈕,當(dāng)點(diǎn)擊刷新按鈕時(shí)會(huì)觸發(fā)trigger(“reloadGrid”)事件,而且會(huì)清空搜索條件值 | true |
| refreshicon | string | 設(shè)置刷新圖標(biāo),只有UI theme里的圖標(biāo)才可以使用 | ui-icon-refresh |
| refreshtext | string | 刷新按鈕上文字信息 | 空 |
| refreshtitle | string | 當(dāng)鼠標(biāo)移到刷新按鈕上的提示信息 | 重新加載 |
| refreshstate | string | 指明表格如何刷新。firstpage:從第一頁(yè)開始刷新;current:只刷新當(dāng)前頁(yè)內(nèi)容 | firstpage |
| afterRefresh | function | 當(dāng)點(diǎn)擊刷新按鈕之后觸發(fā)此事件 | null |
| search | boolean | 是否啟用搜索按鈕,會(huì)觸發(fā)searchGrid?事件 | true |
| searchhicon | string | 設(shè)置搜索按鈕的圖標(biāo),只有UI theme里的圖標(biāo)才可以使用 | ui-icon-search |
| searchtext | string | 搜索按鈕上的文字 | 空 |
| searchtitle | string | 當(dāng)鼠標(biāo)移到搜索按鈕上的提示信息 | 搜索 |
| view | boolean | 是否啟用查看按鈕,會(huì)觸發(fā)事件viewGridRow | false |
| viewicon | string | 設(shè)置查看按鈕的圖標(biāo),只有UI theme里的圖標(biāo)才可以使用 | ui-icon-document |
| viewtext | string | 查看按鈕上文字 | 空 |
| viewtitle | string | 當(dāng)鼠標(biāo)移到查看按鈕上的提示信息 | 查看所選記錄 |
?
·?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學(xué)習(xí)?-------自定義按鈕
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:按鈕的圖標(biāo),string類型,必須為UI theme圖標(biāo)?
onClickButton:按鈕事件,function類型,默認(rèn)null?
position:first或者last,按鈕位置?
title:string類型,按鈕的提示信息?
cursor:string類型,光標(biāo)類型,默認(rèn)為pointer?
id:string類型,按鈕id
如果設(shè)置多個(gè)按鈕:
·?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}};
默認(rèn)參數(shù):
{sepclass?:?“ui-separator”,sepcontent:?''}
?
sepclass:ui-jqgrid的屬性名?
sepcontent:分隔符的內(nèi)容.
Jqgrid學(xué)習(xí)?-------格式化
jqGrid的格式化是定義在語(yǔ)言包中
·?$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'??
·????}??
·?...
這些設(shè)置可以通過(guò)colModel中的formatoptions參數(shù)修改
·?jQuery("#grid_id").jqGrid({??
·?...??
·????colModel?:?[??
·????...??
·???????{name:'myname',?...?formatter:'number',?...},??
·????...??
·????],??
·?...??
·?});
此實(shí)例是對(duì)名為“myname”的列進(jìn)行格式化,格式化類是“number”,假如初始值為“1234.1”則格式化后顯示為“1 234.10”?。
如果給某列進(jìn)行格式化:
·?jQuery("#grid_id").jqGrid({??
·?...??
·????colModel?:?[??
·????...??
·???????{name:'myname',?...?formatter:'currency',?formatoptions:{decimalSeparator:",",?thousandsSeparator:?",",?decimalPlaces:?2,?prefix:?"$?"}?}?,??
·????...??
·????],??
·?...??
·?});
這個(gè)設(shè)置會(huì)覆蓋語(yǔ)言包中的設(shè)置。
?
select類型的格式化實(shí)例:
原始數(shù)據(jù)
·?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"}}?...?]??
·?...??
·?});
結(jié)果是,表格的數(shù)據(jù)值為1或者2但是現(xiàn)實(shí)的是One或者Two。
對(duì)超鏈接使用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學(xué)習(xí)?-------自定義格式化
·?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:對(duì)數(shù)據(jù)進(jìn)行格式化時(shí)的參數(shù)設(shè)置,格式為:?
{ rowId: rid, colModel: cm}?
rowObject:行數(shù)據(jù)
?
數(shù)據(jù)的反格式化跟格式化用法相似.
·?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("$","");??
·?}??
表格中數(shù)據(jù)實(shí)際值為123.00,但是顯示的是$123.00;?我們使用getRowData?,getCell?方法取得的值是123.00。?
創(chuàng)建通用的格式化函數(shù)
·?<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學(xué)習(xí)?-------搜索
表格中所有的列都可以作為搜索條件。?
所用到的語(yǔ)言包文件
·?$.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?設(shè)置
| 可選參數(shù) | 類型 | 說(shuō)明 | 默認(rèn)值 |
| search | boolean | 是否是搜索列 | true |
| stype | string | 搜索類型,text類型或者select類型 | text |
| searchoptions | object | 對(duì)搜索條件進(jìn)行一些設(shè)置 | ? |
?
searchoptions?參數(shù)
| 屬性 | 類型 | 說(shuō)明 |
| dataUrl | string | 只有當(dāng)搜索類型為select才起效 |
| buildSelect | function | 只有當(dāng)dataUrl設(shè)置時(shí)此參數(shù)才起效,通過(guò)一個(gè)function來(lái)構(gòu)建下拉框 |
| dataInit | function | 初始化時(shí)調(diào)用,用法: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 | 設(shè)置屬性值。attr : { title: “Some title” } |
| searchhidden | boolean | 默認(rèn)情況下,隱藏值不是搜索列。為了使隱藏值可以作為搜索列則將此設(shè)為true |
| sopt | array | 此參數(shù)只用到單列搜索上,說(shuō)明搜索條件。可用值:['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 | 默認(rèn)值 |
| value | mixed | 只用在搜索類型為select下。可以是string或者object,如果為string則格式為value:label,且以“;”結(jié)尾;如果為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();??
·?}
需要說(shuō)明的:?
所有的搜索都是使用url來(lái)到服務(wù)器端查詢數(shù)據(jù)。?
當(dāng)執(zhí)行搜索時(shí)會(huì)用查詢數(shù)據(jù)填充postData array?
發(fā)送到服務(wù)器端搜索字符串的名稱為_search?
當(dāng)點(diǎn)擊刷新按鈕時(shí)不會(huì)使用搜索條件?
每個(gè)搜索方法都有自己的數(shù)據(jù)清空方法
Jqgrid學(xué)習(xí)?-------搜索工具欄
搜索工具欄只是在列標(biāo)題下面構(gòu)造一個(gè)輸入框。且使用表格的url進(jìn)行搜索記錄,發(fā)到服務(wù)器端數(shù)據(jù)格式為name:value,而且是附加在postData之后。
jQuery("#grid_id").filterToolbar(options);??
jQuery("#grid_id").jqGrid('filterToolbar',options);??
options:參數(shù)
| 可選參數(shù) | 類型 | 描述 | 默認(rèn)值 |
| autosearch | boolean | 查詢規(guī)則,如果是text類型則是當(dāng)按下回車鍵才去執(zhí)行查詢;如果是select類型的查詢則當(dāng)值改變時(shí)就去執(zhí)行查詢 | true |
| beforeSearch | function | 執(zhí)行查詢之前觸發(fā)此事件 | null |
| afterSearch | function | 查詢完成后觸發(fā)事件 | null |
| beforeClear | function | 清空查詢條件值時(shí)觸發(fā)事件 | null |
| afterClear | function | 清空查詢條件后觸發(fā)事件 | null |
方法:
| 方法 | 描述 |
| triggerToolbar | 執(zhí)行查詢時(shí)調(diào)用此方法 |
| clearToolbar | 當(dāng)清空查詢條件值時(shí)觸發(fā)此函數(shù) |
| toggleToolbar | Toggeles工具欄 |
Jqgrid學(xué)習(xí)?-------自定義搜索
<div?id="mysearch"></div>
jQuery("#mysearch").filterGrid('#grid_id',options);
options:參數(shù)
| 參數(shù) | 描述 | 默認(rèn)值 |
| gridModel | 當(dāng)為ture我們會(huì)使用colModel中的屬性構(gòu)造查詢條件,所用到的參數(shù):name, index, edittype, editoptions, search.還有一個(gè)參數(shù):defval:查詢條件的默認(rèn)值;surl:當(dāng)edittype:'select'時(shí)獲取select數(shù)據(jù)的url,格?式:<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select> | false |
| gridNames | gridModel為true時(shí)起效,設(shè)置查詢列的名稱 | false |
| filterModel | gridModel為false時(shí)起效,格式:{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。label:字段顯示名稱;name:列名;stype:輸入框類型,text或者select;surl:獲取select數(shù)據(jù)的地?址,要求的內(nèi)容為html格式:<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>;sopt:同editoptions? | [] |
| formtype | 定義表單如何被構(gòu)造,'horizontal' or 'vertical' | ? |
| autosearch | 如果為true:當(dāng)點(diǎn)擊回車鍵觸發(fā)查詢;當(dāng)select值變化時(shí)觸發(fā)查詢 | ? |
| formclass | 可以使用的css | filterform |
| tableclass | 可以使用到table上的css | filtertable |
| buttonclass | 按鈕上使用的css | filterbutton |
| searchButton | 搜索按鈕 | Search |
| clearButton | 清空數(shù)據(jù)的按鈕 | Clear |
| enableSearch | 啟用禁用搜索按鈕 | false |
| enableClear | 啟用禁用清空按鈕 | false |
| beforeSearch | 搜索之前觸發(fā)的事件 | null |
| afterSearch | 搜索完成之后觸發(fā)的事件 | null |
| beforeClear | 清空數(shù)據(jù)之前觸發(fā)的事件 | null |
| afterClear | 清空數(shù)據(jù)之后觸發(fā)事件 | null |
| url | 搜索數(shù)據(jù)的url | ‘’ |
| marksearched | 當(dāng)為true時(shí),每次查詢之后所有查詢的列都標(biāo)記為可查詢列 | true |
?
轉(zhuǎn)載于:https://www.cnblogs.com/Candies/p/4048020.html
總結(jié)
以上是生活随笔為你收集整理的JQGrid 参数、属性API的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 网络编程——sockaddr 与 soc
- 下一篇: javax.xml.bind.Unmar