StudentSystem学生管理系统_V1(五)

测试程序

分页功能说明:

回顾【util】包下 Page 工具类:

public class Page {

    int start; // 开始数据
    int count; // 每一页的数量
    int total; // 总共的数据量

    public Page(int start, int count){
        super();
        this.start = start;
        this.count = count;
    }

    public boolean isHasPreviouse(){
        if(start == 0){
            return false;
        }
        return true;
    }

    public boolean isHasNext(){
        if(start == getLast()){
            return false;
        }
        return true;
    }

    public int getTotalPage(){
        int totalPage;

        //假设总数50,是能够被5整除的,那么就有10页
        if(0 == total % count){
            totalPage = total / count;
        }else{
            //假设总数51,不能被5整除的,那么就有11页
            totalPage = total / count + 1;
        }

        if(0 == totalPage){
            totalPage = 1;
        }

        return totalPage;
    }

    public int getLast(){
        int last;
        //假设总数是50,能够被5整除的,那么最后一页的开始就是40
        if(0 == total % count){
            last = total - count;
        }else{
            //假设总数是51,不能够被5整除的,那么最后一个的开始就是50
            last = total - total % count;
        }

        last = last < 0 ? 0:last;
        return last;
    }
    //getter和setter
}

totalPage 是计算得来的数，用来表示页码一共的数量

在首页显示的 StudentList 用 page 的参数来获取：

List<Student> students = studentService.list(page.getStart(), page.getCount());

并且在映射文件中用 LIMIT 关键字：

<!-- 查询从start位置开始的count条数据-->
<select id="list" resultMap="student">
    SELECT * FROM student ORDER BY student_id desc limit #{param1}, #{param2}
</select>

第一个参数为 start，第二个参数为 count

这样就能根据分页的信息来获取到响应的数据

编写分页栏：

1.写好头和尾

 <nav style="text-align: center">
        <ul class="pagination">
          ....
        </ul>
 </nav>

2.写好 « ‹ 这两个功能按钮

使用 <c:if>标签来增加边界判断，如果没有前面的页码了则设置为disable状态

    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=0">
                <span>«</span>
            </a>
    </li>

    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=${page.start-page.count}">
                <span>‹</span>
            </a>
    </li>

再通过 JavaScrip 代码来完成禁用功能：

<script>
    $(function () {
        $("ul.pagination li.disabled a").click(function () {
            return false;
        });
    });
</script>

3.完成中间页码的编写
从 0 循环到 page.totalPage - 1 ，varStatus 相当于是循环变量

status.count 是从1开始遍历
status.index 是从0开始遍历
要求：显示当前页码的前两个和后两个就可，例如当前页码为3的时候，就显示 1 2 3(当前页) 4 5 的页码
理解测试条件：
-10 <= 当前页*每一页显示的数目 - 当前页开始的数据编号 <= 30

只要理解了这个判断条件，其他的就都好理解了

<c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">

    <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
        <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
            <a
                    href="?page.start=${status.index*page.count}"
                    <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
            >${status.count}</a>
        </li>
    </c:if>
</c:forEach>

4.在控制器中获取参数

// 获取分页参数
int start = 0;
int count = 10;

try {
    start = Integer.parseInt(request.getParameter("page.start"));
   // count = Integer.parseInt(request.getParameter("page.count"));
} catch (Exception e) {
}

....

// 共享 page 数据
request.setAttribute("page", page);

Date 转换的问题

假设，我们看到页面上显示的日期是这样的格式：

StudentSystem学生管理系统_V1(五)

这显然是我们不希望看到的

解决方案：在映射文件中设置日期显示的类型。

StudentSystem学生管理系统_V1(五)

重新部署文件，然后刷新页面，就能看到我们希望的效果啦：

StudentSystem学生管理系统_V1(五)

增加删除提示

第一个想到的就是删除提示，没有删除提示是很要命的一件事情，如果手滑了一下那可能就悲剧了....

首先我们在顶部的 <head> 标签中的 <script> 中增加一段代码：

function del() {
    var msg = "您真的确定要删除吗？\n\n请确认！";
    if (confirm(msg) == true) {
        return true;
    } else {
        return false;
    }
}

然后在删除 a 标签页中增加 onclick 属性：

<td><a href="/deleteStudent?id=${s.id}" onclick="javascript:return del();"><span class="glyphicon glyphicon-trash"></span> </a></td>

当我们刷新页面后，点击删除就会弹出提示信息：

StudentSystem学生管理系统_V1(五)

编辑页面自动勾选上性别

假设点击编辑按钮进入到编辑页面后，性别这个选项是空选的状态，这样很不友善

解决办法：在 editStudent 页面增加一些判断就好了：

<tr>
    <td>性别:</td>
    <td>
         <input type="radio" <c:if test="${student.sex == '男'}">checked</c:if> class="radio radio-inline" name="sex" value="男">男
         <input type="radio" <c:if test="${student.sex == '女'}">checked</c:if> class="radio radio-inline" name="sex" value="女">女
    </td>
</tr>

StudentSystem学生管理系统_V1(五)

空值判断

我们允许设置为 null 的值仅仅为出生日期，其他的值均不允许出现空值，所以我们需要加入空值判断：

<script>
        function checkEmpty(id, name) {
            var value = $("#" + id).val();
            if(value.length == 0){
                alert(name + "不能为空");
                $("#" + id).focus();
                return false;
            }
            return true;
        }

        $(function () {
            $("ul.pagination li.disabled a").click(function () {
                return false;
            });

            $("#addForm").submit(function () {
                if(!checkEmpty("student_id", "学号")){
                    return false;
                }
                if(!checkEmpty("name", "姓名")){
                    return false;
                }
                if(!checkEmpty("age", "年龄")){
                    return false;
                }
                return true;
            });
        });
    </script>

然后再为 form 创建一个 id 属性值为 “addForm” 并添加进判断空值的方法：

<form id="addForm" method="post" action="/addStudent" role="form">
      ......
</form>

注意：这里需要写在 $(function(){}) 里面，等待文档加载完毕才能生效。
这里并没有为 sex 属性判断空值，我们采用一个简单的为 sex 添加一个默认勾选项来省略空值的判断。

秒客网

StudentSystem学生管理系统_V1(五)

测试程序

分页功能说明:

Date 转换的问题

增加删除提示

编辑页面自动勾选上性别

空值判断

相关文章