Data display in MVC mode: EasyUI's datagrid-java类库-php.cn

Home

类库下载

java类库

Data display in MVC mode: EasyUI's datagrid

高洛峰

Nov 05, 2016 pm 02:07 PM

mvc

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

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

student表

Data display in MVC mode: EasyUIs datagrid

教师表:

Data display in MVC mode: EasyUIs datagrid

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

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

Data display in MVC mode: EasyUIs datagrid

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(){
    //将增加框和修改框进行隐藏
    $(&#39;#updateStu&#39;).dialog(&#39;close&#39;);
    $(&#39;#addStu&#39;).dialog(&#39;close&#39;);
    //配置学生信息表格
    $(&#39;#students&#39;).datagrid({    
        url:&#39;${pageContext.request.contextPath}/selectStus&#39;,    
        columns:[[    
            {field:&#39;checked&#39;,checkbox:true,width:100},
            {field:&#39;sid&#39;,title:&#39;ID&#39;,width:100},    
            {field:&#39;sname&#39;,title:&#39;姓名&#39;,width:100},    
            {field:&#39;sage&#39;,title:&#39;年龄&#39;,width:100,align:&#39;right&#39;}    
        ]],
        pagination : true, //显示分页
        pagePosition:&#39;bottom&#39;,//分页显示在底部
        toolbar: [{ iconCls: &#39;icon-edit&#39;,
            text:&#39;添加&#39;,
            handler: function(){
                $(&#39;#addStu&#39;).dialog(&#39;open&#39;);//点击添加按钮显示添加框
                
                
                }
        },&#39;-&#39;,{
            iconCls: &#39;icon-delete&#39;,
            text:&#39;删除&#39;,
            handler: function(){
                
                var sids=&#39;&#39;;
                var ss=$("#students").datagrid(&#39;getSelections&#39;);//接收选中的对象结果集
               
                  if(ss.length==0){//对选中的大小判断
                    $.messager.alert(&#39;这是一个提示信息！&#39;,&#39;请至少选择一条数据进行删除!&#39;);
                }else{
                 //对选中数据的id以逗号进行拼接,结果会多一个逗号,后台再进行处理:截取字符串
                $.messager.confirm(&#39;提示&#39;, &#39;确认删除？&#39;, function(r) {
                    $.each(ss,function(n,v){
                         sids=sids+v.sid+&#39;,&#39; 
                });
                    $.ajax({
                        type:&#39;post&#39;,
                        url:&#39;${pageContext.request.contextPath}/deleteStus&#39;,
                        data:{&#39;sids&#39;:sids},
                        dataType:"text",
                        success:function(data){
                            if(data=="1"){
                                $.messager.alert(&#39;提示&#39;,&#39;删除成功！&#39;);
                               $("#students").datagrid(&#39;reload&#39;); 
                               
                           }else{
                               $.messager.confirm(&#39;删除失败!&#39;,"删除数据失败!");
                           }
                        }
                    })
                });
            }
                }
        },&#39;-&#39;,{
            iconCls: &#39;icon-update&#39;,
            text:&#39;修改&#39;,
            handler: function(){
                var stus = $("#students").datagrid(&#39;getSelections&#39;);
                
                if (stus.length != 1) {
                    $.messager.confirm(&#39;提示&#39;, &#39;请选择一条数据&#39;, function(r){
            
                            $("#students").datagrid(&#39;unselectAll&#39;);
                        
                    })
                } else {
                    //显示修改框
                    $(&#39;#updateStu&#39;).dialog(&#39;open&#39;);

                  //将选中的数据加载到修改面板上
                   var stu = stus[0];
                    $(&#39;#upStu&#39;).form(&#39;load&#39;,stu);
                    
          
                }
                
            
            }
        }]

    }); 
    
    /* 配置添加框 */
    $("#addStuf").form({
        type:&#39;post&#39;,
        url:&#39;${pageContext.request.contextPath}/AddStu&#39;,
        dataType:"text",
        success : function(data) {
            if(data=="1"){
                
                $(&#39;#addStu&#39;).dialog(&#39;close&#39;);
                $(&#39;#addStuf&#39;).form(&#39;clear&#39;);
                $.messager.alert(&#39;我的消息&#39;,&#39;添加商品信息成功&#39;,&#39;info&#39;,function(){
                    $(&#39;#students&#39;).datagrid(&#39;reload&#39;);
                });
            }else{
                $.messager.alert(&#39;我的消息&#39;,&#39;添加商品信息失败，重新添加&#39;,&#39;info&#39;,function(){
                    $("#addStuf").form(&#39;clear&#39;);
                });
            }
        }
    });
    
    /* 配置修改框 */
    $("#upStu").form({
        type:&#39;post&#39;,
        url:&#39;${pageContext.request.contextPath}/updataStu&#39;,
        dataType:"text",
        success : function(data) {
        
            if(data=="1"){
                
               $("#students").datagrid(&#39;reload&#39;); 
               $.messager.alert(&#39;提示!&#39;,&#39;修改成功&#39;);    
               $(&#39;#updateStu&#39;).dialog(&#39;close&#39;);
               
           }else{
               $.messager.alert(&#39;我的消息&#39;,&#39;修改学生信息失败!&#39;,&#39;修改失败!&#39;,function(){
                   $(&#39;#upStu&#39;).form(&#39;clear&#39;);
                });  
              
           }
        }
    });
    
    <!--配置搜索框,该功能尚未实现-->
    $(&#39;#searchStu&#39;).searchbox({
        searcher : function(value, name) {
            var sname = value;
            $(&#39;#goods&#39;).datagrid(&#39;reload&#39;, {
                searchname : sname,
            });
        }
    });

});

//配置修改学生信息表单提交
function updataForm() {
    $("#upStu").form(&#39;submit&#39;);
}

function addForm() {
    $("#addStuf").form(&#39;submit&#39;);
    
}
</script>
</head>
<body>
<input id="searchStu" class="easyui-searchbox"
        data-options="prompt:&#39;输入学生查询信息&#39;,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>

最后数据展示:

Data display in MVC mode: EasyUIs datagrid

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

PHP MVC 架构：构建面向未来的 Web 应用程序Mar 03, 2024 am 09:01 AM

引言在当今快速发展的数字世界中，构建健壮、灵活且可维护的WEB应用程序至关重要。PHPmvc架构提供了实现这一目标的理想解决方案。MVC（模型-视图-控制器）是一种广泛使用的设计模式，可以将应用程序的各个方面分离为独立的组件。MVC架构的基础MVC架构的核心原理是分离关注点：模型：封装应用程序的数据和业务逻辑。视图：负责呈现数据并处理用户交互。控制器：协调模型和视图之间的交互，管理用户请求和业务逻辑。PHPMVC架构phpMVC架构遵循传统MVC模式，但也引入了语言特定的功能。以下是PHPMVC

PHP MVC 架构的进阶指南：解锁高级功能Mar 03, 2024 am 09:23 AM

mvc架构（模型-视图-控制器）是PHP开发中最流行的模式之一，因为它为组织代码和简化WEB应用程序的开发提供了清晰的结构。虽然基本的MVC原理对于大多数Web应用程序来说已经足够，但对于需要处理复杂数据或实现高级功能的应用程序，它存在一些限制。分离模型层分离模型层是高级MVC架构中常见的一种技术。它涉及将模型类分解为更小的子类，每个子类专注于特定功能。例如，对于一个电子商务应用程序，您可以将主模型类分解为订单模型、产品模型和客户模型。这种分离有助于提高代码的可维护性和可重用性。使用依赖注入依赖

如何使用PHP实现MVC模式Jun 07, 2023 pm 03:40 PM

MVC(Model-View-Controller)模式是一种常用的软件设计模式，可以帮助开发人员更好地组织和管理代码。MVC模式将应用程序分为三部分：模型（Model）、视图（View）和控制器（Controller），每个部分都有自己的角色和职责。在本文中，我们将讨论如何使用PHP实现MVC模式。模型（Model）模型代表应用程序的数据和数据处理。通常，

揭秘SpringMVC框架的成功：它为何广受欢迎Jan 24, 2024 am 08:39 AM

SpringMVC框架解密：为什么它如此受欢迎，需要具体代码示例引言：在当今的软件开发领域中，SpringMVC框架已经成为开发者非常喜爱的一种选择。它是基于MVC架构模式的Web框架，提供了灵活、轻量级、高效的开发方式。本文将深入探讨SpringMVC框架的魅力所在，并通过具体的代码示例来展示其强大之处。一、SpringMVC框架的优势灵活的配置方式Spr

PHP中如何使用MVC架构设计项目Jun 27, 2023 pm 12:18 PM

在Web开发中，MVC（Model-View-Controller）是一种常用的架构模式，用于处理和管理应用程序的数据、用户界面和控制逻辑。PHP作为流行的Web开发语言，也可以借助MVC架构来设计和构建Web应用程序。本文将介绍如何在PHP中使用MVC架构设计项目，并解释其优点和注意事项。什么是MVCMVC是一种软件架构模式，通常用于Web应用程序中。MV

PHP8框架开发MVC：逐步指南Sep 11, 2023 am 10:05 AM

PHP8框架开发MVC：逐步指南引言：MVC（Model-View-Controller）是一种常用的软件架构模式，用于将应用程序的逻辑、数据和用户界面分离。它提供了一种将应用程序分成三个不同组件的结构，以便更好地管理和维护代码。在本文中，我们将探讨如何使用PHP8框架来开发一个符合MVC模式的应用程序。第一步：理解MVC模式在开始开发MVC应用程序之前，我

从路由到视图——深入探究Beego的MVC架构Jun 23, 2023 am 10:53 AM

Beego是一个基于Go语言的Web应用框架，具有高性能、简单易用和高可扩展性等优点。其中，MVC架构是Beego框架的核心设计理念之一，它可以帮助开发者更好地管理和组织代码，提高开发效率和代码质量。本文将深入探究Beego的MVC架构，让开发者更好地理解和使用Beego框架。一、MVC架构简介MVC，即Model-View-Controller，是一种常见

Spring MVC详解：深入解析这个强大的框架Dec 29, 2023 am 08:09 AM

SpringMVC是一个非常流行的JavaWeb开发框架，它以其强大的功能和灵活性而受到广泛的欢迎。它的设计思想是基于MVC（Model-View-Controller）架构模式，通过将应用程序分为模型、视图和控制器三个部分，实现了应用程序的解耦和模块化。在本文中，我们将深入探讨SpringMVC框架的各个方面，包括请求的处理和转发、模型和视图的处理、

See all articles