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代码:

  1. <table id="list" class="scroll" width="100%"></table>
  2. <div id="paging" class="scroll" style="text-align: center;"></div>

Table是这个插件使用的原始HTML的table,div来用于显示分页。Id值是自定义的,这个只要和js代码中的相关配置一致即可,都没什么说的,class是这个组件css中的样式 
JS代码:

  1. <script type="text/javascript">
  2. var lastsel;
  3. jQuery("#list").jqGrid({
  4. url:'${base}/manage/user/userlist.action',
  5. datatype: 'json',
  6. autowidth:true,
  7. height:220,
  8. rownumbers: true,
  9. colNames:['用户ID','登录名','真实名','性别','生日'],
  10. colModel:[
  11. {name:'userId',index:'userId', width:55,align:'center'},
  12. {name:'userName',index:'userName', width:55,align:'center',editable:true},
  13. {name:'realName',index:'realName', width:55,align:'center',editable:true},
  14. {name:'sex',index:'sex', width:55,align:'center',editable:true,edittype:"select",editoptions:{value:"男:男;女:女"}},
  15. {name:'birthday',index:'birthday', width:55,align:'center',editable:true,sorttype:"date"}
  16. ],
  17. rowNum:10,
  18. rowList:[10,20,30],
  19. imgpath: 'css3/images',
  20. pager: jQuery('#paging'),
  21. sortname: 'id',
  22. sortorder: "desc",
  23. multiselect: true,
  24. caption:"用户列表",
  25. onSelectRow: function(id){
  26. if(id && id!==lastsel){
  27. jQuery('#list').restoreRow(lastsel);
  28. jQuery('#list').editRow(id,true,pickdates);
  29. lastsel=id;
  30. }
  31. },
  32. editurl:" ${base}/manage/user/user!edit.action",
  33. }).navGrid("#paging",{edit:false,add:true,del:true});
  34. function pickdates(id){
  35. jQuery("#"+id+"_birthday","#list").datepicker({dateFormat:"yy-mm-dd"});
  36. }
  37. </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函数就是做日期选择用的了。 
下面是后台代码说明:

  1. /**
  2. * 显示用户列表,封装为JsonView类型,前端使用jqGrid插件。设置的变量名都不得更改
  3. * 集合类均使用泛型
  4. * @author Sarin
  5. */
  6. public String userlist() {
  7. //准备jqGrid分页参数
  8. int total_pages = 0;
  9. int limit = Integer.parseInt(rows);
  10. int t_page = Integer.parseInt(page);
  11. if (sidx == null) {
  12. sidx = "userId";
  13. }
  14. //查询需要分页数据的总记录数
  15. int count = Integer.parseInt(getServMgr().getUserService().getUsersCount());
  16. //计算分页参数
  17. if (count > 0) {
  18. total_pages = (int) Math.ceil(count / limit) + 1;
  19. }
  20. if (t_page > total_pages) {
  21. t_page = total_pages;
  22. }
  23. int start = limit * t_page - limit;
  24. //获取记录列表
  25. List users = getServMgr().getUserService().getAllUsers(sidx + " " + sord, start, limit);
  26. List<Map> rows = new ArrayList<Map>();
  27. for (int i = 0; i < users.size(); i++) {
  28. Map<String, Object> map = new HashMap<String, Object>();
  29. //封装jqGrid可识别的数据格式
  30. Object[] cell = new Object[] { ((Map) users.get(i)).get("USERID"), ((Map) users.get(i)).get("USERNAME"),
  31. ((Map) users.get(i)).get("REALNAME"), ((Map) users.get(i)).get("SEX"),
  32. ((Map) users.get(i)).get("BIRTHDAY") };
  33. map.put("id", ((Map) users.get(i)).get("USERID"));//设置更新时的更新依据,一般为主键
  34. map.put("cell", cell);
  35. rows.add(map);
  36. }
  37. //构建Json类型的数据,参数名不可为其他的
  38. JSONObject result = new JSONObject();
  39. result.put("total", total_pages);
  40. result.put("records", count);
  41. result.put("page", t_page);
  42. result.put("rows", rows);
  43. //封装成jsonView向客户端输出
  44. jsonView = new JsonView(result);
  45. return "userlist";
  46. }

Struts2的配置

  1. <result-types>
  2. <result-type name="jsonView" class="***.***.util.json.JsonResult" />
  3. </result-types>
  4. <action name="userlist" class="***.***.action.UserAction" method="userlist">
  5. <result name="userlist" type="jsonView">
  6. <param name="jsonObjName">jsonView</param>
  7. </result>
  8. </action>

JsonResult源码

  1. package ***.***.util.json;
  2. import java.io.PrintWriter;
  3. import javax.servlet.http.HttpServletResponse;
  4. import org.apache.struts2.dispatcher.StrutsResultSupport;
  5. import com.opensymphony.xwork2.ActionInvocation;
  6. public class JsonResult extends StrutsResultSupport {
  7. private String contentTypeName;
  8. private String jsonObjName = "";
  9. public void setContentTypeName(String contentTypeName) {
  10. this.contentTypeName = contentTypeName;
  11. }
  12. public void setJsonObjName(String jsonObjName) {
  13. this.jsonObjName = jsonObjName;
  14. }
  15. @Override
  16. protected void doExecute(String finalLocation, ActionInvocation invocation) throws Exception {
  17. HttpServletResponse response = (HttpServletResponse) invocation.getInvocationContext().get(HTTP_RESPONSE);
  18. String contentType = conditionalParse(contentTypeName, invocation);
  19. if (contentType == null) {
  20. contentType = "text/json;charset=UTF-8";
  21. }
  22. response.setContentType(contentType);
  23. PrintWriter out = response.getWriter();
  24. JsonView result = (JsonView) invocation.getStack().findValue(jsonObjName);
  25. out.println(result);
  26. out.flush();
  27. out.close();
  28. }
  29. }

效果图: 

增强型表格/报表-jqGrid使用浅析的更多相关文章

  1. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  2. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. [原创]Devexpress XtraReports 系列 2 创建表格报表

    昨天发表了Devexpress XtraReports系列开篇,今天我们继续. 今天的主题是创建表格报表. 首先我们来看看最后实现的效果.Demo最后附上. 接下来开始讲解如何一步一步做出这个报表: ...

随机推荐

  1. (转)iOS Wow体验 - 第三章 - 用户体验的差异化策略

    本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第三章译文精选,其余章节将陆续放出.上一篇:Wow ...

  2. 用户控件(.ascx)与<ul><li>以及<a>布局之小结

    用户控件(.ascx)与<ul><li>以及<a>布局 小结 一.用户控件(.ascx) 1.aspx是浏览器直接访问的页面,而ascx是用户控件,一般是用来重用. ...

  3. .net网站开发(一):1.input表单元素

    其实,在半年前我对网站开发还是完全不感冒的,不是没认识,而是只认识到表面.我以为网站模型就那几样,新闻.论坛.博客啥的,仿个站出来有什么意思?但现在我是知道了,大多应用开发还是采用B/S架构的,包括服 ...

  4. FZU-1925+几何

    题意简单. 由于没有注意到椭圆不一定是在圆心..贡献无数的wa..... #include<stdio.h> #include<string.h> #include<al ...

  5. DotNet程序汉化过程--SnippetCompiler奇葩的字符串

    开篇前言 汉化的过程总会遇到各种各样的问题,让人抓狂,这一篇我就来讲解一下一个特殊的单词的汉化以及我的“艰辛历程”. 起因介绍 在SnippetCompiler有这么一个奇葩的字符串“查找>&g ...

  6. 未能加载文件或程序集 system.data.sqlite 完美解决

    错误提示如下图所示: 解决办法: 使用SQLITE 预编译的静态链接DLL 下载地址:http://pan.baidu.com/s/1kT5i8bP

  7. mac中遇到的mysql编码问题

    由于项目有需要支持表情包输入数据库,自己做了一下技术测试,修改了my.cnf的权限为777.结果就操蛋了.编码错误.... 直到我无意地输入mysql -h,提示我/etc/my.cnf被忽略的一段话 ...

  8. 1 Intellij IDEA 个人常用快捷方式

    个人常用快捷方式 alt+enter    万能键                                          inn if(xxx!=null) iter foreach ct ...

  9. POJ 1002 - 487-3279 STL

    先把不是标准格式的字符串变成标准格式再输出出现两次以上的标准串和出现的次数不然输出 "No duplicates." #include <iostream> #incl ...

  10. poj3090欧拉函数求和

    E - (例题)欧拉函数求和 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     ...