Alex In Summer: JQuery插件--ingrid使用

本实例使用struts2进行演示 ingrid.js是一款ajax,可以用来实现页面数据展现
ingrid.js 及jquery 下载:
http://download284.mediafire.com/eh2zwxytoybg/iui78qsoche/ingrid.tar.gz

下载后在工程WebContent下新建JS文件夹,将下载的文件解压后放进去.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>

<!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>Insert title here</title>
</head>
<body>
<a href="<s:url action="getUserListForTable" namespace="/my"
>">Show Users</a>

</body>
</html>

userList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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>Insert title here</title>
<link rel="stylesheet" href="<s:url value='/css/ingrid.css' />"
type="text/css" media="screen" />
<script type="text/javascript" src="<s:url value="/js/jquery.js" />"></script>
<script type="text/javascript" src="<s:url value="/js/ingrid.js" />"></script>

<script type="text/javascript">
document.write(<s:property value="totalRow"/>);
$(document).ready(
function() {
var mygrid1=$("#table1").ingrid({
url: '<s:url action="getPageUserList" namespace="my"/>',
initialLoad: true,
paging: true,
rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],
pageNumber:1,
totalRecords:<s:property value="totalRow"/>,
recordsPerPage:<s:property value="size"/>,
height: 350

});

$('#getTotal').click(function(){
// the 'g' object is ingrid - call methods like so:
alert(mygrid1.g.p.getTotalRecords());
});

}
);
</script>

</head>
<body class="tundra">
<table id="table1">
<thead>
<tr>
<th>User ID</th>
<th>User Name</th>
<th>Password</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<s:iterator value="userList" status="user">
<tr>
<td><s:property value="id" /></td>
<td><s:property value="uName" /></td>
<td><s:property value="uPass" /></td>
<td><s:property value="birthday" /></td>
</tr>
</s:iterator>
</tbody>
</table>

<a href="#" id="getTotal">total rows</a>
</body>
</html>

table.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<table>
<tbody>
<s:iterator value="userList" status="user">
<tr>
<td><s:property value="id" /></td>
<td><s:property value="uName" /></td>
<td><s:property value="uPass" /></td>
<td><s:property value="birthday" /></td>
</tr>
</s:iterator>
</tbody>
</table>

下面看看 action

public class TableAction extends ActionSupport implements Action {

private List userList;
private int totalRow;
private int size = 20;
private int page = 1;

@SuppressWarnings("unchecked")
public String getUserListForTable() {
DBManager mgr = new DBManager();
int start = (page - 1) * size;
int end = start + size;
if (totalRow == 0) {
try {
mgr.openDB();
totalRow = mgr.getTotalRow();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}
try {
mgr.openDB();
userList = mgr.getUserInfoList(start, end);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return SUCCESS;

}

public String getPageUserList() {

int start = (page - 1) * size;
int end = start + size;

System.out.println(totalRow);
DBManager mgr = new DBManager();
try {
mgr.openDB();
userList = mgr.getUserInfoList(start, end);
mgr.closeDB();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return SUCCESS;

}

public List getUserList() {
return userList;
}

Get/Set .........

}
为了简单一点,userInfo就是普通的java类,包含几个基本数据类型,DBManager就是打开数据库取数据而已,主要方法如下:

查询从startRow到endRow之间的数据
List DBManager.getUserInfoList(int startRow, int endRow)
得到总行数
int DBManager .getTotalRow()

struts.xml 配置:
<action name="getUserListForTable" class="home.dly.TableAction" method="getUserListForTable">
<result name="success">/userList.jsp</result>
</action>
<action name="getPageUserList" class="home.dly.TableAction" method="getPageUserList">
<result name="success">/table.jsp</result>
</action>

在userList.jsp中的javascript
<script type="text/javascript">
document.write(<s:property value="totalRow"/>);
$(document).ready(
function() {
var mygrid1=$("#table1").ingrid({
url: '<s:url action="getPageUserList" namespace="my"/>', //这里指定再次请求数据时的URL,也就是Action.如翻页时
initialLoad: true,
paging: true, //是否分页,默认为true
rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],
pageNumber:1,
totalRecords:<s:property value="totalRow"/>, //数据的总行数.这个属性不是必须的,但是想要页面显示总页数就必须有了.
//必须有了.这里可以混合struts2的标签将anction中的数据取出.
recordsPerPage:<s:property value="size"/>, //每页大小,可以混合struts2的标签将anction中的数据取出,
height: 350

});

}
);
</script>

table.jsp则是专门用来显示数据的, 以后的每次翻页请求数据都会显示在table.jsp中,因为action中配置了是转向table.jsp的,而userList.jsp每次请求数据后会将table.jsp中的内容在取过来显示出来,好比 include一样.
最后注意一个小问题:
数据显示的页面userList.jsp的table需要<thead>部分,table.jsp不用,只要body就OK了!!!

标签： javascript

Alex In Summer

2008年8月18日星期一

JQuery插件--ingrid使用

0 条评论:

我的简介

先前的博文