MVC模式下的数据展示:EasyUI的datagrid

秋涛小哥_1424

秋涛小哥_1424

2016-11-05

1674人浏览

原创

我的数据库设计是一张老师表teacher,一张学生表student,一个教师对应多个学生,在学生一方建立外键;

还有一点想清楚,需要展示的数据是根据什么来的,是成功登陆的用户的id?还是直接展示所有的学生?

student表

1.png

教师表:

1.png

我是习惯性的从后写到前,这里展示的是登录成功的老师下的学生信息

1 建立项目,建立好对应的包以及工具包

1.png

 

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);


}</student>

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;
    }

}</student></student></student>

5 service层:searchService.java以及实现层searchServiceImpl.java

AIHub
AIHub

一款AI开发辅助工具,主要用于一站式人工智能工具集合网站,收录了国内外1500+AI工具和网站,每日持续更新,适合需要提升相关任务效率的用户。

下载
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);

}</student>
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);
    }
}</student></student></student>

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());
        
    }
    }</student></student>

7 前台页面编写main.jsp

数据展示并不需要进行过多的配置,只需要配置好对应的列名以及请求参数,数据格式,本页面前台的配置包含整个数据的增加,删除,修改

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<meta><link><link><script></script><script></script><script></script><title>login</title><script>
$(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><input>
    
    
              
                 
        //id默认隐藏,这样就不允许修改         
                id                              
            
                学生姓名                              
            
                学生年龄                              
        
        
            提交          
    
                            
                 
                         
                学生姓名                              
                         
                    学生年龄                              
        
                 
            提交          
    

最后配置请求文件

<!-- 查询当前下面的学生信息 -->
          <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>

最后数据展示:

1.png


总结:利用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);


相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

40

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

20

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

40

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

120

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

80

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

80

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

40

10

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

2026.10.22

80

25

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

2026.10.22

40

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Iris框架MVC快速入门指南
Iris框架MVC快速入门指南

共0课时 | 0人学习

Iris框架官方文档
Iris框架官方文档

共0课时 | 0人学习