我的數(shù)據(jù)庫(kù)設(shè)計(jì)是一張老師表teacher,一張學(xué)生表student,一個(gè)教師對(duì)應(yīng)多個(gè)學(xué)生,在學(xué)生一方建立外鍵;

還有一點(diǎn)想清楚,需要展示的數(shù)據(jù)是根據(jù)什么來(lái)的,是成功登陸的用戶的id?還是直接展示所有的學(xué)生?

student表

教師表:

我是習(xí)慣性的從后寫到前,這里展示的是登錄成功的老師下的學(xué)生信息

1 建立項(xiàng)目,建立好對(duì)應(yīng)的包以及工具包

?

2建立好與數(shù)據(jù)庫(kù)對(duì)應(yīng)的實(shí)體類?

package com.zr.model;
public class Student {
        private int sid;
        private  String  sname;
        private  String sage;
        //自行g(shù)et  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;
            //自行g(shù)et 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,因?yàn)槭褂玫氖莈asyUI,所以傳入?yún)?shù)多了起始頁(yè)碼start和頁(yè)面容量pageSize,這兩個(gè)參數(shù)都是從頁(yè)面的datagrid獲取的,是datagrid自帶的參數(shù),方便后面的分頁(yè)

package com.zr.dao;
import java.util.List;
import com.zr.model.Student;
public interface StudentDao {
    /**
     * 
     * @param tid
     * @return 學(xué)生對(duì)象
     * 根據(jù)老師id返回學(xué)生對(duì)象
     */
    public  List<Student> getStudentBytid(int tid,int start,int pageSize);
    
    /**
     * 根據(jù)學(xué)生id刪除學(xué)生
     * @param s
     * @return
     */
    public  boolean  deleteStudentsBysid(String  s[]);
    /**
     * 根據(jù)學(xué)生id更新學(xué)生信息
     * @param student
     * @return
     */
    public  boolean  updateStudentBysid(int sid, String sname,String sage);
    /**
     * 根據(jù)當(dāng)前老師id添加學(xué)生
     */
    public  boolean  addStudent(String sname,String sage,int tid);


/**
     * @param tid傳入老師ID
     * @return 返回學(xué)生總數(shù)
     */
    public  int  getScountStudentByTid(int tid);


}

4 StudentDaoImpl.java實(shí)現(xiàn)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{
    /**
     * 根據(jù)傳入的老師id獲取學(xué)生
     */
    public List<Student> getStudentBytid(int tid,int start,int pageSize) {
        //定義學(xué)生對(duì)象集合students接收數(shù)據(jù)庫(kù)返回
        List<Student>  students =  new ArrayList<Student>();
        //獲取數(shù)據(jù)庫(kù)連接
        Connection con=JDBCUtil.getConnection();
        //編寫SQL語(yǔ)句
        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);
            //返回一個(gè)結(jié)果集
            ResultSet rs=pst.executeQuery();
            while (rs.next()) {
                //學(xué)生對(duì)象接收結(jié)果集的結(jié)果
                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以及實(shí)現(xiàn)層searchServiceImpl.java

package com.zr.service;
import java.util.List;
import com.zr.model.Student;
public interface searchService {
    /**
     * 查詢服務(wù)
     * @param tid 通過(guò)老師ID
     * @return 學(xué)生對(duì)象所有信息
     */
public List<Student> getStudents(int  tid,int start,int pageSize);

/**
 * 
 * @param tid傳入老師ID
 * @return 返回學(xué)生總數(shù)
 */
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

注:控制層涉及一個(gè)參數(shù)scount是當(dāng)前老師下的學(xué)生總數(shù)

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 {
        //設(shè)置字符編碼
        req.setCharacterEncoding("utf8");
        resp.setCharacterEncoding("utf8");
        //實(shí)例化服務(wù)層,方便參數(shù)調(diào)用
        searchService s=new searchServiceImpl();
        //獲取datagrid的分頁(yè)參數(shù)page當(dāng)前頁(yè)碼和頁(yè)面容量rows,保持參數(shù)名一直        
        int page=Integer.parseInt(req.getParameter("page"));
        int rows=Integer.parseInt(req.getParameter("rows"));
        //用學(xué)生集合接收返回的數(shù)據(jù)
        List<Student> students=new  ArrayList<Student>();
        //起始頁(yè)碼start=當(dāng)前頁(yè)碼減1乘以頁(yè)面容量
        int start= (page-1)*rows;
        //獲取存放在session中的teacher對(duì)象,在登錄的時(shí)候返回老師對(duì)象并存入session對(duì)象
        Teacher teacher=(Teacher) req.getSession().getAttribute("teacher");
        //獲取老師ID
        int  tid=   teacher.getTid();

        int scount =s.getScountStudentByTid(tid);
        //根據(jù)老師id獲取學(xué)生對(duì)象 
        students= s.getStudents(tid, start, rows);
        //easy前臺(tái)接收的是json對(duì)象JSONObject
        JSONObject jso=new JSONObject();
        //將數(shù)據(jù)返回給datagrid
        jso.put("total",scount);
        //rows后邊的參數(shù)代表需要在前臺(tái)顯示的數(shù)據(jù),格式為json的集合,再放入json的對(duì)象中
        jso.put("rows", JSONArray.fromObject(students));
        jso.put("page", start);
        resp.getWriter().write(jso.toString());
        
    }
    }

7 前臺(tái)頁(yè)面編寫main.jsp

數(shù)據(jù)展示并不需要進(jìn)行過(guò)多的配置,只需要配置好對(duì)應(yīng)的列名以及請(qǐng)求參數(shù),數(shù)據(jù)格式,本頁(yè)面前臺(tái)的配置包含整個(gè)數(shù)據(jù)的增加,刪除,修改

<%@ 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(){
    //將增加框和修改框進(jìn)行隱藏
    $(&#39;#updateStu&#39;).dialog(&#39;close&#39;);
    $(&#39;#addStu&#39;).dialog(&#39;close&#39;);
    //配置學(xué)生信息表格
    $(&#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, //顯示分頁(yè)
        pagePosition:&#39;bottom&#39;,//分頁(yè)顯示在底部
        toolbar: [{ iconCls: &#39;icon-edit&#39;,
            text:&#39;添加&#39;,
            handler: function(){
                $(&#39;#addStu&#39;).dialog(&#39;open&#39;);//點(diǎn)擊添加按鈕顯示添加框
                
                
                }
        },&#39;-&#39;,{
            iconCls: &#39;icon-delete&#39;,
            text:&#39;刪除&#39;,
            handler: function(){
                
                var sids=&#39;&#39;;
                var ss=$("#students").datagrid(&#39;getSelections&#39;);//接收選中的對(duì)象結(jié)果集
               
                  if(ss.length==0){//對(duì)選中的大小判斷
                    $.messager.alert(&#39;這是一個(gè)提示信息！&#39;,&#39;請(qǐng)至少選擇一條數(shù)據(jù)進(jìn)行刪除!&#39;);
                }else{
                 //對(duì)選中數(shù)據(jù)的id以逗號(hào)進(jìn)行拼接,結(jié)果會(huì)多一個(gè)逗號(hào),后臺(tái)再進(jìn)行處理:截取字符串
                $.messager.confirm(&#39;提示&#39;, &#39;確認(rèn)刪除？&#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;,"刪除數(shù)據(jù)失敗!");
                           }
                        }
                    })
                });
            }
                }
        },&#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;請(qǐng)選擇一條數(shù)據(jù)&#39;, function(r){
            
                            $("#students").datagrid(&#39;unselectAll&#39;);
                        
                    })
                } else {
                    //顯示修改框
                    $(&#39;#updateStu&#39;).dialog(&#39;open&#39;);

                  //將選中的數(shù)據(jù)加載到修改面板上
                   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;修改學(xué)生信息失敗!&#39;,&#39;修改失敗!&#39;,function(){
                   $(&#39;#upStu&#39;).form(&#39;clear&#39;);
                });  
              
           }
        }
    });
    
    <!--配置搜索框,該功能尚未實(shí)現(xiàn)-->
    $(&#39;#searchStu&#39;).searchbox({
        searcher : function(value, name) {
            var sname = value;
            $(&#39;#goods&#39;).datagrid(&#39;reload&#39;, {
                searchname : sname,
            });
        }
    });

});

//配置修改學(xué)生信息表單提交
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;輸入學(xué)生查詢信息&#39;,width:150">
    
    <table id="students"></table>
    
    <!-- 配置修改框面板 -->
    <div id="updateStu" class="easyui-dialog" title="更新學(xué)生信息信息"
        style="width: 400px; height: 450px;" data-options="modal:true">
        
        <form id="upStu" method="post">
        //id默認(rèn)隱藏,這樣就不允許修改
        <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>學(xué)生姓名</span>
                <input class="easyui-textbox" name="sname" style="width: 200px">
            </div>
            <div style="margin-bottom: 20px">
                <span>學(xué)生年齡</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="添加學(xué)生信息信息"
        style="width: 400px; height: 450px;" data-options="modal:true">
        
        <form id="addStuf" method="post">
            <!-- <div style="margin-bottom: 20px;display: none;">
                <span>學(xué)生ID</span>
                <input class="easyui-textbox" name="sid" style="width: 200px;">
            </div> -->
            <div style="margin-bottom: 20px">
                <span>學(xué)生姓名</span>
                <input class="easyui-textbox" name="sname" style="width: 200px">
            </div>
            
            <div style="margin-bottom: 20px">
                <span>    學(xué)生年齡</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>

最后配置請(qǐng)求文件

<!-- 查詢當(dāng)前下面的學(xué)生信息 -->
          <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>

最后數(shù)據(jù)展示:

總結(jié):利用easyUI進(jìn)行數(shù)據(jù)展示的時(shí)候,自帶的參數(shù)page,rows是需要獲取的,并以此來(lái)實(shí)現(xiàn)分頁(yè)功能;

后臺(tái)返回到前臺(tái)的時(shí)候,需要返回三個(gè)參數(shù):

page: int?page=Integer.parseInt(req.getParameter("page")); ??int start= (page-1)*rows;?? jso.put("page", start);

rows是需要展示的數(shù)據(jù)json集合?jso.put("rows", JSONArray.fromObject(students));

第三個(gè)需要返回的是數(shù)據(jù)總數(shù)total:jso.put("total",scount);