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;    }@Overridepublic 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 分页用户集合 */@Overridepublic 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 用户总数量 */@Overridepublic 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()方法

@Overridepublic 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>

即可看到如下效果