首页 > 类库下载 > java类库 > MVC模式下的数据展示:EasyUI的datagrid

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

高洛峰
发布: 2016-11-05 14:07:33
原创
1663 人浏览过

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

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

student表

1.png

教师表:

1.png

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

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

1.png

 

2建立好与数据库对应的实体类 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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;

        }

         

}

登录后复制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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自带的参数,方便后面的分页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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

 

}

登录后复制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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是当前老师下的学生总数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

<%@ 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>

登录后复制

最后配置请求文件

1

2

3

4

5

6

7

8

9

<!-- 查询当前下面的学生信息 -->

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


相关标签:
mvc
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
asp.net-mvc - asp.net mvc 中路由该怎么做?
来自于 1970-01-01 08:00:00
0
0
0
能简单解释一下MVC吗?越简单越好
来自于 1970-01-01 08:00:00
0
0
0
推荐一本学习asp.net mvc的书
来自于 1970-01-01 08:00:00
0
0
0
对 MVC 和 MVP 模式的疑惑
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板