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

最新推荐文章于 2018-12-12 09:49:27 发布

woisnong

最新推荐文章于 2018-12-12 09:49:27 发布

阅读量1.8k

点赞数 2

分类专栏： jquery+javascript struts2 web前端文章标签： datagrid struts jquery stylesheet string function

本文链接：https://blog.csdn.net/woisnong/article/details/7485396

版权

web前端同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

jquery+javascript

19 篇文章 0 订阅

订阅专栏

struts2

8 篇文章 0 订阅

订阅专栏

第一步：准备阶段。

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页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>test</title>	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
    
    	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="test.js"></script>
  </head>  
  <body>
    <table id="test"></table>
  </body>
</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，输出格式为：

{"rows":[{"isLeaf":0,"nodeAction":"","nodeID":1,"nodeIcon":"icon-sys","nodeText":"系统管理","parenetID":0},{"isLeaf":1,"nodeAction":"sys/entryM.html","nodeID":2,"nodeIcon":"icon-nav","nodeText":"栏目管理","parenetID":1}],"total":2}

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

//Service中代码
public JSONObject getFuncList(){
FunctionVo func = FactoryDAO.getFuncList(); //FuncitonVo 对应功能的各个属性的封装。可以根据json格式确定需要哪些属性。
JSONObject resultObj = JSONObject.fromObject(func);
}

//action 中
public class FuncAction extends ActionSupport{
private JSONObject resultObj = null;
//省去getter setter方法。
public String execute(){
}

public String getFunc(){
   this.setResultObj(FactoryService.getFuncInstance().getFuncList());  
   return SUCCESS;
}
 
}

FunctionVo这样写

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

/**
* 分页数据包装类
*/
public class FunctionVo {
	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 为用户数据

在action中

 
/**
* 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 为封装的列表返回对象

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="#" ο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>

注意：

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

2.result 中name 总是等于root，

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

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

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