jqGrid+jsp 表格分页

  最近由于项目需求要用到jqGrid表格分页,网上看了一下确实是一个很漂亮也功能很全的插件,但是由于网上相关资料很少,文档都是英文,也只有PHP的例子,JSP的例子可以说是完全找不到,最后只得自己琢磨,再参考了下官网的示例,终于是初步弄明白了她的用法。在这里写一篇简单的教程,希望对与我有同样需求的人有所帮助,这是我第一次发贴,请大家多多指教~~ 

    首先,配置环境 
    我使用的是jqGrid-3.4.3版本,下载后目录结构如图 

 

    根据自己的目录结构,把js文件夹、jquery.jqGrid.js和jquery.js文件放到工程js目录下,themes\basic目录下的grid.css放到css目录下,themes\basic目录下的images目录放到image目录下,themes目录下其它文件暂时用不到。由于我们修改了目录结构,因此也要修改相关文件。 
    首先是grid.css文件,这里面要引用图片,可使用Eclipse查找替换功能将images全部替换成../image/images即可,还有jquery.jqGrid.js,将pathtojsfiles改为js/js/,因为jqGrid是通过jquery.jqGrid.js查找加载其它JS文件,所以要将它改为JS存放路径,而且在该文件modules的include参数可以设置加载指定文件(true为加载,false为不加载),如果只是简单表格,只要将前两个设置为true就够了。 
    接下来在页面中导入以下几个文件: 
   
Java代码   收藏代码
  1. <script type="text/javascript" src="js/jquery.js"></script>  
  2. <link rel="stylesheet" type="text/css" media="screen" href="css/grid.css" />   
  3. <script type="text/javascript" src="js/jquery.jqGrid.js"></script>   
  4.       


    然后我们来测试一下环境 
    页面中写入以下代码: 
Java代码   收藏代码
  1. <script type="text/javascript">  
  2. jQuery(document).ready(function(){  
  3.     jQuery("#list4").jqGrid({  
  4.         datatype: "local"//数据来源,本地数据  
  5.         height: 250,  
  6.         colNames:['编号','Date''Client''Amount','Tax','Total','Notes'],  
  7.         colModel:[  
  8.             {name:'id',index:'id', width:60, sorttype:"int"},  
  9.             {name:'invdate',index:'invdate', width:90, sorttype:"date"},  
  10.             {name:'name',index:'name', width:100},  
  11.             {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},  
  12.             {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},       
  13.             {name:'total',index:'total', width:80,align:"right",sorttype:"float"},        
  14.             {name:'note',index:'note', width:150, sortable:false}         
  15.         ],  
  16.         imgpath: 'image/images'//图片存放路径  
  17.         multiselect: false,  
  18.         caption: "jqGrid表格测试"  
  19.     });  
  20.   
  21.     var mydata = [  
  22.             {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},  
  23.             {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},  
  24.             {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},  
  25.             {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},  
  26.             {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},  
  27.             {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},  
  28.             {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},  
  29.             {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},  
  30.             {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}  
  31.             ];  
  32.     for(var i=0;i<=mydata.length;i++)  
  33.         jQuery("#list4").addRowData(i+1,mydata[i]);  
  34.           
  35. });  
  36. </script>  
  37. <body>  
  38.     <table id="list4" class="scroll" cellpadding="0" cellspacing="0"></table>  
  39. </body>  

    然后运行,如果显示以下页面,说明我们的环境就配置成功了 

 

    然后,由于我们要用到分页与后台进行交互,所以后台代码是必不可少的,我在项目中用的是Struts2+Spring+Hibernate,SSH环境的配置就略过不提,反正后台都是大同小异,而且为简化这个例子,也没有与数据库进行交互,以下是Action中的代码: 
Java代码   收藏代码
  1. public String jqgridTest(){  
  2.         HttpServletRequest request = ServletActionContext.getRequest();  
  3.         HttpServletResponse response = ServletActionContext.getResponse();  
  4.         String page = request.getParameter("page"); //取得当前页数  
  5.         String rows = request.getParameter("rows"); //取得每页显示行数  
  6.         int totalRecord = 80//总记录数(应根据数据库取得,在此只是模拟)  
  7.         int totalPage = totalRecord%Integer.parseInt(rows) == 0 ?   
  8.                 totalRecord/Integer.parseInt(rows) : totalRecord/Integer.parseInt(rows)+1//计算总页数  
  9.         try {  
  10.         int index = (Integer.parseInt(page)-1)*Integer.parseInt(rows); //开始记录数  
  11.         int pageSize = Integer.parseInt(rows);  
  12.                   //以下模拟构造JSON数据对象  
  13.         String json = "{total: "+totalPage+", page: "+page+", records: "+totalRecord+", rows: [";  
  14.         for (int i = index; i < pageSize + index && i<totalRecord; i++) {  
  15.             json += "{cell:['ID "+i+"','NAME "+i+"','PHONE "+i+"']}";  
  16.             if (i != pageSize + index - 1 && i != totalRecord - 1) {  
  17.                 json += ",";  
  18.             }  
  19.         }  
  20.         json += "]}";  
  21.         //System.out.println(json);  
  22.         response.getWriter().write(json); //将JSON数据返回页面  
  23.         } catch (Exception ex) {  
  24.         }  
  25.           
  26.         return null;  
  27.           
  28.     }  

    在后台只要将JSON格式数据返回就行,可以从数据库取得数据再构造成如上JSON格式就OK了 

    最后,再来修改页面代码 
Java代码   收藏代码
  1. <script type="text/javascript">  
  2. jQuery(document).ready(function(){  
  3.     jQuery("#myTab").jqGrid({  
  4.         datatype: "json"//将这里改为使用JSON数据  
  5.         url:'qxgl_jqgridTest.action'//这是Action的请求地址  
  6.         mtype: 'POST',  
  7.         height: 250,  
  8.         width: 400,  
  9.         colNames:['编号','姓名''电话'],  
  10.         colModel:[  
  11.             {name:'id',index:'id', width:60, sorttype:"int"},  
  12.             {name:'name',index:'name', width:90},  
  13.             {name:'phone',index:'phone', width:100}       
  14.         ],  
  15.         pager: 'pager'//分页工具栏  
  16.         imgpath: 'image/jqgrid'//图片路径  
  17.         rowNum:10//每页显示记录数  
  18.         viewrecords: true//是否显示行数  
  19.         rowList:[10,20,30], //可调整每页显示的记录数  
  20.         multiselect: false//是否支持多选  
  21.         caption: "jqGrid表格测试"  
  22.     });  
  23. });  
  24. </script>  
  25. <body>  
  26.     <table id="myTab" class="scroll" cellpadding="0" cellspacing="0"></table>  
  27.     <div id="pager" class="scroll"></div>  
  28. </body>  


    再次运行,将会得到以下效果 

 

    好了,我们的jqGrid表格分页就大功告成啦,本人是每一次接触jqGrid,写下了自己的理解,如果有哪些不对的地方也希望大家多多指教,呵呵  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.min.css"> <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script> <script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script> <script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/jquery.tablednd.js"></script> <script type="text/javascript" src="js/jquery.contextmenu.js"></script> <script type="text/javascript" src="js/ui.multiselect.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#list").jqGrid({ url:"happyEvent/jsonlist", datatype: "json", height: "auto", width:"auto", colNames:['id','时间', '用户名', '标题','内容'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'time',index:'time', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'title',index:'title', width:300, align:"left",sorttype:"float"}, {name:'content',index:'content', width:80, align:"left",sorttype:"float"} ], rowNum:2, rowList:[2,4,6], sortname: 'id', pager:"#pager", multiselect: true, caption: "喜事列表" }); $("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false}); }); </script> </head> <body> <table id="list"></table> <div id="pager"></div> </body>
package com; public class Pager { private int totalRows = 0; // 记录总数 private int totalPages = 0; // 总页数 private int pageSize = 10; // 每页显示数据条数,默认为10条记录 private int currentPage = 1; // 当前页数 private boolean hasPrevious = false; // 是否有上一页 private boolean hasNext = false; // 是否有下一页 public int getSearchFrom() { return (currentPage - 1) * pageSize; } public Pager() { } public void init(int totalRows) { this.totalRows = totalRows; this.totalPages = ((totalRows + pageSize) - 1) / pageSize; refresh(); // 刷新当前页面信息 } /** * * @return Returns the currentPage. * */ public int getCurrentPage() { return currentPage; } /** * * @param currentPage * current page * */ public void setCurrentPage(int currentPage) { this.currentPage = currentPage; refresh(); } /** * * @return Returns the pageSize. * */ public int getPageSize() { return pageSize; } /** * * @param pageSize * The pageSize to set. * */ public void setPageSize(int pageSize) { this.pageSize = pageSize; refresh(); } /** * * @return Returns the totalPages. * */ public int getTotalPages() { return totalPages; } /** * * @param totalPages * The totalPages to set. * */ public void setTotalPages(int totalPages) { this.totalPages = totalPages; refresh(); } /** * * @return Returns the totalRows. * */ public int getTotalRows() { return totalRows; } /** * * @param totalRows * The totalRows to set. * */ public void setTotalRows(int totalRows) { this.totalRows = totalRows; refresh(); } // 跳到第一页 public void first() { currentPage = 1; this.setHasPrevious(false); refresh(); } // 取得上一页(重新设定当前页面即可) public void previous() { if (currentPage > 1) { currentPage--; } refresh(); } // 取得下一页 public void next() { //System.out.println("next: totalPages: "
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值