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

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

iteye_13633

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

阅读量152

点赞数

文章标签： java javascript json ViewUI

第一步：准备阶段。

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

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

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