高级jqgrid详解及应用

北风网项目培训第29讲：jqGrid详解及高级应用(1)讲师：风舞烟JavaScript-JQuery系列全程精通+图书馆管理系统实战目标jqGrid是什么?jqGrid的用处?jqGrid的使用jqGrid是什么?

jqGrid是什么?jqGrid是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。主要特点:

-FullcontrolwithJavaScriptAPI

-DatareturnedfromtheserverisXML

-Simpleconfiguration

-Abilitytoloadbigdatasets(paging)

-Resizablecolumns

-Server-sidesorting

-Supportoflinks,images,checkboxes

-Youcanaddmorethanonegridonasiglepage(master-detail)官方主页

目前最新版本：jqGrid3.7Beta在线文档

在线Demo

jqGrid的使用-准备工作jqGrid的使用Step1:准备好后台数据库jqGrid的使用-准备工作Step2:HTML前台页面准备好js必须的三个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库jqGrid语言库jqGrid库,目前最新版本3.6jqGrid的使用-准备工作Step3:前台HTML页面准备好两个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样式jqGridCSSjqGrid的使用-准备工作Step4:前台HTML页面的HTML代码……<tableid="list1"></table><divid="pager1"></div>……显示jqGrid内容显示jqGrid分页jqGrid取数据的四种方式jqGrid取数据的四种方式方式一、XML数据方式二、XMLString数据方式三、JSON数据方式四、JSONString数据附一扩展方式:ArrayData数据附二扩展方式:DataType指定特定的Function加载 数据jqGrid取数据方式1--XMLjqGrid取数据方式1–XMLeg:step1:后台页面XMLData.aspx要求返回数据的格式：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取数据方式1--XML形如：

要获取第几页数据

共几页

总记录数主键ID

后台可以用：request[“rows”]获取前台设置的分页条数后台可以用：request[“sidx”]获取要排序的字段或字段索引后台可以用：request[“sord”]获取要排序的方式asc|desc

后台可以用：request[“page”]获取jqGrid请求的是第几页数据jqGrid取数据方式1--XML前台调用页面

$(function(){jQuery("#list1").jqGrid({ url:'AjaxPage/XMLData.aspx?q=1', datatype:"xml", colNames:['编号','登录帐号','密码','状态','班级','真实姓名','性别','联系电话','家庭住址','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取数据方式1--XML rowNum:5, autowidth:true, rowList:[5,10,15], pager:jQuery('#pager1'), sortname:'1',

viewrecords:true,

sortorder:"asc",

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

});

设置分页条数,对应rows参数

设置排序字段,对应sidx参数

设置排序方式,对应sord参数可以用page参数获取前台jqGrid请求的是第几页数据jqGrid取数据方式1--XML运行结果如下图所示XMLDataDemo.aspxjqGrid取数据方式2--XMLStringjqGrid取数据方式2—XMLString唯一和jqGridXMLData不同的是返回的是一个符合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号</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号</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号</cell><cell></cell><cell>不在线</cell></row>"+"</rows>";jqGrid取数据方式2--XMLString前台HTML页面：

<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号</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号</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号</cell><cell></cell><cell>不在线</cell></row>"+"</rows>";jqGrid取数据方式2--XMLStringjQuery("#list1").jqGrid({

datatype:"xmlstring",datastr:result,colNames:['编号','登录帐号','密码','状态','班级','真实姓名','性别','联系电话','家庭住址','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取数据方式2--XMLString

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

}); </script>XMLStringDemo.aspxjqGrid取数据方式3--JSONjqGrid取数据方式3—JSONjqGrid要求后台的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取数据方式3--JSON如：{total:"xxx",page:"yyy",records:"zzz",rows:[[id:"1",cell:["cell11","cell12","cell13"]],[id:"2",cell:["cell21","cell22","cell23"]],...]}jqGrid取数据方式3--JSONjqGrid取数据方式3--JSONExample:后台页面(jsonData.aspx)：组合json输出{total:2,page:1,records:12,rows:[{id:742,cell:["742","S2T01刘静","123","可用","S2T04","刘静","男","1387766554","xx路xx号","S2T01刘静","在线"]},{id:942,cell:["942","S2T01王维荣","winner","可用","S2T08","王维荣","女","1307766554","aa路aa号","","在线"]},{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb号","","不在线"]},{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","李成","女","1397766554","cc路aa号","","不在线"]},{id:1342,cell:["1342","S2T01樊军","111","可用","S2T08","樊军","男","1387766550","dd路aa号","","不在线"]},{id:1442,cell:["1442","S2T01张伟","zhangwei","不可用","S2T09","张伟","女","1357766554","","","不在线"]},{id:3242,cell:["3242","S1T01aaa","123","可用","S2T04","aaa","男","1387766554","xx路xx号","S2T01刘静","在线"]},{id:3342,cell:["3342","S1T01bbb","winner","可用","S2T08","bbb","女","1307766554","aa路aa号","","在线"]},{id:3442,cell:["3442","S1T01ccc","winner","可用","S1R1","ccc","女","1387766556","bb路bb号","","不在线"]},{id:3542,cell:["3542","S1T01ddd","winner","不可用","S2T08","ddd","女","1397766554","cc路aa号","","不在线"]}]}jqGrid取数据方式3--JSON前台页面调用(JSONDataDemo.aspx)jQuery("#list5").jqGrid({url:'AjaxPage/JSONData.aspx',datatype:"json",colNames:['编号','登录帐号','密码','状态','班级','真实姓名','性别','联系电话','家庭住址','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取数据方式3--JSON

rowNum:5,autowidth:false,rowList:[5,10,15],pager:jQuery('#pager1'),sortname:'1',viewrecords:true,sortorder:"asc",loadonce:false,caption:"学生基本信息-JSON"}).navGrid('#pager1',{edit:false,add:false,del:false});jqGrid取数据方式3--JSON运行结果如下：JSONDataDemo.aspxjqGrid取数据方式4--JSONStringjqGrid取数据方式4—JSONStringJSONString和JSONData唯一的不同是把JSON作为字符串返回。前台页面代码：$(function(){varresult='{total:2,page:1,records:12,rows:['+'{id:742,cell:["742","S2T01刘静","123","可用","S2T04","刘静","男","1387766554","xx路xx号","S2T01刘静","在线"]},'+'{id:942,cell:["942","S2T01王维荣","winner","可用","S2T08","王维荣","女","1307766554","aa路aa号","","在线"]},'+'{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb号","","不在线"]},'+'{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","李成","女","1397766554","cc路aa号","","不在线"]},'+'{id:1342,cell:["1342","S2T01樊军","111","可用","S2T08","樊军","男","1387766550","dd路aa号","","不在线"]},'']}';jqGrid取数据方式4--JSONStringjQuery("#list1").jqGrid({

datatype:"jsonstring",datastr:result,colNames:['编号','登录帐号','密码','状态','班级','真实姓名','性别','联系电话','家庭住址','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取数据方式4--JSONString

rowNum:5,autowidth:true,rowList:[5,10,15],pager:jQuery('#pager1'),sortname:'1',viewrecords:true,sortorder:"asc",caption:"学生基本信息-JSONString"}).navGrid('#pager1',{edit:false,add:false,del:false});});JSONStringDemo.aspxjqGrid取数据方式5--ArrayData后台返回数据，形如：[{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取数据方式5--ArrayData前台调用代码，形如：$.get("AjaxPage/ArrayData.aspx",function(data){varmydata=eval(data);jQuery("#list1").jqGrid({ datatype:"local", colNames:['编号','登录帐号','密码','状态','班级','真实姓名'], 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取数据方式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…….取服务器自定义数据xml-userdata取服务器自定义数据(userdata)-GetUserData_XML.aspxstep1:服务器端返回的数据格式形如:<?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>取服务器自定义数据xml-userdatastep2:前台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>取服务器自定义数据xml-userdatastep3:前台JS代码(返回到前台的用户自定义数据格式如:userdata:{boys:4,girl:6},)jQuery("#list1").jqGrid({url:'AjaxPage/UserData_XML.aspx',datatype:"xml",colNames:['编号','登录帐号','密码','状态‘],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:"学生基本信息-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});取服务器自定义数据xml-userdatastep4:运行界面如下图GetUserData_XML.aspx取服务器自定义数据(json)-uesrdatastep1:后台返回的数据格式如图:{total:1,page:1,records:10,userdata:{boys:4,girls:6},rows:[{id:742,cell:["742","S2T01刘静","123","可用","S2T04","刘静2","男","1387766554","xx路xx号","S2T01刘静","在线"]},{id:942,cell:["942","S2T01王维荣","winner","可用","S2T08","王维荣3","男","1307766554","aa路aa号","","在线"]},{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb号","","不在线"]},{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","王李成","女","1397766554","cc路aa号","","不在线"]},{id:1342,cell:["1342","S2T01樊军","111","可用","S2T08","王樊军","男","1387766550","dd路aa号","","不在线"]}]}取服务器自定义数据(json)-uesrdatastep2:前台HTML代码<body><formid="form1"runat="server"><divid="divmsg"style="color:Red;font-weight:bold;font-family:宋体