涓銆?jqGrid鐨勫姞杞姐?/strong>
1.寮曠敤鐩稿叧澶存枃浠?/strong>
寮曞叆CSS錛?
<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
寮曞叆JS錛?
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
鍥犱負jqGrid3.6鍙婁互鍚庣殑鐗堟湰闆嗘垚浜唈Query UI錛屾墍浠ワ紝姝ゅ闇瑕佸鍏I鐩稿叧js鍜宑ss銆傚彟澶杇rid.locale-en.js榪欎釜璇█鏂囦歡蹇呴』鍦╦query.jqGrid.min.js涔嬪墠鍔犺澆錛屽惁鍒欎細鍑洪棶棰樸?
2.灝唈qgrid鍔犲叆欏甸潰涓?/strong>
鏍規嵁jqGrid鐨勬枃妗ｏ紝瑕佹兂鐢熸垚涓涓猨qGrid錛屾渶鐩存帴鐨勬柟娉曞氨鏄細
$("#list").jqGrid(options);
鍏朵腑list鏄〉闈笂鐨勪竴涓猼able錛?lt;table id="list"></table>
涓嬮潰鏄竴涓畝鍗曠殑渚嬪瓙錛?
<script type="text/javascript">
$(document).ready(function () {jQuery("#list").jqGrid({url: 'Handler.ashx',
datatype: "json",
mtype: 'GET',
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },{ name: 'Name', index: 'Name', width: 100, align: "center" },{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }],
rowList: [10, 20, 30],
sortname: 'SalesReasonID',
viewrecords: true,
sortorder: "desc",
jsonReader: {root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: jQuery('#pager'),rowNum: 5,
altclass: 'altRowsColour',
//width: 'auto',
width: '500',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;})
浜屻?jqgrid鐨勯噸瑕侀夐」
鍏蜂綋鐨刼ptions鍙傝冿紝鍙互璁塊棶jqGrid鏂囨。鍏充簬option鐨勭珷鑺傦紙http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options錛夈傚叾涓湁鍑犱釜鏄瘮杈冨父鐢ㄧ殑錛岄噸鐐逛粙緇嶄竴涓嬶細
- url 錛歫qGrid鎺т歡閫氳繃榪欎釜鍙傛暟寰楀埌闇瑕佹樉紺虹殑鏁版嵁錛屽叿浣撶殑榪斿洖鍊煎彲浠ヤ嬌XML涔熷彲浠ユ槸Json銆?
- datatype 錛氳繖涓弬鏁扮敤浜庤瀹氬皢瑕佸緱鍒扮殑鏁版嵁綾誨瀷銆傜被鍨嬪寘鎷細json 銆亁ml銆亁mlstring銆乴ocal銆乯avascript銆乫unction銆?
- mtype : 瀹氫箟浣跨敤鍝鏂規硶鍙戣搗璇鋒眰錛孏ET鎴栬匬OST銆?
- height 錛欸rid鐨勯珮搴︼紝鍙互鎺ュ彈鏁板瓧銆?鍊箋乤uto錛岄粯璁ゅ間負150銆?
- width 錛欸rid鐨勫搴︼紝濡傛灉鏈緗紝鍒欏搴﹀簲涓烘墍鏈夊垪瀹界殑涔嬪拰錛涘鏋滆緗簡瀹藉害錛屽垯姣忓垪鐨勫搴﹀皢浼氭牴鎹畇hrinkToFit閫夐」鐨勮緗紝榪涜璁劇疆銆?
- shrinkToFit 錛氭閫夐」鐢ㄤ簬鏍規嵁width璁＄畻姣忓垪瀹藉害鐨勭畻娉曘傞粯璁ゅ間負true銆傚鏋渟hrinkToFit涓簍rue涓旇緗簡width鍊鹼紝鍒欐瘡鍒楀搴︿細鏍規嵁 width鎴愭瘮渚嬬緝鏀撅紱濡傛灉shrinkToFit涓篺alse涓旇緗簡width鍊鹼紝鍒欐瘡鍒楃殑瀹藉害涓嶄細鎴愭瘮渚嬬緝鏀撅紝鑰屾槸淇濇寔鍘熸湁璁劇疆錛岃孏rid灝嗕細鏈?姘村鉤婊氬姩鏉°?
- autowidth 錛氶粯璁ゅ間負false銆傚鏋滆涓簍rue錛屽垯Grid鐨勫搴︿細鏍規嵁鐖跺鍣ㄧ殑瀹藉害鑷姩閲嶇畻銆傞噸綆椾粎鍙戠敓鍦℅rid鍒濆鍖栫殑闃舵錛涘鏋滃綋鐖跺鍣ㄥ昂瀵稿彉鍖栦簡錛屽悓鏃朵篃闇瑕佸彉鍖朑rid鐨勫昂瀵哥殑璇濓紝鍒欓渶瑕佸湪鑷繁鐨勪唬鐮佷腑璋冪敤setGridWidth鏂規硶鏉ュ畬鎴愩?
- pager 錛氬畾涔夐〉鐮佹帶鍒舵潯Page Bar錛屽湪涓婇潰鐨勪緥瀛愪腑鏄敤涓涓猟iv(<div id=”pager”></div>)鏉ユ斁緗殑銆?
- sortname 錛氭寚瀹氶粯璁ょ殑鎺掑簭鍒楋紝鍙互鏄垪鍚嶄篃鍙互鏄暟瀛椼傛鍙傛暟浼氬湪琚紶閫掑埌Server绔?
- viewrecords 錛氳緗槸鍚﹀湪Pager Bar鏄劇ず鎵鏈夎褰曠殑鎬繪暟銆?
- caption 錛氳緗瓽rid琛ㄦ牸鐨勬爣棰橈紝濡傛灉鏈緗紝鍒欐爣棰樺尯鍩熶笉鏄劇ず銆?
- rowNum 錛氱敤浜庤緗瓽rid涓竴嬈℃樉紺虹殑琛屾暟錛岄粯璁ゅ間負20銆傛鏄繖涓夐」灝嗗弬鏁皉ows錛坧rmNames涓緗殑錛夐氳繃url閫夐」璁劇疆鐨勯摼鎺ヤ紶閫掑埌Server銆傛敞鎰忓鏋淪erver榪斿洖鐨勬暟鎹鏁拌秴榪囦簡rowNum鐨勮瀹氾紝鍒橤rid涔熷彧鏄劇ずrowNum璁懼畾鐨勮鏁般?
- rowList 錛氫竴涓暟緇勶紝鐢ㄤ簬璁劇疆Grid鍙互鎺ュ彈鐨剅owNum鍊箋備緥濡俒10,20,30]銆?
- colNames 錛氬瓧絎︿覆鏁扮粍錛岀敤浜庢寚瀹氬悇鍒楃殑棰樺ご鏂囨湰錛屼笌鍒楃殑欏哄簭鏄搴旂殑銆?
- colModel 錛氭渶閲嶈鐨勬暟緇勪箣涓錛岀敤浜庤瀹氬悇鍒楃殑鍙傛暟銆傦紙紼嶅悗璇﹁堪錛?
- prmNames 錛氳繖鏄竴涓暟緇勶紝鐢ㄤ簬璁劇疆jqGrid灝嗚鍚慡erver浼犻掔殑鍙傛暟鍚嶇О銆傦紙紼嶅悗璇﹁堪錛?
- jsonReader 錛氳繖鍙堟槸涓涓暟緇勶紝鐢ㄦ潵璁懼畾濡備綍瑙ｆ瀽浠嶴erver绔彂鍥炴潵鐨刯son鏁版嵁銆傦紙紼嶅悗璇﹁堪錛?/li>
2.1 prmNames閫夐」
prmNames鏄痡qGrid鐨勪竴涓噸瑕侀夐」錛岀敤浜庤緗甹qGrid灝嗚鍚慡erver浼犻掔殑鍙傛暟鍚嶇О銆傚叾榛樿鍊間負錛?strong>
prmNames : {
page:"page", // 琛ㄧず璇鋒眰欏電爜鐨勫弬鏁板悕縐?
rows:"rows", // 琛ㄧず璇鋒眰琛屾暟鐨勫弬鏁板悕縐?
sort: "sidx", // 琛ㄧず鐢ㄤ簬鎺掑簭鐨勫垪鍚嶇殑鍙傛暟鍚嶇О
order: "sord", // 琛ㄧず閲囩敤鐨勬帓搴忔柟寮忕殑鍙傛暟鍚嶇О
search:"_search", // 琛ㄧず鏄惁鏄悳绱㈣姹傜殑鍙傛暟鍚嶇О
nd:"nd", // 琛ㄧず宸茬粡鍙戦佽姹傜殑嬈℃暟鐨勫弬鏁板悕縐?
id:"id", // 琛ㄧず褰撳湪緙栬緫鏁版嵁妯″潡涓彂閫佹暟鎹椂錛屼嬌鐢ㄧ殑id鐨勫悕縐?
oper:"oper", // operation鍙傛暟鍚嶇О
editoper:"edit", // 褰撳湪edit妯″紡涓彁浜ゆ暟鎹椂錛屾搷浣滅殑鍚嶇О
addoper:"add", // 褰撳湪add妯″紡涓彁浜ゆ暟鎹椂錛屾搷浣滅殑鍚嶇О
deloper:"del", // 褰撳湪delete妯″紡涓彁浜ゆ暟鎹椂錛屾搷浣滅殑鍚嶇О
subgridid:"id", // 褰撶偣鍑諱互杞藉叆鏁版嵁鍒板瓙琛ㄦ椂錛屼紶閫掔殑鏁版嵁鍚嶇О
npage: null,
totalrows:"totalrows" // 琛ㄧず闇浠嶴erver寰楀埌鎬誨叡澶氬皯琛屾暟鎹殑鍙傛暟鍚嶇О錛屽弬瑙乯qGrid閫夐」涓殑rowTotal
}
2.2 jsonReader閫夐」
jsonReader鏄痡qGrid鐨勪竴涓噸瑕侀夐」錛岀敤浜庤緗浣曡В鏋愪粠Server绔彂鍥炴潵鐨刯son鏁版嵁錛屽鏋淪erver榪斿洖鐨勬槸xml鏁版嵁錛屽垯瀵瑰簲鐨勪嬌鐢▁mlReader鏉ヨВ鏋愩俲sonReader鐨勯粯璁ゅ間負錛?
jsonReader : {
root: "rows", // json涓唬琛ㄥ疄闄呮ā鍨嬫暟鎹殑鍏ュ彛
page: "page", // json涓唬琛ㄥ綋鍓嶉〉鐮佺殑鏁版嵁
total: "total", // json涓唬琛ㄩ〉鐮佹繪暟鐨勬暟鎹?
records: "records", // json涓唬琛ㄦ暟鎹鎬繪暟鐨勬暟鎹?
repeatitems: true, // 濡傛灉璁句負false錛屽垯jqGrid鍦ㄨВ鏋恓son鏃訛紝浼氭牴鎹畁ame鏉ユ悳绱㈠搴旂殑鏁版嵁鍏冪礌錛堝嵆鍙互json涓厓绱犲彲浠ヤ笉鎸夐『搴忥級錛涜屾墍浣跨敤鐨刵ame鏄潵鑷簬colModel涓殑name璁懼畾銆?
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
}
鍋囧鏈変笅闈竴涓猨son瀛楃涓詫細
{"totalpages":"3","currpage":"1","totalrecords":"11","griddata": [{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998 騫?鏈?鏃?},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998騫?鏈?鏃?}, {"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998騫?鏈?鏃?}, {"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998騫?鏈?鏃?}, {"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998 騫?鏈?鏃?}]}
鍏跺搴旂殑jsonReader涓猴細jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
娉細cell銆乮d鍦╮epeatitems涓簍rue鏃跺彲浠ョ敤鍒幫紝鍗蟲瘡涓涓褰曟槸鐢變竴瀵筰d鍜宑ell緇勫悎鑰屾垚錛屽嵆鍙互閫傜敤鍙︿竴縐峧son緇撴瀯銆傛彺寮曟枃妗ｄ腑鐨勪緥瀛愶細
repeatitems涓簍rue鏃訛細
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});
json緇撴瀯涓猴細
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell涓笉闇瑕佸悇鍒楃殑name錛屽彧瑕佸煎氨OK浜嗭紝浣嗘槸闇瑕佷繚鎸佸搴?
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
repeatitems涓篺alse鏃訛細
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
...
});
json緇撴瀯涓猴細
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 鏁版嵁涓渶瑕佸悇鍒楃殑name錛屼絾鏄彲浠ヤ笉鎸夊垪鐨勯『搴?
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel鐨勯噸瑕侀夐」
colModel涔熸湁璁稿闈炲父閲嶈鐨勯夐」錛屽湪浣跨敤鎼滅儲銆佹帓搴忕瓑鏂歸潰閮戒細鐢ㄥ埌銆傝繖閲屽厛鍙璇存渶鍩烘湰鐨勩?
- name 錛氫負Grid涓殑姣忎釜鍒楄緗敮涓鐨勫悕縐幫紝榪欐槸涓涓繀闇閫夐」錛屽叾涓繚鐣欏瓧鍖呮嫭subgrid銆乧b銆乺n銆?
- index 錛氳緗帓搴忔椂鎵浣跨敤鐨勭儲寮曞悕縐幫紝榪欎釜index鍚嶇О浼氫綔涓簊idx鍙傛暟錛坧rmNames涓緗殑錛変紶閫掑埌Server銆?
- label 錛氬綋jqGrid鐨刢olNames閫夐」鏁扮粍涓虹┖鏃訛紝涓哄悇鍒楁寚瀹氶澶淬傚鏋渃olNames鍜屾欏歸兘涓虹┖鏃訛紝鍒檔ame閫夐」鍊間細鎴愪負棰樺ご銆?
- width 錛氳緗垪鐨勫搴︼紝鐩墠鍙兘鎺ュ彈浠x涓哄崟浣嶇殑鏁板鹼紝榛樿涓?50銆?
- sortable 錛氳緗鍒楁槸鍚﹀彲浠ユ帓搴忥紝榛樿涓簍rue銆?
- search 錛氳緗鍒楁槸鍚﹀彲浠ヨ鍒椾負鎼滅儲鏉′歡錛岄粯璁や負true銆?
- resizable 錛氳緗垪鏄惁鍙互鍙樻洿灝哄錛岄粯璁や負true銆?
- hidden 錛氳緗鍒楀垵濮嬪寲鏃舵槸鍚︿負闅愯棌鐘舵侊紝榛樿涓篺alse銆?
- formatter 錛氶璁劇被鍨嬫垨鐢ㄦ潵鏍煎紡鍖栬鍒楃殑鑷畾涔夊嚱鏁板悕銆傚父鐢ㄩ璁炬牸寮忔湁錛歩nteger銆乨ate銆乧urrency銆乶umber絳夛紙鍏蜂綋鍙傝鏂囨。 錛夈?/li>
涓夈?娉ㄦ剰浜嬮」
1. 鍔ㄦ佹敼鍙楢dd Form鎴栬匛dit Form涓殑select鐨勫唴瀹癸紝濡傦細鏀瑰彉涓嬪浘涓殑Comparator涓嬫媺涓殑鍐呭銆?
$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},
{
checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,
beforeInitData:function(formid){
initComparator();
},
beforeShowForm: function(formid){
$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});
$('#tr_Name', formid).hide();
}
}錛?/edit
{},//add
{}//del
錛?
beforeInitData, beforeShowForm鍦ㄦ瘡嬈＄偣鍑葷紪杈戠殑鏃跺欓兘浼氭墽琛屻俰nitComparator鐨勪綔鐢ㄦ槸閫氳繃ajax鑾峰彇鏁版嵁錛岀劧鍚庡埄 鐢?("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });鏉ヨ緗瓹omparator涓嬫媺涓殑鍐呭銆傚叾涓璿alueString鐨勬牸寮忓涓?#8217; equal to: equal to; not equal to: not equal to’銆傞敭鍊間箣闂寸敤鍐掑彿闅斿紑錛?欏逛箣闂寸敤鍒嗗彿闅斿紑銆傛敞鎰忥細鎶妑ecreateForm璁句負true錛屽惁鍒?setColProp'鍙湪絎竴嬈¤皟鐢ㄦ椂鏈夋晥銆?
2. var rowNum = parseInt($(this).getGridParam("records"), 10); 寰楀埌鏁版嵁鏉℃暟銆?
3. jQuery("#list_d").clearGridData();娓呯┖鏁版嵁銆?
4. jQuery("#list").getCell(ids,"Key");鑾峰彇絎琲ds琛岀殑key鍒椼?
5. $("#list").jqGrid('setSelection', "1");閫変腑絎竴琛屻傛斁鍦╨oadComplete錛氫腑鍦╣ird鍔犺澆瀹屾垚鐨勬椂鍊欒嚜鍔ㄩ変腑絎竴琛屻?loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 瀵逛簬鍍?涓殑鍙紪杈戠殑瀛楁錛屽彲浠ヨ瀹歳ule錛屽弬瑙?a >http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
7. 淇敼Option錛屼互URL涓轟緥
jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');
澶嶆潅鐨勮〃鏍煎彲浠ュ弬鑰僯query grid demo緗戠珯 錛?
]]>