SSH整合之利用JSTL自定义标签制作DWR分页功能

SSH整合之利用JSTL自定义标签制作DWR分页功能

 

现以管理用户为例

首先我们在前端页面编写代码:

 

<div style="padding: 10px;">
<table class="list">
<thead>
<tr>
<td>用户编号</td>
<td>用户名称</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
<td>地址</td>
<td>权限</td>
</tr>
</thead>
<tbody id="user_info">
</tbody>
<tr>
<td colspan="7" style="text-align: right"></td>
</tr>
</table>
</div>

 

 

 

 

然后在后端,编写一个分页工具类(Page.java)

 

类里定义两个变量,并生成get与set方法,以及有参无参构造方法和toString()方法

 

package com.supermarket.utils;

import java.util.ArrayList;
import java.util.List;

/**
* Created by Alex on 2017/4/20.
*/
public class Page {
//每页数量
private int SIZE;
private int ColunmCount;

public Page(int SIZE, int colunmCount) {
this.SIZE = SIZE;
ColunmCount = colunmCount;
}

public Page() {
}

public int getSIZE() {
return SIZE;
}

public void setSIZE(int SIZE) {
this.SIZE = SIZE;
}

public int getColunmCount() {
return ColunmCount;
}

public void setColunmCount(int colunmCount) {
ColunmCount = colunmCount;
}
@Override
public String toString() {
return "Page{" +
"SIZE=" + SIZE +
", ColunmCount=" + ColunmCount +
'}';
}

 

 

再编写一个获取分页信息的类

/**
* 获取分页信息
*
* @return 数组集合
*/
public List<int[]> getPages() {
List<int[]> list = new ArrayList<int[]>();
//循环次数
int times = ColunmCount / SIZE;
//取余数
int md = ColunmCount % SIZE;
//有余数
for (int i = 0; i < times; i++) {
int[] t = {i * SIZE, SIZE};
list.add(t);
}
if (md != 0) {
int[] t = {times * SIZE, md};
list.add(t);
}
return list;
}

可以看到,这个方法内我们定义了加载分页时,第一个加载的数据位置和往后加载的数量

 

然后我们去到interfaces包里面的UserService类里(持久层服务接口类)

定义两个新方法

public List<User> getUserPage(Integer startP,Integer count);

public Long getUserCount();

一个为获取分页后用户数据的方法

另外一个为获取用户总数的方法

 

 

 

详情看services包里的UserServiceImpl类

 

/**
* 用户数据分页方法
* @param startP 开始位置
* @param count  数量
* @return 分页用户集合
*/
@Override
public List<User> getUserPage(Integer startP, Integer count) {
Session session = getSession();
Query query = session.createQuery("from User");
query.setFirstResult(startP);
query.setMaxResults(count);
List<User> list = (List<User>) query.list();
return list;
}

/**
* 查询用户总数量的方法
* @return 用户总数量
*/
@Override
public Long getUserCount() {
Session session = getSession();
SQLQuery query = session.createSQLQuery("SELECT COUNT(*) from USERS ");
Long count = Long.parseLong(query.uniqueResult().toString());
return count;
}

在getUserPage方法内,我们使用hibernate内置的方法来进行分页

即: setFirstResult (填入需要加载的第一个值)

   SetMaxResult(填入加载的数量)

输出,即可获得分页后的用户对象数据

 

 

 

 

然后我们来到dwrsupport类下(dwr支持类)

在UserSupport类下

我们定义一个新的方法

/**
* 获取每页的用户对象
* @param start 开始位置
* @param count 加载数量
* @return 用户对象
*/
public List<User> QueryUserPages(Integer start,Integer count){
List<User> list = service.getUserPage(start,count);
return list;
}

该方法写完后,我们去到spring配置dwr的文件内,将该方法添加进去

<dwr:remote javascript="OxalisService">
<!--允许执行的方法-->
<dwr:include method="getOxalisByPage" />
</dwr:remote>

 

 

然后我们创建一个自定义标签类包,在里面创建一个UserTagSupport类

该类继承SimpleTagSupport类(需要JSTL类库支持)

在该类里我们先定义一个变量以及一个类,并生成get和set方法

 

package com.supermarket.customtagsupport;

import com.supermarket.interfaces.UserService;
import com.supermarket.utils.Page;
import org.springframework.web.context.ContextLoader;
import org.springframework.web.context.WebApplicationContext;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.SimpleTagSupport;
import java.io.IOException;
import java.util.List;

/**
* Created by Alex on 2017/6/13.
*/
public class UserPageSupport extends SimpleTagSupport {
private Integer size;
private Page page;    public Integer getSize() {
return size;
}

public void setSize(Integer size) {
this.size = size;
}

public Page getPage() {
return page;
}

public void setPage(Page page) {
this.page = page;
}
}

 

 

 

然后我们重写SimpleTagSupport的doTag()方法

@Override
public void doTag() throws JspException, IOException {
WebApplicationContext  webApplicationContext = ContextLoader.getCurrentWebApplicationContext();
UserService userService = (UserService)webApplicationContext.getBean("userService");
page = new Page(size,userService.getUserCount().intValue());
List<int[]> pageInt = page.getPages();
JspWriter out = getJspContext().getOut();
StringBuilder sb = new StringBuilder();
for(int i = 0;i < pageInt.size();i++){
int[] temp = pageInt.get(i);
sb.append("<a href=\"javascript:loadUsers(" + temp[0] + "," + temp[1] + ")\">");
sb.append("第" + (i + 1) + "页");
sb.append("</a>    ");
}
out.println(sb.toString());
}

可以看到,我们使用WebapplicationContext拿到spring的beanFactory

然后再实例化UserService(持久层操作接口类)来获取服务支持

而不是使用spring-bean注入的方式来获取,因为此类位于最底层,在Spring服务的管辖范围之外

所以只能这样来获取

在获取了服务后,将page对象new出来,并将size属性和使用userService(持久层)查询出来的用户总数传入page对象的有参构造方法内

定义一个泛型为int类型的数组的List集合pageInt,
调用page类里的getPages()方法赋值

定义输出的JspWriter,定义一个StringBuilder(后面要使用字符串拼接)

然后循环输出pageInt集合,在循环内部定义一个局部变量 类型为int数组,

然后向StringBuilder内添加要在前端页面显示的HTML标签,并在内部初始定义一个js方法(dwr)方法传两个函数,一个为开始位置,一个为加载数量

然后调用之前out.println(Sb.toString())输出至页面

 

 

 

 

然后我们来到前端,在WEN-INF文件夹内创建一个tld文件
在此文件内编写自定义标签的各属性和uri

<?xml version="1.0" encoding="ISO-8859-1"?>

<taglib xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" version="2.1">

<tlib-version>1.0</tlib-version>
<short-name>myshortname</short-name>
<uri>http://Alex_Project.org/tag</uri>
<!-- Invoke 'Generate' action to add tags or functions -->
<tag>
<name>UsersPage</name>
<tag-class>com.supermarket.customtagsupport.UserPageSupport</tag-class>
<body-content>empty</body-content>
<attribute>
<name>size</name>
<required>true</required>
</attribute>
</tag>
</taglib>

 

 

 

 

然后我们来到JS文件内

定义一个方法,传两个参数,调用的方法名为刚才在Spring配置dwr的文件内添加的方法名,

//加载所有用户方法
function loadUsers(strat,max) {
//执行回调方法
UserService.QueryUserPages(strat,max,loadForContent);
}

 

 

再编写一个loadForContext的方法,将用户数据添加至前端的页面表格内

function loadForContent(data) {
//获取容器
var user_info_content = document.getElementById("user_info");
//清空原有数据
user_info_content.innerHTML = "";
for (var i in data) {
//创建tr
var _tr = document.createElement("tr");

//用户ID
var _td_userid = document.createElement("td");
_td_userid.innerHTML = data[i].userId;

//用户名
var _td_username = document.createElement("td");
_td_username.innerHTML = "<a href='javascript:show_User_detail(" + data[i].userId + ");'>" + data[i].userName + "</a>"

//性别
var _td_usersex = document.createElement("td");
var tempSex = "?";
if (data[i].userSex == 1) {
tempSex = "男";
} else {
tempSex = "女";
}
_td_usersex.innerHTML = tempSex;

//年龄
var _td_userage = document.createElement("td");
_td_userage.innerHTML = data[i].userYear;

//电话
var _td_userphone = document.createElement("td");
_td_userphone.innerHTML = data[i].userPhone;
//地址
var _td_useraddress = document.createElement("td");
_td_useraddress.innerHTML = data[i].userAddress;
//权限
var _td_userrank = document.createElement("td");
var tempRank = "?";
if (data[i].userRank == 0) {
tempRank = "经理管理员";
} else {
tempRank = "普通用户组";
}

_td_userrank.innerHTML = tempRank;

//组合
_tr.appendChild(_td_userid);
_tr.appendChild(_td_username);
_tr.appendChild(_td_usersex);
_tr.appendChild(_td_userage);
_tr.appendChild(_td_userphone);
_tr.appendChild(_td_useraddress);
_tr.appendChild(_td_userrank);
//添加到容器中
user_info_content.appendChild(_tr);
}
}

 

 

 

前端页面我们先将dwr的js文件导入

<%--DWR服务JS--%>
<script type='text/javascript' src='dwr/interface/UserService.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>

 

 

然后导入tld标签

<%@taglib prefix="page" uri="http://Alex_Project.org/tag" %>

 

 

在表格下方插入自定义的标签

<table class="list">
<thead>
<tr>
<td>用户编号</td>
<td>用户名称</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
<td>地址</td>
<td>权限</td>
</tr>
</thead>
<tbody id="user_info">
</tbody>
<tr>
<td colspan="7" style="text-align: right"> <page:UsersPage size="1" /></td>
</tr>
</table>

在页面初始化时调用loadUsers方法

<script>
$(document).ready(loadUsers(0,1));
</script>

即可看到如下效果