jquery1.7.2 + easyui1.2.6 + struts2 实现datagrid 显示数据及分页

tudusi

浏览: 1045815 次

最近访客更多访客>>

qq852014098

ja_1991

u012363178

my_xinwen

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1771)

社区版块

存档分类

2012-05 ( 47)
2012-04 ( 167)
2012-03 ( 41)
更多存档...

第一步：准备阶段。

1.JQuery EasyUI 1.2.6

2.Jquery 1.7.2

官网下

easyui - datagrid 官网文档http://www.jeasyui.com/documentation/datagrid.php

jar包

EZMorph是一个简单的java类库用于将一种对象转换成另外一种对象。EZMorph原先是Json-lib项目中的转换器。EZMorph支持原始数据类型（Primitive），对象（Object），多维护数组转换与DynaBeans的转换。兼容JDK1.3.1，整个类库大小只有76K左右。

　　在Java EE开发常用的struts2中，json的处理便使用了EZMorph库。

struts配置

html页面

$(function(){	
			$('#test').datagrid({
				 title:'My Title',//表格标题
				 iconCls:'icon-save',//表格图标
				 nowrap: false,//是否只显示一行，即文本过多是否省略部分。
				 striped: true,
				 url:'funcAction_getFunc.action', //action地址
				sortName: 'parentID',
				sortOrder: 'desc',
				idField:'nodeID',
				frozenColumns:[[
				]],
				columns:[[
					{field:'nodeIcon',title:'图标',width:150},
					{field:'parentID',title:'父节点编号',width:120},
					{field:'nodeID',title:'节点编号',width:120,sortable:true},
					{field:'isLeaf',title:'节点类型',width:120},
					{field:'nodeText',title:'节点名称',width:120},
					{field:'nodeAction',title:'连接程序',width:120},
					
				]],
				pagination:true, //包含分页
				rownumbers:true,
				singleSelect:true,
				toolbar:[{
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						alert('add')
					}
				},{
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						alert('cut')
					}
				},'-',{
					text:'Save',
					iconCls:'icon-save',
					handler:function(){
						alert('save')
					}
				}]
			});
			});

这样，在action中返回一个JSONObject，输出格式为：

所以在处理中需要这样来写

FunctionVo这样写

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

在action中

<p> </p>
<p>/**
* 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;</p>
<p>/**
* 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;
 }</p>
<p> /**
  * 用户列表
  */
    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;  
    }</p>
<p> public User getUser() {
  return user;
 }</p>
<p> public void setUser(User user) {
  this.user = user;
 }
 
 public UserService<User> getUserService() {
  return userService;
 }
}
</p>
<p>
 </p>

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

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

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

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

resultObj 为封装的列表返回对象

baseAction

package com;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

/**
* 处理分页,session 快捷获取
*/
public class BaseAction extends ActionSupport{
	/**
	 * 
	 */
	private static final long serialVersionUID = 6773429737209219015L;
	
	protected int rows;
	protected int page;
	protected String flag;
	
	public String getFlag() {
		return flag;
	}
	public void setFlag(String flag) {
		this.flag = flag;
	}
	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 默认自动填充页数的变量

人家写的html

<%@ 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">
	  
     <span style="color:#ff0000;"> </span>$(function(){
			$('#dataGrid').datagrid({
				url: 'user_list.action',
				title: '用户列表',
				width: 550,
				height: 220,
				nowrap:false,
<ol><li>					{field:'name',title:'姓名',width:</li></ol>				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="#" onclick="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>

注意：

1.extends 是json-default，表示返回json对象格式。

2.result 中name 总是等于root，

3.result包含的那个是设置的那个，action中设置了resultObj，因此这里写resultObj

这样简单的数据表格就出来了。

仅此为学习，有问题请留言。

分享到：

java.lang.ClassNotFoundException: net.sf ... | 趣味二分法

2012-04-21 22:17
浏览 987
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论