struts2 easyui插件pagination to DataGrid

原创

mb5fb94c9d4a0ba 2023-05-17 14:01:17 ©著作权

文章标签 struts datagrid stylesheet string user 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者mb5fb94c9d4a0ba的原创作品，请联系作者获取转载授权，否则将追究法律责任

测试通过struts2 jquery pagination to DataGrid实例。官网使用的是etmvc，很新，功能看的不错，但是真正开发中应该很少有人会愿意在自己的项目中去冒这个险吧，并不是说etmvc不好，只是大多数都会报有一种观望的态度来对待新事物。所以使用struts2配合easyui。

那首先要解决的就是struts2对json的支持，因为easyui对数据的操作绝大多数都是基于json的。使用jar包支持如下：

commons-logging-1.0.4.jar， freemarker-2.3.8.jar， ognl-2.6.11.jar， struts2-core-2.0.11.1.jar， xwork-2.0.4.jar， jsonplugin-0.32.jar， json-lib-2.1.jar， commons-beanutils-1.8.0.jar， commons-collections-3.2.1.jar， commons-lang-2.4.jar， ezmorph-1.0.6.jar。

记住这些jar都是必须的，一个也不能少哟！~~

( struts2.1.8不认jsonplugin插件把 jsonplugin-0.32.jar，改为自带的 struts2-json-plugin-2.1.8.1.jar )

然后我们就开始看代码吧。

首先是User.java,这是一个pojo。不用多说了：

package vo;

 public class User {
     private int id;
     private String username;
     private String password;
     //此处getter & setter 省略    ......
 }

然后是PageAction.java，由于只是个demo，急于测试出结果，所以并没有连接数据库，都是在Action中模拟的数据。

package action;

 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;

 import org.apache.struts2.ServletActionContext;

 import vo.User;

 import net.sf.json.JSONObject;

 import com.opensymphony.xwork2.ActionSupport;
 /**
  * <p>
  * UPDATE: mys(牟玉石)
  * <p>
  * DATE:  2010-5-3 下午03:59:53
  * <p>
  * HISTORY: 1.0
  *  
  * @version 1.0
  * @author mys(牟玉石)
  * @since java jdk1.6.0_06<br>
  * @beanid <br>
  *
  * 功能描述:<br>
  */
 public class PageAction extends ActionSupport {

     /**
      * @author 牟玉石 at 2010-5-3 下午03:01:35
      */
     private static final long serialVersionUID = 7263568517757245698L;
     private JSONObject result;

     @Override
     public String execute() throws Exception {

         int rows = Integer.parseInt((String) ServletActionContext.getRequest()
                 .getParameter("rows"));
          
         int page = Integer.parseInt((String) ServletActionContext.getRequest()
                 .getParameter("page"));

         List<User> list = new ArrayList<User>();

         User user = null;
         for (int i = (page-1)*rows; i < rows; i++) {
             user = new User();

             user.setId(i);
             user.setUsername("mys" + i);
             user.setPassword("password" + i);

             list.add(user);
         }

         Map<String, Object> jsonMap = new HashMap<String, Object>();
         //ui需要显示数据的总页数        jsonMap.put("total", list.size());
        //ui需要实现数据的总记录数
         jsonMap.put("rows", list);

         result = JSONObject.fromObject(jsonMap);

         return SUCCESS;
     }

     public JSONObject getResult() {
         return result;
     }

     public void setResult(JSONObject result) {
         this.result = result;
     }

 }
接着就是配置文件struts.xml：
 <struts>
     <package name="page" namespace="/" extends="json-default">         
         <action name="page" class="action.PageAction">
             <result type="json">
                 <param name="root">result</param>
             </result>
         </action>
     </package>
 </struts>
最后就是前台的page.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
     <link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css">
     <link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
     <script type="text/javascript" src="easyui/jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
     <script type="text/javascript">
     $(function(){
         $('#tt').datagrid({
             title:'Load Data',
             iconCls:'icon-save',
             width:600,
             height:250,
             url:'page.action',
             columns:[[
                 {field:'id',title:'id',width:80},
                 {field:'username',title:'username',width:80},
                 {field:'password',title:'password',width:80,align:'right'}
             ]],
             pagination:true
         });
     });
     </script>
 </head>
 <body>
     <table id="tt"></table>
 </body>
 </html> 
 
 
 
<script>
 //<table id="tt"></table>
 //列表显示
 $('#tt').datagrid({
   title:'表头列表',
   iconCls:'icon-ok',
 //  width:600,
 //  height:250,
   url:'${pageContext.request.contextPath}/json/PageAction',
   pageSize:5,
   pageList:[10,20,30,40,50,60,70,80,100,120,150,200,250,300],
   nowrap:false,
   striped:true,
   collapsible:true,
   loadMsg:'数据装载中...',
   sortName:'code',
   sortOrder:'desc',
   removeSort:false,
   fronzenColumns:[[{field:'ck',checkbox:true}]],
   columns:[[
             {field:'id',title:'id',width:80},
             {field:'username',title:'username',width:80},
             {field:'password',title:'password',width:80,align:'right'}
         ]],
   pagination:true,
   rownumbers:true
 });

 $('#tt').datagrid('getPager').pagination({
     displayMsg:'当前显示第 {from} 条到第 {to} 条记录，共有 {total} 条记录',
     showPageList:true,
     beforePageText:'当前第',
     afterPageText:'页，本页共 {pages}条记录',
     //total:300,
     //pageSize:10,
     //pageList:[10,20,30,40,50,60,70,80,100,120,150,200,250,300],
     onSelectPage:function(pageNumber, pageSize){
         $(this).pagination('loading');
         alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
         $(this).pagination('loaded');
     }
 });
 </script>