struts2 easyui插件pagination to DataGrid
2011-06-14 12:36
288 查看
测试通过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>
那首先要解决的就是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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- LayUI自定义分页插件，仿EasyUI的DataGrid
- jquery pagination分页插件使用详解（后台struts2）
- struts2将数据通过Json格式显示于EasyUI-datagrid数据表格
- easyui datagrid columns 如何取得json 内嵌对象（many-to-one POJO class）
- Struts2 + easyui的DataGrid 分页
- struts2+easyui datagrid可编辑操作及列表数据提交
- struts2 easyui实现datagrid的crud
- 解决EasyUI-Datagrid和LinqToEntity结合应用时排序问题
- jqery-easyui的Datagrid的介绍-Pagination事件
- struts2 easyui实现datagrid的crud
- jquery数字打分插件与嵌入到EasyUI datagrid中的示例
- EasyUI学习笔记7：MIS开发利器_ datagrid插件(中)
- EasyUI DataGrid和Pagination
- EasyUI中 datagrid 插件 使用自定义的icon图标
- Struts2获取easyUI datagrid 分页参数page和rows
- EasyUI DataGrid及Pagination
- easyUI之datagrid 及struts2如何配置
- easyui datagrid to excel
- EasyUI DataGrid及Pagination
- easyui datagrid plunges 扩展 插件