MVC模式下的数据展示:EasyUI的datagrid
我的数据库设计是一张老师表teacher,一张学生表student,一个教师对应多个学生,在学生一方建立外键;
还有一点想清楚,需要展示的数据是根据什么来的,是成功登陆的用户的id?还是直接展示所有的学生?
student表
教师表:
我是习惯性的从后写到前,这里展示的是登录成功的老师下的学生信息
1 建立项目,建立好对应的包以及工具包
2建立好与数据库对应的实体类
package com.zr.model;
public class Student {
private int sid;
private String sname;
private String sage;
//自行get set
public Student() {
super();
}
public Student(int sid, String sname, String sage) {
super();
this.sid = sid;
this.sname = sname;
this.sage = sage;
} }
package com.zr.model;
public class Teacher {
private int tid;
private String tname;
private String tpsw;
//自行get set
public Teacher(String tname, String tpsw) {
super();
this.tname = tname;
this.tpsw = tpsw;
}
public Teacher(int tid, String tname, String tpsw) {
super();
this.tid = tid;
this.tname = tname;
this.tpsw = tpsw;
}
public Teacher() {
super();
}
}
3 StudentDao.java,因为使用的是easyUI,所以传入参数多了起始页码start和页面容量pageSize,这两个参数都是从页面的datagrid获取的,是datagrid自带的参数,方便后面的分页
package com.zr.dao;
import java.util.List;
import com.zr.model.Student;
public interface StudentDao {
/**
*
* @param tid
* @return 学生对象
* 根据老师id返回学生对象
*/
public List<Student> getStudentBytid(int tid,int start,int pageSize); /**
* 根据学生id删除学生
* @param s
* @return
*/
public boolean deleteStudentsBysid(String s[]);
/**
* 根据学生id更新学生信息
* @param student
* @return
*/
public boolean updateStudentBysid(int sid, String sname,String sage);
/**
* 根据当前老师id添加学生
*/
public boolean addStudent(String sname,String sage,int tid);
/**
* @param tid传入老师ID
* @return 返回学生总数
*/
public int getScountStudentByTid(int tid);
}
4 StudentDaoImpl.java实现studentDao.java
package com.zr.daoIm; import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import JDBCUtil.JDBCUtil;
import com.zr.dao.StudentDao;
import com.zr.model.Student;
public class StudentDaoImpl implements StudentDao{
/**
* 根据传入的老师id获取学生
*/
public List<Student> getStudentBytid(int tid,int start,int pageSize) {
//定义学生对象集合students接收数据库返回
List<Student> students = new ArrayList<Student>();
//获取数据库连接
Connection con=JDBCUtil.getConnection();
//编写SQL语句
StringBuffer sql=new StringBuffer("select sid,sname,sage from student where tid=? limit ?,?");
try {
PreparedStatement pst=con.prepareStatement(sql.toString());
pst.setInt(1, tid);
pst.setInt(2, start);
pst.setInt(3, pageSize);
//返回一个结果集
ResultSet rs=pst.executeQuery();
while (rs.next()) {
//学生对象接收结果集的结果
Student s=new Student();
s.setSid(rs.getInt("sid"));
s.setSname(rs.getString("sname"));
s.setSage(rs.getString("sage"));
students.add(s);
}
} catch (SQLException e) {
e.printStackTrace();
}
return students;
}
@Override
public int getScountStudentByTid(int tid) {
int scounts=0; StringBuffer sql=new StringBuffer("select count(sid) scount from student where tid=?");
Connection con=JDBCUtil.getConnection();
try {
PreparedStatement pst=con.prepareStatement(sql.toString());
pst.setInt(1, tid);
ResultSet rs=pst.executeQuery();
while(rs.next()){
scounts=rs.getInt("scount");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return scounts;
}
}
5 service层:searchService.java以及实现层searchServiceImpl.java
package com.zr.service;
import java.util.List;
import com.zr.model.Student;
public interface searchService {
/**
* 查询服务
* @param tid 通过老师ID
* @return 学生对象所有信息
*/
public List<Student> getStudents(int tid,int start,int pageSize);
/**
*
* @param tid传入老师ID
* @return 返回学生总数
*/
public int getScountStudentByTid(int tid);
}
package com.zr.serviceIm; import java.util.ArrayList;
import java.util.List;
import com.zr.dao.StudentDao;
import com.zr.dao.TeacherDao;
import com.zr.daoIm.StudentDaoImpl;
import com.zr.daoIm.TeacherDaoImpl;
import com.zr.model.Student;
import com.zr.service.searchService;
public class searchServiceImpl implements searchService{ public List<Student> getStudents(int tid,int start,int pageSize) { List<Student> students=new ArrayList<Student>();
StudentDao studentDaoImpl =new StudentDaoImpl();
students= studentDaoImpl.getStudentBytid(tid,start,pageSize);
return students;
}
@Override
public int getScountStudentByTid(int tid) {
TeacherDao teacherDao =new TeacherDaoImpl(); return teacherDao.getScountStudentByTid(tid);
}
}
6 控制层com.zr.controller.SearchController.java
注:控制层涉及一个参数scount是当前老师下的学生总数
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.zr.model.Student;
import com.zr.model.Teacher;
import com.zr.service.searchService;
import com.zr.serviceIm.searchServiceImpl;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class SearchController extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置字符编码
req.setCharacterEncoding("utf8");
resp.setCharacterEncoding("utf8");
//实例化服务层,方便参数调用
searchService s=new searchServiceImpl();
//获取datagrid的分页参数page当前页码和页面容量rows,保持参数名一直
int page=Integer.parseInt(req.getParameter("page"));
int rows=Integer.parseInt(req.getParameter("rows"));
//用学生集合接收返回的数据
List<Student> students=new ArrayList<Student>();
//起始页码start=当前页码减1乘以页面容量
int start= (page-1)*rows;
//获取存放在session中的teacher对象,在登录的时候返回老师对象并存入session对象
Teacher teacher=(Teacher) req.getSession().getAttribute("teacher");
//获取老师ID
int tid= teacher.getTid();
int scount =s.getScountStudentByTid(tid);
//根据老师id获取学生对象
students= s.getStudents(tid, start, rows);
//easy前台接收的是json对象JSONObject
JSONObject jso=new JSONObject();
//将数据返回给datagrid
jso.put("total",scount);
//rows后边的参数代表需要在前台显示的数据,格式为json的集合,再放入json的对象中
jso.put("rows", JSONArray.fromObject(students));
jso.put("page", start);
resp.getWriter().write(jso.toString());
}
}
7 前台页面编写main.jsp
数据展示并不需要进行过多的配置,只需要配置好对应的列名以及请求参数,数据格式,本页面前台的配置包含整个数据的增加,删除,修改
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title>login</title>
<script type="text/javascript">
$(function(){
//将增加框和修改框进行隐藏
$('#updateStu').dialog('close');
$('#addStu').dialog('close');
//配置学生信息表格
$('#students').datagrid({
url:'${pageContext.request.contextPath}/selectStus',
columns:[[
{field:'checked',checkbox:true,width:100},
{field:'sid',title:'ID',width:100},
{field:'sname',title:'姓名',width:100},
{field:'sage',title:'年龄',width:100,align:'right'}
]],
pagination : true, //显示分页
pagePosition:'bottom',//分页显示在底部
toolbar: [{ iconCls: 'icon-edit',
text:'添加',
handler: function(){
$('#addStu').dialog('open');//点击添加按钮显示添加框 }
},'-',{
iconCls: 'icon-delete',
text:'删除',
handler: function(){ var sids='';
var ss=$("#students").datagrid('getSelections');//接收选中的对象结果集
if(ss.length==0){//对选中的大小判断
$.messager.alert('这是一个提示信息！','请至少选择一条数据进行删除!');
}else{
//对选中数据的id以逗号进行拼接,结果会多一个逗号,后台再进行处理:截取字符串
$.messager.confirm('提示', '确认删除？', function(r) {
$.each(ss,function(n,v){
sids=sids+v.sid+','
});
$.ajax({
type:'post',
url:'${pageContext.request.contextPath}/deleteStus',
data:{'sids':sids},
dataType:"text",
success:function(data){
if(data=="1"){
$.messager.alert('提示','删除成功！');
$("#students").datagrid('reload'); }else{
$.messager.confirm('删除失败!',"删除数据失败!");
}
}
})
});
}
}
},'-',{
iconCls: 'icon-update',
text:'修改',
handler: function(){
var stus = $("#students").datagrid('getSelections'); if (stus.length != 1) {
$.messager.confirm('提示', '请选择一条数据', function(r){ $("#students").datagrid('unselectAll'); })
} else {
//显示修改框
$('#updateStu').dialog('open');
//将选中的数据加载到修改面板上
var stu = stus[0];
$('#upStu').form('load',stu); } }
}] }); /* 配置添加框 */
$("#addStuf").form({
type:'post',
url:'${pageContext.request.contextPath}/AddStu',
dataType:"text",
success : function(data) {
if(data=="1"){ $('#addStu').dialog('close');
$('#addStuf').form('clear');
$.messager.alert('我的消息','添加商品信息成功','info',function(){
$('#students').datagrid('reload');
});
}else{
$.messager.alert('我的消息','添加商品信息失败，重新添加','info',function(){
$("#addStuf").form('clear');
});
}
}
}); /* 配置修改框 */
$("#upStu").form({
type:'post',
url:'${pageContext.request.contextPath}/updataStu',
dataType:"text",
success : function(data) { if(data=="1"){ $("#students").datagrid('reload');
$.messager.alert('提示!','修改成功');
$('#updateStu').dialog('close'); }else{
$.messager.alert('我的消息','修改学生信息失败!','修改失败!',function(){
$('#upStu').form('clear');
}); }
}
}); <!--配置搜索框,该功能尚未实现-->
$('#searchStu').searchbox({
searcher : function(value, name) {
var sname = value;
$('#goods').datagrid('reload', {
searchname : sname,
});
}
}); }); //配置修改学生信息表单提交
function updataForm() {
$("#upStu").form('submit');
}
function addForm() {
$("#addStuf").form('submit'); }
</script>
</head>
<body>
<input id="searchStu" class="easyui-searchbox"
data-options="prompt:'输入学生查询信息',width:150"> <table id="students"></table> <!-- 配置修改框面板 -->
<div id="updateStu" class="easyui-dialog" title="更新学生信息信息"
style="width: 400px; height: 450px;" data-options="modal:true"> <form id="upStu" method="post">
//id默认隐藏,这样就不允许修改
<div style="margin-bottom: 20px;">
<span>id</span>
<input class="easyui-textbox" name="sid" id="sid" style="width: 200px;display: none;">
</div>
<div style="margin-bottom: 20px">
<span>学生姓名</span>
<input class="easyui-textbox" name="sname" style="width: 200px">
</div>
<div style="margin-bottom: 20px">
<span>学生年龄</span>
<input class="easyui-textbox" name="sage" style="width: 200px">
</div>
</form>
<div style="text-align: center; padding: 5px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="updataForm()" style="width: 80px" id="tt">提交</a>
</div>
</div> <!-- 配置增加框 -->
<div id="addStu" class="easyui-dialog" title="添加学生信息信息"
style="width: 400px; height: 450px;" data-options="modal:true"> <form id="addStuf" method="post">
<!-- <div style="margin-bottom: 20px;display: none;">
<span>学生ID</span>
<input class="easyui-textbox" name="sid" style="width: 200px;">
</div> -->
<div style="margin-bottom: 20px">
<span>学生姓名</span>
<input class="easyui-textbox" name="sname" style="width: 200px">
</div> <div style="margin-bottom: 20px">
<span> 学生年龄</span>
<input class="easyui-textbox" name="sage">
</div>
</form> <div style="text-align: center; padding: 5px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="addForm()" style="width: 80px" id="tt">提交</a>
</div>
</div>
</body>
</html>
最后配置请求文件
<!-- 查询当前下面的学生信息 -->
<servlet>
<servlet-name>selectStus</servlet-name>
<servlet-class>com.zr.controller.SearchController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>selectStus</servlet-name>
<url-pattern>/selectStus</url-pattern>
</servlet-mapping>
最后数据展示:
总结:利用easyUI进行数据展示的时候,自带的参数page,rows是需要获取的,并以此来实现分页功能;
后台返回到前台的时候,需要返回三个参数:
page: int page=Integer.parseInt(req.getParameter("page")); int start= (page-1)*rows; jso.put("page", start);
rows是需要展示的数据json集合 jso.put("rows", JSONArray.fromObject(students));
第三个需要返回的是数据总数total:jso.put("total",scount);
MVC模式下的数据展示:EasyUI的datagrid的更多相关文章
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- 【案例分享】使用ActiveReports报表工具，在.NET MVC模式下动态创建报表
提起报表,大家会觉得即熟悉又陌生,好像常常在工作中使用,又似乎无法准确描述报表.今天我们来一起了解一下什么是报表,报表的结构.构成元素,以及为什么需要报表. 什么是报表 简单的说:报表就是通过表格.图 ...
- MVVM模式下WPF动态绑定展示图片
MVVM模式下WPF动态展示图片,界面选择图标,复制到项目中固定目录下面,保存到数据库的是相对路径,再次读取的时候是根据数据库的相对路径去获取项目中绝对路径的图片展示. 首先在ViewModel中 / ...
- MVC模式下My97DatePicker日期控件引用注意事项
My97DatePicker日期控件之前在用webform模式开发的时候,只要 <script language="javascript" type="text/j ...
- Oracle非归档模式下脱机数据文件
正常情况下,要想对数据文件脱机,必须在归档模式下,这是ORACLE自动保护的一种措施,防止在非归档模式下对数据文件脱机,造成数据丢失.如果想在非归档模式下执行数据文件脱机操作,则需要加上“for dr ...
- 卡卡游戏引擎之MVC模式下的事件处理
前言 在前一篇文章 卡卡游戏引擎快速入门中提到了卡卡游戏引擎采用mvc的开发模式,这里相信介绍一下引擎在mvc模式下是如何做到低耦合的事件处理的. 在卡卡编辑器中选择一个节点,然后在左侧工具栏中切换到 ...
- AXI总线slave模式下接收数据---verilog代码
AXI总线slave模式下接收数据---verilog代码 `timescale 1ns / 1ps ///////////////////////////////////////////////// ...
- Angularjs在360兼容模式下取数据缓存问题解决办法
测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重 ...
随机推荐
- 阿里云 centos vim 显示中文 乱码
开始以为是vim 设置编码的问题 :网上搜 改 .vimrc 无效!!! 后转战 是不是系统里面没有中文字体 1.先从你本机 C:\Windows\Fonts 拷贝或者网络上下载你想要安装的 ...
- 那些年被我坑过的Python——摩拳擦掌（第三章）
集合类型: 集合类型中的元素是唯一的! 集合的定义与赋值: set_1 = set([1, 3, 5, 7, 2]) set_2 = set([2, 4, 6, 8, 3]) 集合的运算操作 # 交集 ...
- Object.defineProperty 规则
- ps中常用的快捷键
ctrl+c 复制 ctrl+v 粘贴 ctrl+n 新建文件 ctrl+s 保存 空格键 手抓工具 ctrl+t 自由变形 ctrl+加号 放大 ctrl+减号 缩小 ctrl+r 标 ...
- 转:Gulp使用指南
原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更 ...
- Javascript 注意点
prototype有助于减少function的冲突. 闭包有助于避免全部变量. this, prototype有助于实例化多个对象. 函数 函数表达式
- H3C S5500上层接路由，VLAN IP作网站配置实例
# version 5.20, Release 2208 # sysname S5500-1 # clock timezone #Web#8#01 add 08:00:00 # super passw ...
- ibatis报错
关键词:org.springframework.dao.DataIntegrityViolationException 在程序中进行数据库插入操作时报错如下: 未知异常:org.springframe ...
- libevent带负载均衡的多线程使用示例
功能: 主线程根据负载工作线程负载均衡算法,每隔一秒钟向特定的工作线程发送一条字符串信息,工作线程简单的把字符串信息打开出来. Makefile eventtest : eventtest.c ...
- bcb 如何在DLL中捕捉系统级异常
http://topic.csdn.net/t/20031023/09/2385627.html -------------------------------------------------- ...