Heim > 类库下载 > java类库 > Hauptteil

Datenanzeige im MVC-Modus: EasyUIs Datagrid

高洛峰
Freigeben: 2016-11-05 14:07:33
Original
1563 Leute haben es durchsucht

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

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

student表

Datenanzeige im MVC-Modus: EasyUIs Datagrid

教师表:

Datenanzeige im MVC-Modus: EasyUIs Datagrid

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

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

Datenanzeige im MVC-Modus: 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;
        }
        
}
Nach dem Login kopieren
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();
            }
}
Nach dem Login kopieren

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


}
Nach dem Login kopieren

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

}
Nach dem Login kopieren

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

}
Nach dem Login kopieren
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);
    }
}
Nach dem Login kopieren

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());
        
    }
    }
Nach dem Login kopieren

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>
Nach dem Login kopieren

最后配置请求文件

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

最后数据展示:

Datenanzeige im MVC-Modus: 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);


Verwandte Etiketten:
mvc
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!