您的位置：首页 > 编程语言 > Java开发

SpringMVC＋Spring＋MyBatis 的综合练习 14 （前端页面之部门列表）

2018-01-29 20:35 477 查看

由于上一篇最后谈及的，使用对象返回数据不利于移动端接收，所以在部门页面改用
json 字符串返回，这样只需要在前台页面解析 json 字符串即可。所以，部门页面的展示做了一些调整。逐个说明一下吧。

14.1 DAO 层

DepartmentMapper.java

package com.hh.ssm.dao;

import com.hh.ssm.bean.Department;
import com.hh.ssm.bean.DepartmentExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;

public interface DepartmentMapper {
long countByExample(DepartmentExample example);

int deleteByExample(DepartmentExample example);

int deleteByPrimaryKey(Integer departmentId);

int insert(Department record);

int insertSelective(Department record);

List<Department> selectByExample(DepartmentExample example);

Department selectByPrimaryKey(Integer departmentId);

List<Department> selectByExampleWithEmployees(DepartmentExample example);

Department selectByPrimaryKeyWithEmployees(Integer departmentId);

int updateByExampleSelective(@Param("record") Department record, @Param("example") DepartmentExample example);

int updateByExample(@Param("record") Department record, @Param("example") DepartmentExample example);

int updateByPrimaryKeySelective(Department record);

int updateByPrimaryKey(Department record);
}

14.2 Service 层

DepartmentService.java

package com.hh.ssm.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.hh.ssm.bean.Department;
import com.hh.ssm.dao.DepartmentMapper;

@Service
public class DepartmentService {

@Autowired
DepartmentMapper departmentMapper;

public List<Department> getAll() {
  	return departmentMapper.selectByExample(null);
}
}

14.3 Controller 层

DepartmentController.java

package com.hh.ssm.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hh.ssm.bean.Department;
import com.hh.ssm.bean.Employee;
import com.hh.ssm.bean.ResponseMessage;
import com.hh.ssm.service.DepartmentService;
import com.hh.ssm.service.EmployeeService;
/**
*
* @author HH
*
*/
@Controller
public class DepartmentController {

@Autowired
DepartmentService departmentService;

/**
* 需要导入Jackson包
* @param pageNum
* @return
*/
@RequestMapping("/departments")
@ResponseBody
public ResponseMessage getAllDepartmentsJson(@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
int pageSize = 3;
PageHelper.startPage(pageNum, pageSize);
List<Department> departments = departmentService.getAll();
int navigatePages = 5;
PageInfo pageInfo = new PageInfo(departments, navigatePages);

return ResponseMessage.success().add("pageInfo", pageInfo);
}

/**
* 查询员工数据（分页查询）
*
* @return
*/
//@RequestMapping("/departments")
public String getAllDepartments(
@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
Model model) {

// 引入PageHelper分页插件进行分页
// 每页的记录数
int pageSize = 8;

PageHelper.startPage(pageNum, pageSize);

List<Department> departments = departmentService.getAll();

int navigatePages = 5;

PageInfo pageInfo = new PageInfo(departments, navigatePages);

//System.out.println(pageInfo);

model.addAttribute("pageInfo", pageInfo);

return "departments";

}

}

14.4 View 层

Department.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入JSTL -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-->
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet"
href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<script
src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>部门列表</title>
</head>
<body>
<div class="container">
<h1 class="page-header">部门管理</h1>
<div class="row" id="title">
<h3 class="page-header col-md-10">部门列表</h3>
<button class="page-header col-sd-1 btn btn-info">
<span class="glyphicon glyphicon-plus"></span> 新增
</button>
<button class="page-header col-sd-1 btn btn-danger">
<span class="glyphicon glyphicon-trash"></span> 删除
</button>
</div>
<div class="row" id="tablediv">
<table class="table table-striped table-hover" id="departmentTable">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-7">部门名称</th>
<th class="col-md-1">创建时间</th>
<th class="col-md-1">更新时间</th>
<th class="col-md-2">操作</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
<div class="row" id="page">
<table class="table">
<tr id="pageline">
<td id="pageInformation" class="col-md-6"
style="vertical-align: middle;"></td>
<td id="pageNavigator" class="col-md-6" align="right"></td>
</tr>
</table>
</div>
</div>
<script>
// 1. 页面加载完成后，直接发送 ajax 请求, 显示首页
$(function() {
goto_PageNum(1);
});
//*********************************************
// 抽取页面切换的 ajax 请求方法，跳转到指定页码
function goto_PageNum(pn) {
$.ajax({
url : "${APP_PATH}/departments",
data : "pageNum=" + pn,
type : "GET",
success : function(result) {
//1. 解析并显示表格数据
buildDepartmentTable(result);
//2. 解析并显示分页信息
buildPageInfomation(result);
//3. 解析并显示分页导航条
buildPageNavigator(result);
}
});
}
// ****解析并显示表格数据****
// console.log(result);
/** Controller 传回的 json 字符串：result
{"responseCode":100,"responseMessage":"处理成功！",
"returnMap":{
"pageInfo":{"pageNum":1,"pageSize":3,"size":3,"startRow":1,"endRow":3,"total":7,"pages":3,
"list":[
{"departmentId":1,"departmentName":"董事会","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null},
{"departmentId":2,"departmentName":"总经办","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null},
{"departmentId":3,"departmentName":"市场部","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null}],
"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,
"hasPreviousPage":false,"hasNextPage":true,
"navigatePages":5,"navigatepageNums":[1,2,3],
"navigateFirstPage":1,"navigateLastPage":3,"firstPage":1,"lastPage":3}}}
*/
function buildDepartmentTable(result) {
$("#tableBody").empty();
var departments = result.returnMap.pageInfo.list;
$.each(departments, function(index, item) {
//alert(index + " : " + item.departmentName);
var departmentIdTd = $("<td></td>").addClass("col-md-1").append(
item.departmentId);
var departmentNameTd = $("<td></td>").addClass("col-md-7").append(
item.departmentName);
var gmtCreateTd = $("<td></td>").addClass("col-md-1").append(
getLocalTime(item.gmtCreate));
var gmtModifiedTd = $("<td></td>").addClass("col-md-1").append(
getLocalTime(item.gmtModified));
var editButton = $("<button></button>").addClass(
"btn btn-primary btn-xs").append(
$("<span></span>").addClass("glyphicon glyphicon-pencil")).append(
" 编辑");
var deleteButton = $("<button></button>").addClass(
"btn btn-danger btn-xs").append(
$("<span></span>").addClass("glyphicon glyphicon-trash")).append(
" 删除");
var operationTd = $("<td></td>").addClass("col-md-2")
.append(editButton).append(" ").append(deleteButton);
$("<tr></tr>").append(departmentIdTd).append(departmentNameTd).append(
gmtCreateTd).append(gmtModifiedTd).append(operationTd).appendTo(
"#tableBody");
// 如果最后一页显示的条数不够一页，补充空行,单纯这么补貌似不够啊。。。。。
var ps = result.returnMap.pageInfo.pageSize;
var s = result.returnMap.pageInfo.size;
if (s < ps) {
for (var i = 0; i < (ps - s); i++) {
var emptyTR = $("<tr></tr>");
for (var j = 0; j < 5; j++) {
emptyTR.append($("<td></td>"));
}
emptyTR.appendTo("#tableBody");
}
}
});
}
//******************************************
// 页码信息文字
function buildPageInfomation(result) {
//当前 第 页，共 页，共有 条记录。
$("#pageInformation").empty();
$("#pageInformation").append(
"当前 第 " + result.returnMap.pageInfo.pageNum + " 页，共 "
+ result.returnMap.pageInfo.pages + " 页，共有 "
+ result.returnMap.pageInfo.total + " 条记录");
}
//******************************************
/*
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" >«
</a>
</li>
<li><a href="#">1</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
*/
// 页码导航按钮
function buildPageNavigator(result) {
$("#pageNavigator").empty();
var ul = $("<ul></ul>").addClass("pagination");
var ps = result.returnMap.pageInfo.pageSize;
var pn = result.returnMap.pageInfo.pageNum;
// 创建 首页 按钮 并加入到 <ul></ul> 中
var firstPageLi = $("<li></li>").append($("<a></a>").append("首 页"));
ul.append(firstPageLi);
// 创建 上一页 按钮 并加入到 <ul></ul> 中
var previousPageLi = $("<li></li>").append($("<a></a>").append("上一页"));
ul.append(previousPageLi);
// 首页时 禁用 上一页 和 首页 按钮
if (result.returnMap.pageInfo.hasPreviousPage == false) {
firstPageLi.addClass("disabled");
previousPageLi.addClass("disabled");
} else {
firstPageLi.click(function() {
goto_PageNum(1);
});
previousPageLi.click(function() {
goto_PageNum(pn - 1);
});

}
// 创建 数字页码 按钮（index 是索引，item 是显示的页码数字） 并加入到 <ul></ul> 中
$.each(result.returnMap.pageInfo.navigatepageNums, function(index, item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
//高亮当前页码
if (result.returnMap.pageInfo.pageNum == item) {
numLi.addClass("active");
}
ul.append(numLi);
numLi.click(function() {
goto_PageNum(item);
});
});
// 创建 下一页 按钮 并加入到 <ul></ul> 中
var nextPageLi = $("<li></li>").append($("<a></a>").append("下一页"));
ul.append(nextPageLi);
// 创建 末页 按钮 并加入到 <ul></ul> 中
var lastPageLi = $("<li></li>").append($("<a></a>").append("末 页"));
ul.append(lastPageLi);
// 末页时 禁用 下一页 和 末页 按钮
if (result.returnMap.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
nextPageLi.click(function() {
goto_PageNum(pn + 1);
});
lastPageLi.click(function() {
goto_PageNum(result.returnMap.pageInfo.pages);
});
}
// 把 <ul></ul> 加入 到 <nav></nav> 中，再加入到 表格
//$("#pageNavigator").append($("<nav></nav>").append(ul));
$("<nav></nav>").append(ul).appendTo($("#pageNavigator"));
}

function getLocalTime(nS) {
return new Date(parseInt(nS)).toLocaleDateString();
}
</script>
</body>
</html>

14.5 总结：

页面最初加载后，发送 ajax 请求，取回第一页的内容
因为是列表显示，分页信息都会随着页码变化而变化，所以整个页面的动态部分都是通过解析 json 串和 json DOM拼接成的。如果是表单类（Tab类，每页显示一条记录）则只需要拼接页码信息和页码导航按钮组。
要想使用 json DOM解析，则必须引入 Jackson 依赖。

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.3</version>
</dependency>

解决了页码信息和页码导航按钮组的对齐问题。先定义新的 div，然后定义表格，两列，各占6个栅格，td 标签上下居中对齐，按钮组右对齐。
整个页面完成后的样子大概是这样的。

下一步应该是完善页面中的按钮功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航