• 1. 北风网项目培训 第29讲:jqGrid详解及高级应用(1)讲师:风舞烟 QQ:768580674 Email:fwyTech@126.com JavaScript-JQuery系列全程精通+图书馆管理系统实战
  • 2. 目标jqGrid是什么? jqGrid的用处? jqGrid的使用
  • 3. jqGrid是什么? jqGrid是什么? jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 主要特点: -Full control with JavaScript API -Data returned from the server is XML -Simple configuration -Ability to load big datasets (paging) -Resizable columns -Server-side sorting -Support of links, images, checkboxes -You can add more than one grid on a sigle page (master-detail)
  • 4. 官方主页 http://www.jqgrid.com/ 目前最新版本:jqGrid 3.7 Beta 在线文档 http://www.secondpersonplural.ca/jqgriddocs/index.htm 在线Demo http://www.trirand.com/blog/jqgrid/jqgrid.html
  • 5. jqGrid的使用- 准备工作jqGrid的使用 Step 1:准备好后台数据库
  • 6. jqGrid的使用- 准备工作Step 2:HTML前台页面准备好js 必须的三个JS jQuery库jqGrid语言库jqGrid库,目前最新版本3.6
  • 7. jqGrid的使用- 准备工作Step 3: 前台HTML页面准备好两个css jQuery UI样式jqGrid CSS
  • 8. jqGrid的使用- 准备工作Step 4: 前台HTML页面的HTML代码 ……
    …… 显示jqGrid内容显示jqGrid分页
  • 9. jqGrid取数据的四种方式jqGrid取数据的四种方式 方式一、XML数据 方式二、XMLString数据 方式三、JSON数据 方式四、JSONString数据 附一扩展方式: ArrayData数据 附二扩展方式: DataType指定特定的Function加载 数据
  • 10. jqGrid取数据方式1--XMLjqGrid取数据方式1 – XML eg: 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" } }
  • 11. jqGrid取数据方式1--XML形如: 要获取第几页数据 共几页 总记录数主键ID 后台可以用:request[“rows”]获取前台设置的分页条数 后台可以用:request[“sidx”]获取要排序的字段或字段索引 后台可以用:request[“sord”]获取要排序的方式 asc|desc 后台可以用:request[“page”]获取jqGrid请求的是第几页数据
  • 12. 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} ],
  • 13. 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请求的是第几页数据
  • 14. jqGrid取数据方式1--XML运行结果如下图所示 XMLDataDemo.aspx
  • 15. jqGrid取数据方式2--XMLStringjqGrid取数据方式2—XMLString 唯一和jqGrid XML Data不同的是返回的是一个符合xml格式的字符串 如:var result = ""+ "1"+ "2"+ "12"+ "742S2T01刘静123可用"+"S2T04刘静男"+"1387766554xx路xx号S2T01刘静@126.com"+"在线"+ "942S2T01王维荣winner可用S2T08王维荣1307766554aa路aa号S2T01aa@126.com在线"+"1042S2T01王燕winner可用S1R1王燕1387766556bb路bb号S2T01bb@126.com不在线"+ "";
  • 16. jqGrid取数据方式2--XMLString前台HTML页面: XMLStringDemo.aspx
  • 19. jqGrid取数据方式3--JSONjqGrid取数据方式3—JSON jqGrid要求后台的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" } }
  • 20. jqGrid取数据方式3--JSON如: { total: "xxx", page: "yyy", records: "zzz", rows : [ [id:"1", cell:["cell11", "cell12", "cell13"]], [id:"2", cell:["cell21", "cell22", "cell23"]], ... ] }
  • 21. jqGrid取数据方式3--JSON
  • 22. jqGrid取数据方式3--JSONExample : 后台页面(jsonData.aspx):组合json输出 {total:2,page:1,records:12, rows: [ {id:742,cell:["742","S2T01刘静","123","可用","S2T04","刘静","男","1387766554","xx路xx号","S2T01刘静@126.com","在线"]} , {id:942,cell:["942","S2T01王维荣","winner","可用","S2T08","王维荣","女","1307766554","aa路aa号","S2T01aa@126.com","在线"]} , {id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb号","S2T01bb@126.com","不在线"]} , {id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","李成","女","1397766554","cc路aa号","S2T01cc@126.com","不在线"]} , {id:1342,cell:["1342","S2T01樊军","111","可用","S2T08","樊军","男","1387766550","dd路aa号","S2T01dd@126.com","不在线"]} , {id:1442,cell:["1442","S2T01张伟","zhangwei","不可用","S2T09","张伟","女","1357766554","","S2T01ee@126.com","不在线"]} , {id:3242,cell:["3242","S1T01aaa","123","可用","S2T04","aaa","男","1387766554","xx路xx号","S2T01刘静@126.com","在线"]} , {id:3342,cell:["3342","S1T01bbb","winner","可用","S2T08","bbb","女","1307766554","aa路aa号","S2T01aa@126.com","在线"]} , {id:3442,cell:["3442","S1T01ccc","winner","可用","S1R1","ccc","女","1387766556","bb路bb号","S2T01bb@126.com","不在线"]} , {id:3542,cell:["3542","S1T01ddd","winner","不可用","S2T08","ddd","女","1397766554","cc路aa号","S2T01cc@126.com","不在线"]} ]}
  • 23. 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 } ],
  • 24. 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 });
  • 25. jqGrid取数据方式3--JSON运行结果如下: JSONDataDemo.aspx
  • 26. jqGrid取数据方式4--JSONStringjqGrid取数据方式4—JSONString JSONString和JSON Data唯一的不同是把JSON作为字符串返回。 前台页面代码: $(function() { var result = '{total:2,page:1,records:12, rows: [' + '{id:742,cell:["742","S2T01刘静","123","可用","S2T04","刘静","男","1387766554","xx路xx号","S2T01刘静@126.com","在线"]} ,' + '{id:942,cell:["942","S2T01王维荣","winner","可用","S2T08","王维荣","女","1307766554","aa路aa号","S2T01aa@126.com","在线"]} ,' + '{id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb号","S2T01bb@126.com","不在线"]} ,' + '{id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","李成","女","1397766554","cc路aa号","S2T01cc@126.com","不在线"]} ,' + '{id:1342,cell:["1342","S2T01樊军","111","可用","S2T08","樊军","男","1387766550","dd路aa号","S2T01dd@126.com","不在线"]} ,' ']}';
  • 27. 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 } ],
  • 28. 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.aspx
  • 29. jqGrid取数据方式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:"王燕"} ]
  • 30. jqGrid取数据方式5--ArrayData前台调用代码,形如: $.get("AjaxPage/ArrayData.aspx",function(data){ var mydata=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(var i=0;i<=mydata.length;i++) jQuery("#list1").jqGrid('addRowData',i+1,mydata[i]); });
  • 31. jqGrid取数据方式6—DataType FunctionjQuery("#list1").jqGrid({ datatype: function(postdata) { $.ajax({ url: 'AjaxPage/XMLData.aspx?q=1', datatype: 'xml', data: postdata, complete: function(xmldata, stat) { if (stat == "success") { var thegrid = jQuery("#list1")[0]; thegrid.addXmlData(xmldata.responseXML); } } } ); }, LoadDataByFunction.aspx …….
  • 32. 取服务器自定义数据xml-userdata取服务器自定义数据(userdata)-GetUserData_XML.aspx step 1: 服务器端返回的数据格式形如: -   1   1   10   4   6 -   742   S2T01刘静   123   ….    
  • 33. 取服务器自定义数据xml-userdatastep 2: 前台HTML代码


  • 34. 取服务器自定义数据xml-userdatastep 3: 前台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() { var ret = jQuery("#list1").getGridParam('userData'); var boys = ret.boys; var girls = ret.girls; $("#divmsg").html("共有男生"+boys+"人,共有女生"+girls+"人"); } }).navGrid('#pager1', { edit: false, add: false, del: false });
  • 35. 取服务器自定义数据xml-userdatastep 4: 运行界面如下图 GetUserData_XML.aspx
  • 36. 取服务器自定义数据(json)-uesrdatastep 1:后台返回的数据格式如图: {total:1,page:1,records:10, userdata:{boys:4, girls:6}, rows: [ {id:742,cell:["742","S2T01刘静","123","可用","S2T04","刘静2","男","1387766554","xx路xx号","S2T01刘静@126.com","在线"]} , {id:942,cell:["942","S2T01王维荣","winner","可用","S2T08","王维荣3","男","1307766554","aa路aa号","S2T01aa@126.com","在线"]} , {id:1042,cell:["1042","S2T01王燕","winner","可用","S1R1","王燕","女","1387766556","bb路bb号","S2T01bb@126.com","不在线"]} , {id:1142,cell:["1142","S2T01李成","winner","不可用","S2T08","王李成","女","1397766554","cc路aa号","S2T01cc@126.com","不在线"]} , {id:1342,cell:["1342","S2T01樊军","111","可用","S2T08","王樊军","男","1387766550","dd路aa号","S2T01dd@126.com","不在线"]} ]}
  • 37. 取服务器自定义数据(json)-uesrdatastep 2: 前台HTML代码


  • 38. 取服务器自定义数据(json)-uesrdatastep 3:前台JS代码 jQuery("#list5").jqGrid({ url: 'AjaxPage/UserData_JSON.aspx', datatype: "json", colNames: ['编号', '登录帐号', '密码', '状态‘], colModel: [ { name: 'StudentId', index: '1', width: 75, resizable: false,hidden:true }, { name: 'LoginId', index: '2', width: 90 }, { name: 'LoginPwd', index: '3', width: 100 }, { name: 'UserState', index: '4', width: 80, align: "right" } ], loadComplete: function() { var ret = jQuery("#list5").getGridParam('userData'); var boys = ret.boys; var girls = ret.girls; $("#divmsg").html("共有男生" + boys + "人,共有女生" + girls + "人"); } }).navGrid('#pager1', { edit: false, add: false, del: false });
  • 39. 取服务器自定义数据(json)-uesrdatastep 4: 运行界面如下图 GetUserData_JSON.aspx
  • 40. jqGrid LoadOncejqGrid LoadOnce $(function (){ jQuery("#list1").jqGrid({ url:'AjaxPage/JSONData.aspx', datatype: "json", colNames:['编号','登录帐号', '密码‘], colModel:[ {name:'StudentId',index:'1', width:75}, {name:'LoginId',index:'2', width:90}, {name:'LoginPwd',index:'3', width:100} ], …… viewrecords: true, sortorder: "asc", loadonce: true,//只加载一次 LoadOnceDemo.aspx caption:"学生基本信息-LoadOnce" }).navGrid('#pager1',{edit:false,add:false,del:false});
  • 41. 总结jqGrid取数据的四种方式 方式一、XML数据 方式二、XMLString数据 方式三、JSON数据 方式四、JSONString数据 附一扩展方式: ArrayData数据 附二扩展方式: DataType指定特定的Function加载 数据
  • 42. 本课程版权归北风网所有 相关代码及视频请访问:http://www.ibeifeng.com/goods.php?id=77