jqGrid使用经验分享(一)——jqGrid简单使用、json格式和jsonReader介绍
2014-10-17 11:31
896 查看
广大的读者朋友们大家好,很高兴又可以在博客中和大家分享我的开发经验了。
此次,我准备向大家介绍一个非常好用的jQuery表格插件——jqGrid。
如果您在实际项目中遇到web端表格展示功能的需求,又不知道到底该使用那种技术实现时,jqGrid绝对是您的不二之选。
如果您已经决定使用jqGrid技术完成项目中表格展示功能,又苦于没有详细的使用说明迟迟不能实际开发时,本系列博客绝对是您的不二之选。
本篇博客将为大家介绍一下内容:
jqGrid简单使用;
jqGrid常用选项具体含义简介;
jqGrid使用json数据格式,以及jsonReader和repeatitems配合使用时json格式的实际变化。
首先,为大家展示一个非常简单Demo。使用jqGrid绘制一张表格
显示效果:
HTML:
JavaScript:
下面为大家详细介绍一下上面绘制表格中,jqGrid具体选项的含义。
url:这个参数指定了jqGrid从服务器获取数据的请求。
datatype:这个参数指定了jqGrid调用的数据的格式,常用格式有json,xml,local。
colName:这个参数指定了jqGrid每列的title,按顺序依次排列,并且可以看出实际上它就是一个字符串数组。
colModel:这个参数指定了jqGrid各列的具体格式,"name"指定对应数据中属性名,“index”用于列排序,“width”显然是指定列宽,“align”对齐方式,“sortable”指定是否支持排序。其实上面每一个设置基本见名知意,大家可以大胆使用。(注意:colName与colModel 需要一一对应)
rowNum:这个参数指定了jqGrid显示行数,默认值20。
rowList:这个参数指定了jqGrid可以接受的rowNum值,如[10,20,30]。实际上它也仅仅是一个数组。
pager:这个参数指定了jqGrid页脚显示位置。
sortname:这个参数指定了jqGrid默认的排序列,可以是列名也可以是数字。
viewrecords:这个参数设置了是否在Pager Bar显示所有记录的总数。
sortorder:这个参数指定了jqGrid默认排序列的默认排序方式。
caption:这个参数制订了jqGrid的标题,如果设置了,则将显示在Grid的Header层。
以上仅仅是最最常用的,最最简单的选项含义,jqGrid还提供了大量选项方便大家使用,如果读者朋友们需要小编会在今后的博客中专门介绍一下jqGrid选项。
相信有很多读者朋友希望了解到底jqGrid使用的json以什么样的格式呈现,下面就为大家展示一下上面表格中使用的json数据:
看到jqGrid实际调用的json格式以后,很多读者朋友会产生疑问。是否只有符合上面格式的json数据才能被jqGrid解析?
答案是:否定的
这里就不得不介绍一下jqGrid的一个重要的选项jsonReader,jsonReader用于设置如何解析从Server端发回来的json数据。上面表格之所以能够成功解析出来得益于,jsonReader的默认设置。
jsonReader默认设置:
如果Server端返回的json数据不太符合默认设置(比如内容结构不同)那么就有必要修改这一设置。
通常jsonReader和repeatitems是配合使用的,如果repeatitems为false,json 中数据可以乱序,并且允许数据空缺。jqGrid会根据colModel中name属性和json数据对应,根据属性名称进行解析。
repeatitems为true时:
json结构:
repeatitems为false时:
json结构:
非常感谢大家能坚持阅读完本篇博客。
小编深知一篇博客不能完全介绍jqGrid的众多细节,所以会在今后的博客中不断介绍jqGrid的其他细节。
小编希望可以通过博客将自己在jqGrid使用时遇到的各种各样的问题和解决方案分享给广大读者朋友们,希望可以帮助大家快速学习jqGrid,避免在不必要的细节上浪费大量时间。
另外如果有读者朋友和小编一样对jqGrid十分偏爱,可以在评论区和小编一起讨论jqGrid的许许多多优缺点,并一起讨论相关解决方案。
***************************
非常感谢读者朋友们对小编的支持,小编非常开心可以和大家分享我的开发经验。
如果我的经验可以帮助到读者朋友们,是小编最大的动力和荣幸。
蒋继发
大连理工大学
2014-10-17 11:26:01
***************************
此次,我准备向大家介绍一个非常好用的jQuery表格插件——jqGrid。
如果您在实际项目中遇到web端表格展示功能的需求,又不知道到底该使用那种技术实现时,jqGrid绝对是您的不二之选。
如果您已经决定使用jqGrid技术完成项目中表格展示功能,又苦于没有详细的使用说明迟迟不能实际开发时,本系列博客绝对是您的不二之选。
本篇博客将为大家介绍一下内容:
jqGrid简单使用;
jqGrid常用选项具体含义简介;
jqGrid使用json数据格式,以及jsonReader和repeatitems配合使用时json格式的实际变化。
首先,为大家展示一个非常简单Demo。使用jqGrid绘制一张表格
显示效果:
HTML:
... <table id="list2"></table> <div id="pager2"></div>
JavaScript:
... jQuery("#list2").jqGrid({ url:'server.php?q=2', datatype: "json", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name asc, invdate', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, rowList:[10,20,30], pager: '#pager2', sortname: 'id', viewrecords: true, sortorder: "desc", caption:"JSON Example" }); jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
下面为大家详细介绍一下上面绘制表格中,jqGrid具体选项的含义。
url:这个参数指定了jqGrid从服务器获取数据的请求。
datatype:这个参数指定了jqGrid调用的数据的格式,常用格式有json,xml,local。
colName:这个参数指定了jqGrid每列的title,按顺序依次排列,并且可以看出实际上它就是一个字符串数组。
colModel:这个参数指定了jqGrid各列的具体格式,"name"指定对应数据中属性名,“index”用于列排序,“width”显然是指定列宽,“align”对齐方式,“sortable”指定是否支持排序。其实上面每一个设置基本见名知意,大家可以大胆使用。(注意:colName与colModel 需要一一对应)
rowNum:这个参数指定了jqGrid显示行数,默认值20。
rowList:这个参数指定了jqGrid可以接受的rowNum值,如[10,20,30]。实际上它也仅仅是一个数组。
pager:这个参数指定了jqGrid页脚显示位置。
sortname:这个参数指定了jqGrid默认的排序列,可以是列名也可以是数字。
viewrecords:这个参数设置了是否在Pager Bar显示所有记录的总数。
sortorder:这个参数指定了jqGrid默认排序列的默认排序方式。
caption:这个参数制订了jqGrid的标题,如果设置了,则将显示在Grid的Header层。
以上仅仅是最最常用的,最最简单的选项含义,jqGrid还提供了大量选项方便大家使用,如果读者朋友们需要小编会在今后的博客中专门介绍一下jqGrid选项。
相信有很多读者朋友希望了解到底jqGrid使用的json以什么样的格式呈现,下面就为大家展示一下上面表格中使用的json数据:
{"page":"1","total":2,"records":"13", "rows":[ {"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]}, {"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]}, {"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]}, {"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]}, {"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]}, {"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]}, {"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]}, {"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]}, {"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]}, {"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]} ], "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}
看到jqGrid实际调用的json格式以后,很多读者朋友会产生疑问。是否只有符合上面格式的json数据才能被jqGrid解析?
答案是:否定的
这里就不得不介绍一下jqGrid的一个重要的选项jsonReader,jsonReader用于设置如何解析从Server端发回来的json数据。上面表格之所以能够成功解析出来得益于,jsonReader的默认设置。
jsonReader默认设置:
jsonReader : { root: "rows", // json中代表实际模型数据的入口 page: "page", // json中代表当前页码的数据 total: "total", // json中代表页码总数的数据 records: "records", // json中代表数据行总数的数据 repeatitems: true, // 如果设为false,则jqGrid在解析json时,会根据name来搜索对应的数据元素(即可以json中元素可以不按顺序);而所使用的name是来自于colModel中的name设定。 cell: "cell", id: "id", userdata: "userdata", subgrid: { root:"rows", repeatitems: true, cell:"cell" } }
如果Server端返回的json数据不太符合默认设置(比如内容结构不同)那么就有必要修改这一设置。
通常jsonReader和repeatitems是配合使用的,如果repeatitems为false,json 中数据可以乱序,并且允许数据空缺。jqGrid会根据colModel中name属性和json数据对应,根据属性名称进行解析。
repeatitems为true时:
... jsonReader : { root:"rows", page: "page", total: "total", records: "records" }, ...
json结构:
{ "page": "xxx", "total": "yyy", "records": "zzz", "rows" : [ {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name,但是需要与colModel一一对应 {"id" :"2", "cell" :["cell21", "cell22", "cell23"]}, ... ] }
repeatitems为false时:
... repeatitems: false, jsonReader : { root:"rows", page: "page", total: "total", records: "records" }, ...
json结构:
{ "page" : "xxx", "total" : "yyy", "records" : "zzz", "rows" : [ {"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"}, ... ] }
非常感谢大家能坚持阅读完本篇博客。
小编深知一篇博客不能完全介绍jqGrid的众多细节,所以会在今后的博客中不断介绍jqGrid的其他细节。
小编希望可以通过博客将自己在jqGrid使用时遇到的各种各样的问题和解决方案分享给广大读者朋友们,希望可以帮助大家快速学习jqGrid,避免在不必要的细节上浪费大量时间。
另外如果有读者朋友和小编一样对jqGrid十分偏爱,可以在评论区和小编一起讨论jqGrid的许许多多优缺点,并一起讨论相关解决方案。
***************************
非常感谢读者朋友们对小编的支持,小编非常开心可以和大家分享我的开发经验。
如果我的经验可以帮助到读者朋友们,是小编最大的动力和荣幸。
蒋继发
大连理工大学
2014-10-17 11:26:01
***************************
相关文章推荐
- jqGrid简单使用、json格式和jsonReader介绍
- jqGrid简单使用、json格式和jsonReader介绍
- dubbo学习过程、使用经验分享及实现原理简单介绍,dubbo经验分享
- Allway Sync--同步备份数据资料,简单介绍及使用经验分享
- Dubbo学习过程、使用经验分享及实现原理简单介绍
- Dubbo学习过程、使用经验分享及实现原理简单介绍
- Dubbo学习过程、使用经验分享及实现原理简单介绍
- jqgrid-parmNames和jsonReader的使用,以及json的返回格式
- 【Dubbo基础】dubbo学习过程、使用经验分享及实现原理简单介绍
- dubbo学习过程、使用经验分享及实现原理简单介绍
- Dubbo学习过程、使用经验分享及实现原理简单介绍
- jqgrid-parmNames和jsonReader的使用,以及json的返回格式(转)
- dubbo学习过程、使用经验分享及实现原理简单介绍
- dubbo学习过程、使用经验分享及实现原理简单介绍
- Dubbo学习过程、使用经验分享及实现原理简单介绍
- dubbo学习过程、使用经验分享及实现原理简单介绍
- dubbo学习过程、使用经验分享及实现原理简单介绍
- dubbo学习过程、使用经验分享及实现原理简单介绍
- 使用经验分享及实现原理简单介绍,dubbo经验分享
- jqgrid-parmNames和jsonReader的使用,以及json的返回格式