增强型表格/报表-jqGrid使用浅析
jqGrid是一个基于Jquery的表格插件,官网地址:http://www.trirand.com/blog演示地址:http://www.trirand.com/jqgrid/jqgrid.html大家可以去下载开发包,使用这个插件又需要jquery-ui,所以这个组件也是必须的。
和众多juery插件一样,这款插件的后台代码也是PHP的,而实际项目中使用的Struts2,我不得不又一次翻译代码并集成到Struts2中,后台和js交互的数据类型是json,这就需要一个json处理类来负责数据格式的转换。
前端必须的css是:ui.jqgrid.css 在jqGrid中;jquery-ui.css 在jquery-ui中
必须的js是:jquery.js jquery.jqGrid.js grid.locale-cn.js 最后一个是中文资源文件,其实我是按照英文文件自己翻译过来的
若需要日期选择框,还需要ui.datepicker.css ui.datepicker.js
下面是代码说明:
HTML代码:
- <table id="list" class="scroll" width="100%"></table>
- <div id="paging" class="scroll" style="text-align: center;"></div>
Table是这个插件使用的原始HTML的table,div来用于显示分页。Id值是自定义的,这个只要和js代码中的相关配置一致即可,都没什么说的,class是这个组件css中的样式
JS代码:
- <script type="text/javascript">
- var lastsel;
- jQuery("#list").jqGrid({
- url:'${base}/manage/user/userlist.action',
- datatype: 'json',
- autowidth:true,
- height:220,
- rownumbers: true,
- colNames:['用户ID','登录名','真实名','性别','生日'],
- colModel:[
- {name:'userId',index:'userId', width:55,align:'center'},
- {name:'userName',index:'userName', width:55,align:'center',editable:true},
- {name:'realName',index:'realName', width:55,align:'center',editable:true},
- {name:'sex',index:'sex', width:55,align:'center',editable:true,edittype:"select",editoptions:{value:"男:男;女:女"}},
- {name:'birthday',index:'birthday', width:55,align:'center',editable:true,sorttype:"date"}
- ],
- rowNum:10,
- rowList:[10,20,30],
- imgpath: 'css3/images',
- pager: jQuery('#paging'),
- sortname: 'id',
- sortorder: "desc",
- multiselect: true,
- caption:"用户列表",
- onSelectRow: function(id){
- if(id && id!==lastsel){
- jQuery('#list').restoreRow(lastsel);
- jQuery('#list').editRow(id,true,pickdates);
- lastsel=id;
- }
- },
- editurl:" ${base}/manage/user/user!edit.action",
- }).navGrid("#paging",{edit:false,add:true,del:true});
- function pickdates(id){
- jQuery("#"+id+"_birthday","#list").datepicker({dateFormat:"yy-mm-dd"});
- }
- </script>
代码解释:
url是后台数据传送过来的地址,这里我用Struts2,没什么好说的了
datatype使用的是json,官方演示中还可以使用xml和js数组等,可以参考
autowidth按字面意思理解即可,列宽度自适应
hight就是控件的现实高度了
rownumbers指定是否给显示从1开始的编号
colNames是表头显示的内容了
colModel就是具体数据的显示了这里可以参考官方演示,非常详细
需要说明的是editable,该列是否可编辑 edittype指定可编辑的类型
RowNum指定每次显示的数据量
RowList是可选的现实数据量
Imgpath 还没琢磨明白具体的含义
Pager 就是分页了,上面指定过的div那层
sortname排序的依据列
sortorder 排序方式
multiselect 是否可以多选,用于批量删除
caption 表格的标题显示(这里的文字只能左对齐,我还没有找到居中的做法,还请高手赐教)
onSelectRow就是当选定一行时,执行什么操作,这里是选定时将表格变为input可编辑效果
editurl是做更新操作时的请求地址,那么在这个方法中区分是更新还是删除了
下面的js函数就是做日期选择用的了。
下面是后台代码说明:
- /**
- * 显示用户列表,封装为JsonView类型,前端使用jqGrid插件。设置的变量名都不得更改
- * 集合类均使用泛型
- * @author Sarin
- */
- public String userlist() {
- //准备jqGrid分页参数
- int total_pages = 0;
- int limit = Integer.parseInt(rows);
- int t_page = Integer.parseInt(page);
- if (sidx == null) {
- sidx = "userId";
- }
- //查询需要分页数据的总记录数
- int count = Integer.parseInt(getServMgr().getUserService().getUsersCount());
- //计算分页参数
- if (count > 0) {
- total_pages = (int) Math.ceil(count / limit) + 1;
- }
- if (t_page > total_pages) {
- t_page = total_pages;
- }
- int start = limit * t_page - limit;
- //获取记录列表
- List users = getServMgr().getUserService().getAllUsers(sidx + " " + sord, start, limit);
- List<Map> rows = new ArrayList<Map>();
- for (int i = 0; i < users.size(); i++) {
- Map<String, Object> map = new HashMap<String, Object>();
- //封装jqGrid可识别的数据格式
- Object[] cell = new Object[] { ((Map) users.get(i)).get("USERID"), ((Map) users.get(i)).get("USERNAME"),
- ((Map) users.get(i)).get("REALNAME"), ((Map) users.get(i)).get("SEX"),
- ((Map) users.get(i)).get("BIRTHDAY") };
- map.put("id", ((Map) users.get(i)).get("USERID"));//设置更新时的更新依据,一般为主键
- map.put("cell", cell);
- rows.add(map);
- }
- //构建Json类型的数据,参数名不可为其他的
- JSONObject result = new JSONObject();
- result.put("total", total_pages);
- result.put("records", count);
- result.put("page", t_page);
- result.put("rows", rows);
- //封装成jsonView向客户端输出
- jsonView = new JsonView(result);
- return "userlist";
- }
Struts2的配置
- <result-types>
- <result-type name="jsonView" class="***.***.util.json.JsonResult" />
- </result-types>
- <action name="userlist" class="***.***.action.UserAction" method="userlist">
- <result name="userlist" type="jsonView">
- <param name="jsonObjName">jsonView</param>
- </result>
- </action>
JsonResult源码
- package ***.***.util.json;
- import java.io.PrintWriter;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.struts2.dispatcher.StrutsResultSupport;
- import com.opensymphony.xwork2.ActionInvocation;
- public class JsonResult extends StrutsResultSupport {
- private String contentTypeName;
- private String jsonObjName = "";
- public void setContentTypeName(String contentTypeName) {
- this.contentTypeName = contentTypeName;
- }
- public void setJsonObjName(String jsonObjName) {
- this.jsonObjName = jsonObjName;
- }
- @Override
- protected void doExecute(String finalLocation, ActionInvocation invocation) throws Exception {
- HttpServletResponse response = (HttpServletResponse) invocation.getInvocationContext().get(HTTP_RESPONSE);
- String contentType = conditionalParse(contentTypeName, invocation);
- if (contentType == null) {
- contentType = "text/json;charset=UTF-8";
- }
- response.setContentType(contentType);
- PrintWriter out = response.getWriter();
- JsonView result = (JsonView) invocation.getStack().findValue(jsonObjName);
- out.println(result);
- out.flush();
- out.close();
- }
- }
效果图:
增强型表格/报表-jqGrid使用浅析的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- [原创]Devexpress XtraReports 系列 2 创建表格报表
昨天发表了Devexpress XtraReports系列开篇,今天我们继续. 今天的主题是创建表格报表. 首先我们来看看最后实现的效果.Demo最后附上. 接下来开始讲解如何一步一步做出这个报表: ...
随机推荐
- 响应式布局:Flexbox应用总结
距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
- getAttribute()与getParameter的区别
当两个Web组件之间为转发关系时,转发源会将要共享 request范围内的数据先用setAttribute将数据放入到HttpServletRequest对象中,然后转发目标通过 getParamet ...
- C#中public、private、protected、internal、protected internal (转载)
在C#语言中,共有五种访问修饰符:public.private.protected.internal.protected internal.作用范围如下表:访问修饰符 说明public 公有访问.不受 ...
- 再关于IE11
微软在上周刚刚发布了用于Windows 8.1上的首个Internet Explorer 11的预览版.我们已经确认Internet Explorer 11中的一些新特性,包括对WebGL的支持.预抓 ...
- LNMP优化
LNMP优化 LNMP优化从系统安全,系统资源占用率,及web服务并发负载这三个方面体现,并 且主要体现在web服务并发负载这一方面. 1:首先进行linux优化加固 Linux ...
- ios面试汇总
http://www.360doc.com/content/15/0707/01/26281448_483232245.shtml
- objective-C nil,Nil,NULL 和NSNull的小结
nil用来给对象赋值(Object-C的任何对象都属于id类型),NULL则给任何指针赋值,NULL和nil不能互换,nil用于类指针赋值(在Object-C中类是一个对象,是类的meta-class ...
- PDO LIMIT bug
PDO存在一个LIMIT BUG(mysql) 需要指定数据类型,而且limit后面跟的2个参数必须是数值类型,不然的话获取不到数据 例1: $dsn = "mysql:host=127.0 ...
- CSS凹型导航按钮
一般需求,圆角看起来更加舒服,但是下面直角略显生硬 于是设计师有了下面的需求,下面加上小凹型: 凹型?凹型?凹型?有点变态,这怎么实现........... 图片肯定是最先考虑到的,CSS实现有貌似有 ...
- Java中构造方法的执行顺序
一.先执行内部静态对象的构造方法,如果有多个按定义的先后顺序执行:静态对象在构造的时候也是也先执行其内部的静态对象. 二.再调用父类的构造方法(父类还有父类的话,从最开始的基类开始调用),如果没有明显 ...