高級(jí)jqgrid詳解及應(yīng)用

北風(fēng)網(wǎng)項(xiàng)目培訓(xùn)第29講：jqGrid詳解及高級(jí)應(yīng)用(1)講師：風(fēng)舞煙JavaScript-JQuery系列全程精通+圖書館管理系統(tǒng)實(shí)戰(zhàn)目標(biāo)jqGrid是什么?jqGrid的用處?jqGrid的使用jqGrid是什么?

jqGrid是什么?jqGrid是一個(gè)用來(lái)顯示網(wǎng)格數(shù)據(jù)的jQuery插件，文檔比較全面，附帶中文版本。主要特點(diǎn):

-FullcontrolwithJavaScriptAPI

-DatareturnedfromtheserverisXML

-Simpleconfiguration

-Abilitytoloadbigdatasets(paging)

-Resizablecolumns

-Server-sidesorting

-Supportoflinks,images,checkboxes

-Youcanaddmorethanonegridonasiglepage(master-detail)官方主頁(yè)

目前最新版本：jqGrid3.7Beta在線文檔

在線Demo

jqGrid的使用-準(zhǔn)備工作jqGrid的使用Step1:準(zhǔn)備好后臺(tái)數(shù)據(jù)庫(kù)jqGrid的使用-準(zhǔn)備工作Step2:HTML前臺(tái)頁(yè)面準(zhǔn)備好js必須的三個(gè)JS<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script><scriptsrc="js/i18n/grid.locale-en.js"type="text/javascript"></script><scriptsrc="js/jquery.jqGrid.min.js"type="text/javascript"></script>jQuery庫(kù)jqGrid語(yǔ)言庫(kù)jqGrid庫(kù),目前最新版本3.6jqGrid的使用-準(zhǔn)備工作Step3:前臺(tái)HTML頁(yè)面準(zhǔn)備好兩個(gè)css<linkhref="themes/redmond/jquery-ui-1.7.1.custom.css"rel="stylesheet"type="text/css"/><linkhref="themes/ui.jqgrid.css"rel="stylesheet"type="text/css"/>jQueryUI樣式j(luò)qGridCSSjqGrid的使用-準(zhǔn)備工作Step4:前臺(tái)HTML頁(yè)面的HTML代碼……<tableid="list1"></table><divid="pager1"></div>……顯示jqGrid內(nèi)容顯示jqGrid分頁(yè)jqGrid取數(shù)據(jù)的四種方式j(luò)qGrid取數(shù)據(jù)的四種方式方式一、XML數(shù)據(jù)方式二、XMLString數(shù)據(jù)方式三、JSON數(shù)據(jù)方式四、JSONString數(shù)據(jù)附一擴(kuò)展方式:ArrayData數(shù)據(jù)附二擴(kuò)展方式:DataType指定特定的Function加載 數(shù)據(jù)jqGrid取數(shù)據(jù)方式1--XMLjqGrid取數(shù)據(jù)方式1–XMLeg:step1:后臺(tái)頁(yè)面XMLData.aspx要求返回?cái)?shù)據(jù)的格式：xmlReader:{root:"rows",row:"row",page:"rows>page",total:"rows>total",records:"rows>records",repeatitems:true,cell:"cell",id:"[id]",userdata:"userdata",subgrid:{root:"rows",row:"row",repeatitems:true,cell:"cell"}}jqGrid取數(shù)據(jù)方式1--XML形如：

要獲取第幾頁(yè)數(shù)據(jù)

共幾頁(yè)

總記錄數(shù)主鍵ID

后臺(tái)可以用：request[“rows”]獲取前臺(tái)設(shè)置的分頁(yè)條數(shù)后臺(tái)可以用：request[“sidx”]獲取要排序的字段或字段索引后臺(tái)可以用：request[“sord”]獲取要排序的方式asc|desc

后臺(tái)可以用：request[“page”]獲取jqGrid請(qǐng)求的是第幾頁(yè)數(shù)據(jù)jqGrid取數(shù)據(jù)方式1--XML前臺(tái)調(diào)用頁(yè)面

$(function(){jQuery("#list1").jqGrid({ url:'AjaxPage/XMLData.aspx?q=1', datatype:"xml", colNames:['編號(hào)','登錄帳號(hào)','密碼','狀態(tài)','班級(jí)','真實(shí)姓名','性別','聯(lián)系電話','家庭住址','Email','是否在線'], colModel:[ {name:'StudentId',index:'1',width:75}, {name:'LoginId',index:'2',width:90}, {name:'LoginPwd',index:'3',width:100}, {name:'UserState',index:'4',width:80,align:"right"}, {name:'Class',index:'5',width:80,align:"right"}, {name:'StudentName',index:'6',width:80,align:"right"}, {name:'Sex',index:'7',width:50,sortable:false}, {name:'Phone',index:'8',sortable:false}, {name:'Adress',index:'9',width:100,sortable:false}, {name:'Email',index:'10',sortable:false}, {name:'UserOnline',index:'11',width:100,sortable:false} ],

jqGrid取數(shù)據(jù)方式1--XML rowNum:5, autowidth:true, rowList:[5,10,15], pager:jQuery('#pager1'), sortname:'1',

viewrecords:true,

sortorder:"asc",

caption:"學(xué)生基本信息-XML"}).navGrid('#pager1',{edit:false,add:false,del:false});

});

設(shè)置分頁(yè)條數(shù),對(duì)應(yīng)rows參數(shù)

設(shè)置排序字段,對(duì)應(yīng)sidx參數(shù)

設(shè)置排序方式,對(duì)應(yīng)sord參數(shù)可以用page參數(shù)獲取前臺(tái)jqGrid請(qǐng)求的是第幾頁(yè)數(shù)據(jù)jqGrid取數(shù)據(jù)方式1--XML運(yùn)行結(jié)果如下圖所示XMLDataDemo.aspxjqGrid取數(shù)據(jù)方式2--XMLStringjqGrid取數(shù)據(jù)方式2—XMLString唯一和jqGridXMLData不同的是返回的是一個(gè)符合xml格式的字符串如：varresult="<?xmlversion='1.0'encoding='utf-8'?><rows>"+"<page>1</page>"+"<total>2</total>"+"<records>12</records>"+"<rowid='742'><cell>742</cell><cell>S2T01劉靜</cell><cell>123</cell><cell>可用"+"</cell><cell>S2T04</cell><cell>劉靜</cell><cell>男"+"</cell><cell>1387766554</cell><cell>xx路xx號(hào)</cell><cell>S2T01劉靜"+"</cell><cell>在線</cell></row>"+"<rowid='942'><cell>942</cell><cell>S2T01王維榮</cell><cell>winner</cell><cell>可用</cell><cell>S2T08</cell><cell>王維榮</cell><cell>女</cell><cell>1307766554</cell><cell>aa路aa號(hào)</cell><cell></cell><cell>在線</cell></row>"+"<rowid='1042'><cell>1042</cell><cell>S2T01王燕</cell><cell>winner</cell><cell>可用</cell><cell>S1R1</cell><cell>王燕</cell><cell>女</cell><cell>1387766556</cell><cell>bb路bb號(hào)</cell><cell></cell><cell>不在線</cell></row>"+"</rows>";jqGrid取數(shù)據(jù)方式2--XMLString前臺(tái)HTML頁(yè)面：

<scripttype="text/javascript">$(function(){varresult="<?xmlversion='1.0'encoding='utf-8'?><rows>"+"<page>1</page>"+"<total>2</total>"+"<records>12</records>"+"<rowid='742'><cell>742</cell><cell>S2T01劉靜</cell><cell>123</cell><cell>可用"+"</cell><cell>S2T04</cell><cell>劉靜</cell><cell>男"+"</cell><cell>1387766554</cell><cell>xx路xx號(hào)</cell><cell>S2T01劉靜"+"</cell><cell>在線</cell></row>"+"<rowid='942'><cell>942</cell><cell>S2T01王維榮</cell><cell>winner</cell><cell>可用</cell><cell>S2T08</cell><cell>王維榮</cell><cell>女</cell><cell>1307766554</cell><cell>aa路aa號(hào)</cell><cell></cell><cell>在線</cell></row>"+"<rowid='1042'><cell>1042</cell><cell>S2T01王燕</cell><cell>winner</cell><cell>可用</cell><cell>S1R1</cell><cell>王燕</cell><cell>女</cell><cell>1387766556</cell><cell>bb路bb號(hào)</cell><cell></cell><cell>不在線</cell></row>"+"</rows>";jqGrid取數(shù)據(jù)方式2--XMLStringjQuery("#list1").jqGrid({

datatype:"xmlstring",datastr:result,colNames:['編號(hào)','登錄帳號(hào)','密碼','狀態(tài)','班級(jí)','真實(shí)姓名','性別','聯(lián)系電話','家庭住址','Email','是否在線'],colModel:[ {name:'StudentId',index:'1',width:75}, {name:'LoginId',index:'2',width:90}, {name:'LoginPwd',index:'3',width:100}, {name:'UserState',index:'4',width:80,align:"right"}, {name:'Class',index:'5',width:80,align:"right"}, {name:'StudentName',index:'6',width:80,align:"right"}, {name:'Sex',index:'7',width:50,sortable:false}, {name:'Phone',index:'8',sortable:false}, {name:'Adress',index:'9',width:100,sortable:false}, {name:'Email',index:'10',sortable:false}, {name:'UserOnline',index:'11',width:100,sortable:false} ],jqGrid取數(shù)據(jù)方式2--XMLString

rowNum:5,autowidth:true,rowList:[5,10,15],pager:jQuery('#pager1'),sortname:'1',viewrecords:true,sortorder:"asc",caption:"學(xué)生基本信息-XMLString"}).navGrid('#pager1',{edit:false,add:false,del:false});

}); </script>XMLStringDemo.aspxjqGrid取數(shù)據(jù)方式3--JSONjqGrid取數(shù)據(jù)方式3—JSONjqGrid要求后臺(tái)的JSON的格式：jsonReader:{root:"rows",page:"page",total:"total",records:"records",repeatitems:true,cell:"cell",id:"id",userdata:"userdata",subgrid:{root:"rows",repeatitems:true,cell:"cell"}}jqGrid取數(shù)據(jù)方式3--JSON如：{total:"xxx",page:"yyy",records:"zzz",rows:[[id:"1",cell:["cell11","cell12","cell13"]],[id:"2",cell:["cell21","cell22","cell23"]],...]}jqGrid取數(shù)據(jù)方式3--JSONjqGrid取數(shù)據(jù)方式3--JSONExample:后臺(tái)頁(yè)面(jsonData.aspx)：組合json輸出{total:2,page:1,records:12,rows:[{id:742,cell:["742","S2T01劉靜","123","可用","S2T04","劉靜","男","1387766554","xx路xx號(hào)","S2T01劉靜","在線"]},{id:942,cell:["942","S2T01王維榮","winner","可用","S2T08","王維榮","女","1307766554","aa路aa號(hào)","","在線"]},{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb號(hào)","","不在線"]},{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","李成","女","1397766554","cc路aa號(hào)","","不在線"]},{id:1342,cell:["1342","S2T01樊軍","111","可用","S2T08","樊軍","男","1387766550","dd路aa號(hào)","","不在線"]},{id:1442,cell:["1442","S2T01張偉","zhangwei","不可用","S2T09","張偉","女","1357766554","","","不在線"]},{id:3242,cell:["3242","S1T01aaa","123","可用","S2T04","aaa","男","1387766554","xx路xx號(hào)","S2T01劉靜","在線"]},{id:3342,cell:["3342","S1T01bbb","winner","可用","S2T08","bbb","女","1307766554","aa路aa號(hào)","","在線"]},{id:3442,cell:["3442","S1T01ccc","winner","可用","S1R1","ccc","女","1387766556","bb路bb號(hào)","","不在線"]},{id:3542,cell:["3542","S1T01ddd","winner","不可用","S2T08","ddd","女","1397766554","cc路aa號(hào)","","不在線"]}]}jqGrid取數(shù)據(jù)方式3--JSON前臺(tái)頁(yè)面調(diào)用(JSONDataDemo.aspx)jQuery("#list5").jqGrid({url:'AjaxPage/JSONData.aspx',datatype:"json",colNames:['編號(hào)','登錄帳號(hào)','密碼','狀態(tài)','班級(jí)','真實(shí)姓名','性別','聯(lián)系電話','家庭住址','Email','是否在線'],colModel:[ {name:'StudentId',index:'1',width:75}, {name:'LoginId',index:'2',width:90}, {name:'LoginPwd',index:'3',width:100}, {name:'UserState',index:'4',width:80,align:"right"}, {name:'Class',index:'5',width:80,align:"right"}, {name:'StudentName',index:'6',width:80,align:"right"}, {name:'Sex',index:'7',width:50,sortable:false}, {name:'Phone',index:'8',width:80,sortable:false}, {name:'Adress',index:'9',width:100,sortable:false}, {name:'Email',index:'10',width:100,sortable:false}, {name:'UserOnline',index:'11',width:100,sortable:false} ],jqGrid取數(shù)據(jù)方式3--JSON

rowNum:5,autowidth:false,rowList:[5,10,15],pager:jQuery('#pager1'),sortname:'1',viewrecords:true,sortorder:"asc",loadonce:false,caption:"學(xué)生基本信息-JSON"}).navGrid('#pager1',{edit:false,add:false,del:false});jqGrid取數(shù)據(jù)方式3--JSON運(yùn)行結(jié)果如下：JSONDataDemo.aspxjqGrid取數(shù)據(jù)方式4--JSONStringjqGrid取數(shù)據(jù)方式4—JSONStringJSONString和JSONData唯一的不同是把JSON作為字符串返回。前臺(tái)頁(yè)面代碼：$(function(){varresult='{total:2,page:1,records:12,rows:['+'{id:742,cell:["742","S2T01劉靜","123","可用","S2T04","劉靜","男","1387766554","xx路xx號(hào)","S2T01劉靜","在線"]},'+'{id:942,cell:["942","S2T01王維榮","winner","可用","S2T08","王維榮","女","1307766554","aa路aa號(hào)","","在線"]},'+'{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb號(hào)","","不在線"]},'+'{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","李成","女","1397766554","cc路aa號(hào)","","不在線"]},'+'{id:1342,cell:["1342","S2T01樊軍","111","可用","S2T08","樊軍","男","1387766550","dd路aa號(hào)","","不在線"]},'']}';jqGrid取數(shù)據(jù)方式4--JSONStringjQuery("#list1").jqGrid({

datatype:"jsonstring",datastr:result,colNames:['編號(hào)','登錄帳號(hào)','密碼','狀態(tài)','班級(jí)','真實(shí)姓名','性別','聯(lián)系電話','家庭住址','Email','是否在線'],colModel:[ {name:'StudentId',index:'1',width:75}, {name:'LoginId',index:'2',width:90}, {name:'LoginPwd',index:'3',width:100}, {name:'UserState',index:'4',width:80,align:"right"}, {name:'Class',index:'5',width:80,align:"right"}, {name:'StudentName',index:'6',width:80,align:"right"}, {name:'Sex',index:'7',width:50,sortable:false}, {name:'Phone',index:'8',sortable:false}, {name:'Adress',index:'9',width:100,sortable:false}, {name:'Email',index:'10',sortable:false}, {name:'UserOnline',index:'11',width:100,sortable:false} ],jqGrid取數(shù)據(jù)方式4--JSONString

rowNum:5,autowidth:true,rowList:[5,10,15],pager:jQuery('#pager1'),sortname:'1',viewrecords:true,sortorder:"asc",caption:"學(xué)生基本信息-JSONString"}).navGrid('#pager1',{edit:false,add:false,del:false});});JSONStringDemo.aspxjqGrid取數(shù)據(jù)方式5--ArrayData后臺(tái)返回?cái)?shù)據(jù)，形如：[{Id:"742",LoginId:"S2T01劉靜",LoginPwd:"123",UserState:"可用",ClassName:"S2T04",StudentName:"劉靜2"},{Id:"942",LoginId:"S2T01王維榮",LoginPwd:"winner",UserState:"可用",ClassName:"S2T08",StudentName:"王維榮3"},{Id:"1042",LoginId:"S2T01王燕",LoginPwd:"winner",UserState:"可用",ClassName:"S1R1",StudentName:"王燕"}]jqGrid取數(shù)據(jù)方式5--ArrayData前臺(tái)調(diào)用代碼，形如：$.get("AjaxPage/ArrayData.aspx",function(data){varmydata=eval(data);jQuery("#list1").jqGrid({ datatype:"local", colNames:['編號(hào)','登錄帳號(hào)','密碼','狀態(tài)','班級(jí)','真實(shí)姓名'], colModel:[ {name:'Id',index:'1',width:75}, {name:'LoginId',index:'2',width:90}, {name:'LoginPwd',index:'3',width:100}, {name:'UserState',index:'4',width:80,align:"right"}, {name:'ClassName',index:'5',width:80,align:"right"}, {name:'StudentName',index:'6',width:80,align:"right"}, ], multiselect:true, height:270

ArrayDataDemo.aspx

});

for(vari=0;i<=mydata.length;i++) jQuery("#list1").jqGrid('addRowData',i+1,mydata[i]);

});jqGrid取數(shù)據(jù)方式6—DataTypeFunctionjQuery("#list1").jqGrid({

datatype:function(postdata){$.ajax({url:'AjaxPage/XMLData.aspx?q=1',datatype:'xml',data:postdata,complete:function(xmldata,stat){if(stat=="success"){varthegrid=jQuery("#list1")[0];thegrid.addXmlData(xmldata.responseXML);}}});},

LoadDataByFunction.aspx…….取服務(wù)器自定義數(shù)據(jù)xml-userdata取服務(wù)器自定義數(shù)據(jù)(userdata)-GetUserData_XML.aspxstep1:服務(wù)器端返回的數(shù)據(jù)格式形如:<?xmlversion="1.0"encoding="utf-8"?>-<rows>

<page>1</page>

<total>1</total>

<records>10</records>

<userdataname="boys">4</userdata>

<userdataname="girls">6</userdata>

-<rowid="742">

<cell>742</cell>

<cell>S2T01劉靜</cell>

<cell>123</cell>

</row><rowid="942">….

</row>

</rows>取服務(wù)器自定義數(shù)據(jù)xml-userdatastep2:前臺(tái)HTML代碼<body><formid="form1"runat="server"><divid="divmsg"style="color:Red;font-weight:bold;font-family:宋體;font-size:13px;"></div><br/><tableid="list1"></table><divid="pager1"></div><br/>

</form></body>取服務(wù)器自定義數(shù)據(jù)xml-userdatastep3:前臺(tái)JS代碼(返回到前臺(tái)的用戶自定義數(shù)據(jù)格式如:userdata:{boys:4,girl:6},)jQuery("#list1").jqGrid({url:'AjaxPage/UserData_XML.aspx',datatype:"xml",colNames:['編號(hào)','登錄帳號(hào)','密碼','狀態(tài)‘],colModel:[ {name:'StudentId',index:'1',width:75}, {name:'LoginId',index:'2',width:90}, {name:'LoginPwd',index:'3',width:100}, {name:'UserState',index:'4',width:80,align:"right"} ],

sortorder:"asc",caption:"學(xué)生基本信息-XML",

loadComplete:function(){varret=jQuery("#list1").getGridParam('userData');varboys=ret.boys;vargirls=ret.girls;$("#divmsg").html("共有男生"+boys+"人，共有女生"+girls+"人");}}).navGrid('#pager1',{edit:false,add:false,del:false});取服務(wù)器自定義數(shù)據(jù)xml-userdatastep4:運(yùn)行界面如下圖GetUserData_XML.aspx取服務(wù)器自定義數(shù)據(jù)(json)-uesrdatastep1:后臺(tái)返回的數(shù)據(jù)格式如圖:{total:1,page:1,records:10,userdata:{boys:4,girls:6},rows:[{id:742,cell:["742","S2T01劉靜","123","可用","S2T04","劉靜2","男","1387766554","xx路xx號(hào)","S2T01劉靜","在線"]},{id:942,cell:["942","S2T01王維榮","winner","可用","S2T08","王維榮3","男","1307766554","aa路aa號(hào)","","在線"]},{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb號(hào)","","不在線"]},{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","王李成","女","1397766554","cc路aa號(hào)","","不在線"]},{id:1342,cell:["1342","S2T01樊軍","111","可用","S2T08","王樊軍","男","1387766550","dd路aa號(hào)","","不在線"]}]}取服務(wù)器自定義數(shù)據(jù)(json)-uesrdatastep2:前臺(tái)HTML代碼<body><formid="form1"runat="server"><divid="divmsg"style="color:Red;font-weight:bold;font-family:宋體