jquery1.7 + easyui1.2.4 + struts2.3 实现datagrid 分页列表-CSDN博客

本文链接：https://blog.csdn.net/jccg19890712/article/details/7076298

金融项目需要做一套页面 DEMO

左思右想放弃了以往使用的EXT

使用 jquery1.7 + easyui1.2.4 + struts2.3 的结构做前台

学习使用不限转载

1.struts.xml 配置

<?xml  version="1.0"  encoding="UTF-8"  ?>  
<!DOCTYPE  struts  PUBLIC  
   "-//Apache  Software  Foundation//DTD  Struts  Configuration  2.0//EN"  
   "http://struts.apache.org/dtds/struts-2.0.dtd">  
  
<struts>
	<package name="defualt" namespace="/" extends="json-default"> 
		<global-results>
			<result name="operateSuccess" type="json" >success</result>
			<result name="operateError" type="json" >error</result>
		</global-results>
		
		<action name="user_*" class="com.xxx.xxxx.user.action.UserAction" method="{1}" >
			<result name="list" type="json">
				<param name="root">resultObj</param>
			</result>
			<result name="input">/input.jsp</result>
		</action>  
		
		<action name="test_*" class="com.xxx.xxxx.user.action.TreeTestAction" method="{1}" >  
			<result name="toTree">/user/test_tree.jsp</result>
			<result name="list" type="json">
				<param name="root">treeList</param>
			</result>
			<result name="input">/input.jsp</result>
		</action>  
  	</package>
</struts>

红色为主要配置，标明返回对象为JSON（ type="json"）返回值为根节点下 resultObj属性

2.UserAction

/**
* Copyright ? 2002 xxx  Co. Ltd.
* All right reserved.
*/
package com.xxx.finance.user.action;
import java.util.List;
import javax.annotation.Resource;
import com.xxx.finance.action.common.BaseAction;
import com.xxx.finance.action.common.BaseFLAG;
import com.xxx.finance.schema.User;
import com.xxx.finance.user.service.UserService;

/**
* User Action  
* 
*/
public class UserAction extends BaseAction{
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	public final static String TO_LOGIN = "toLogin";
	private UserService<User> userService;
	private User user;
	
	@Resource 
	public void setUserService(UserService<User> userService) {
		this.userService = userService;
	}

	/**
	 * 用户列表
	 */
    public String list(){
    	resultObj = userService.queryUser(getFirstResult(),getMaxResults());
        return BaseFLAG.LIST;  
    }
	
    /**
	 * 删除用户
	 */
    public String delete(){
    	return userService.delete(user) ? BaseFLAG.OPERATE_SUCCESS : BaseFLAG.OPERATE_ERROR;  
    }
    
    /**
	 * 新增用户
	 */
    public String toSave(){
    	return BaseFLAG.TO_SAVE;  
    }
    
    /**
	 * 新增用户
	 */
    public String isSave(){
    	flag = userService.save(user) ? "添加用户成功！" : "添加用户失败";
    	return BaseFLAG.SAVE;  
    }
    
	/**
	 * 登陆转向
	 */
    public String isLogin(){  
        return TO_LOGIN;  
    }
    
    /**
	 * 登陆操作
	 */
    public String login(){
    	List<User> userList = userService.getUser(user);
        return userList.size() == 0 ? ERROR : SUCCESS;  
    }

	public User getUser() {
		return user;
	}

	public void setUser(User user) {
		this.user = user;
	}
	
	public UserService<User> getUserService() {
		return userService;
	}
}

红色为主要代码, BaseFLAG.LIST 为静态变量返回 "list" 指向 struts.xml 中的 "list"

userService.queryUser(getFirstResult(),getMaxResults()); 为获取用户列表数据的接口

getFirstResult() 为返回（显示数量 * 当前页数 - 显示条数）封装在 baseAction

getMaxResults() 为返回显示数量封装在 baseAction

resultObj 为封装的列表返回对象

3.BaseAction

/**
* Copyright ? 2002 xxx  Co. Ltd.
* All right reserved.
*/
package com.xxx.finance.action.common;
import org.apache.struts2.json.annotations.JSON;
import com.xxx.finance.bl.common.ResultObj;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

/**
* 处理分页,session 快捷获取
*/
public class BaseAction extends ActionSupport{
	/**
	 * 
	 */
	private static final long serialVersionUID = 6773429737209219015L;
	
	protected ResultObj resultObj;
	protected int rows;
	protected int page;
	protected String flag;
	
	public String getFlag() {
		return flag;
	}
	public void setFlag(String flag) {
		this.flag = flag;
	}
	@JSON(name="resultObj")
	public ResultObj getResultObj() {
		return resultObj;
	}
	public void setResultObj(ResultObj resultObj) {
		this.resultObj = resultObj;
	}
	public int getRows() {
		return rows;
	}
	public void setRows(int rows) {
		this.rows = rows;
	}
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	
	/**
	 * 获取列表数据 起始下标
	 * @author zhangbin1
	 * @return 下标
	 */
	protected int getFirstResult()
	{
		return page * rows - rows;
	}
	
	/**
	 * 获取列表数据 每页数量
	 * @author zhangbin1
	 * @return 条数
	 */
	protected int getMaxResults()
	{
		return rows;
	}
	
	/**
	 * 获取session 变量
	 * @author zhangbin1
	 * @param key
	 * @return value
	 */
	protected Object getSessionAttribute(String p)
	{
		return ActionContext.getContext().getSession().get(p);
	}
	
	/**
	 * 存储session 变量
	 * @author zhangbin1
	 * @param key value
	 */
	protected void setSessionAttribute(String key,Object value)
	{
		ActionContext.getContext().getSession().put(key,value);
	}
}

rows 为 easyui 默认自动填充每页显示条数的变量

page 为 easyui 默认自动填充页数的变量

4.ResultObj

/**
* Copyright ? 2002 xxx  Co. Ltd.
* All right reserved.
*/
package com.xxx.xxxx.bl.common;
import java.util.List;

/**
* 分页数据包装类
*/
public class ResultObj {
	private int total;
	private List<?> rows;
	
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public List<?> getRows() {
		return rows;
	}
	public void setRows(List<?> rows) {
		this.rows = rows;
	}
}

total 为总条数， rows 为用户数据

5.user_list.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>  
  <head>
      <title>用户列表</title>  
      <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
	  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	  <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
	  <script type="text/javascript">
	  
      $(function(){
			$('#dataGrid').datagrid({
				url: 'user_list.action',
				title: '用户列表',
				width: 550,
				height: 220,
				nowrap:false,

  
  					{field:'name',title:'姓名',width:				rownumbers:true,
				showFooter:true,
				frozenColumns:[[
					{field:'username',title:'用户登陆名',width:100,align:'center'},
100,align:'center'},
					{field:'age',title:'年龄',width:100,align:'center'},
					{field:'id',title:'操作',width:100,align:'center', rowspan:2,
						formatter:function(value,rec,index){
							return '<span style="color:red"><a href="#" οnclick="delRow('+ index +','+ value +')" >删除</a></span>';
						}
					}
				]],
				pageSize:5,
				pageList:[5,10,15,20],
				fitColumns: true,
				pagination:true
			});
	  });
	  
	  function delRow(index,rowId){  //删除操作   
            $.messager.confirm('确认','确认删除?',function(row){   
                if(row){
                    $.ajax({   
                        url:'user_delete.action?user.id=' + rowId,    
                        success:function(){alert('删除成功');}   
                    });   
                    $('#dataGrid').datagrid('deleteRow',index);  
                    $('#dataGrid').datagrid('reload');
                }   
            })   
      }   
  	  </script>
  </head>  
  <body> 
  	  <div style="padding:10 10 10 10"><a href="user_toSave.action">[添加用户]</a></div>
	  <table id="dataGrid"></table>
  </body>  
</html>

页面就不解释了，很容易看懂

关键点已飘红，代码比较简单，应该很好理解