目录
1. SSM框架搭建
请参照：https://blog.csdn.net/chen_hao_181/article/details/98721689
2. EasyUI介绍与使用
easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
easyui官方网站：http://www.jeasyui.net/tutorial/
看上面的菜单也可以看出EasyUI很人性化，有demo可以参考，也有教程这些，使用起来很方便。
EasyUI下载地址：http://www.jeasyui.net/download/jquery.html
选择EasyUI demo，这里就是给我们的一些例子，往下面翻会有源代码
3. 分页实现
分页在我们的实际项目中也是非常常见的，数据过多显示在一张页面上的时候，会给用户带来不太好的体验，而分页这一功能对于新手来说还是有点难度。利用EasyUI可以很简单的解决这一难点。
首先我们选择数据表格
打开上次我们搭建好的SSM框架，将下载好的EasyUI导入到项目的webapp中，等待使用；
在webapp的jsp文件夹下创建一个show.html来显示数据，将web.xml中修改首页为/jsp/show.html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页显示数据</title>
<link rel="stylesheet" type="text/css" href="/SSM/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/SSM/easyui/themes/icon.css">
<script type="text/javascript" src="/SSM/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/SSM/easyui/jquery.easyui.min.js"></script>
<title>分页显示数据</title>
</head>
<body>
<table id="dg" title="学生信息" style="width:700px;"
data-options="rownumbers:false,singleSelect:true,pagination:true,url:'/SSM/stu/fenye',method:'get',toolbar:'#tb'">
<thead>
<tr>
<th data-options="field:'sid',width:80">学 号</th>
<th data-options="field:'sname',width:100">姓 名</th>
<th data-options="field:'password',width:80,align:'right'">密 码</th>
<th data-options="field:'score',width:80,align:'right'">成 绩</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-search',
handler:function(){
alert('search');
}
},{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
}]
});
})
</script>
</body>
</html>完善分页查询的接口，在pom.xml文件中添加依赖
<!-- json数据传输 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.6.0</version>
</dependency>
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>打开mybatis的配置文件spring-mybatis.xml修改为以下类容
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!-- 当我们写完一个接口对应的xml的时候 需要在主配置文件中 配置一下 整合Spring以后就不用写mapper了 -->
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 设置数据库类型 oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库 -->
<property name="dialect" value="mysql" />
</plugin>
</plugins>
</configuration>完成接口，在controller、service中完善分页查询接口
controller层
package com.chtw.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
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.chtw.pojo.Student;
import com.chtw.service.StuService;
import com.github.pagehelper.PageInfo;
@Controller
@RequestMapping("/stu")
public class StuController {
//自动注入StuService
@Autowired
private StuService stuService;
@RequestMapping("/getAll")
public String getAll(Model model) {
List<Student> sList = stuService.getAll();
model.addAttribute("sList", sList);
return "index";
}
/**
* 分页查询
* @param page
* @param rows
* @return
*/
@RequestMapping("/fenye")
@ResponseBody
public Map<String,Object> getFenye(@RequestParam(defaultValue="1",required=false) int page, int rows){
PageInfo<Student> info = stuService.getFenye(page, rows);
if(info!=null) {
Map<String,Object> maps = new HashMap<String, Object>();
maps.put("total", info.getTotal());
maps.put("rows", info.getList());
return maps;
}
return null;
}
}
Service层
package com.chtw.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.chtw.dao.StuDAO;
import com.chtw.pojo.Student;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
@Service
public class StuService {
//自动注入StuDAO
@Autowired
private StuDAO stuDAO;
public List<Student> getAll(){
return stuDAO.getAll();
}
/**
* 分页查询
* @param nowpage
* @param size
* @return
*/
public PageInfo<Student> getFenye(int page, int size) {
PageHelper.startPage(page, size);
List<Student> sList = stuDAO.getAll();
PageInfo<Student> info = new PageInfo<Student>(sList);
return info;
}
}
启动服务器
在数据库中添加几条数据
INSERT INTO `student` VALUES ('1007', 'Alice', '123258', '98');
INSERT INTO `student` VALUES ('1008', 'Bob', '852132', '89');
INSERT INTO `student` VALUES ('1009', 'Clover', '5565656', '87');
INSERT INTO `student` VALUES ('1010', 'Glover', '56854656', '60');
INSERT INTO `student` VALUES ('1012', 'God', '1235', '70');
INSERT INTO `student` VALUES ('1011', 'UFO', '123456', '99');
INSERT INTO `student` VALUES ('1013', 'Alice', '123258', '98');
INSERT INTO `student` VALUES ('1014', 'Bob', '852132', '89');
INSERT INTO `student` VALUES ('1015', 'Clover', '5565656', '87');
INSERT INTO `student` VALUES ('1016', 'Glover', '56854656', '60');
INSERT INTO `student` VALUES ('1017', 'God', '1235', '70');
INSERT INTO `student` VALUES ('1018', 'UFO', '123456', '99');
INSERT INTO `student` VALUES ('1019', 'Alice', '123258', '98');
INSERT INTO `student` VALUES ('1020', 'Bob', '852132', '89');
INSERT INTO `student` VALUES ('1021', 'Clover', '5565656', '87');
INSERT INTO `student` VALUES ('1022', 'Glover', '56854656', '60');
INSERT INTO `student` VALUES ('1023', 'God', '1235', '70');
INSERT INTO `student` VALUES ('1024', 'UFO', '123456', '99');
本人联系方式2329095893,欢迎各位进行学习讨论
欢迎关注熊熊出没ING公众号，不定时跟新Java、python、信息安全等相关知识哦。
扫一扫
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
