嵌入班级信息到System页面

  这一部分要实现班级信息的相关操作。
  还是在名为servlet的package下创建一个显示班级列表的Servlet——ClazzServlet。这样取名字是避免与系统关键字class起冲突，以免出现不必要的麻烦。

public class ClazzServlet extends HttpServlet {public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{doPost(req,res);}public void doPost(HttpServletRequest req,HttpServletResponse res){}
}

  接下来还是要在web.xml中对这个Servlet进行配置，建立与访问路径的一个映射。

<servlet><description>班级信息管理</description><servlet-name>ClazzServlet</servlet-name><servlet-class>com.ischoolbar.programmer.servlet.ClazzServlet</servlet-class>
</servlet>
<servlet-mapping><servlet-name>ClazzServlet</servlet-name><url-pattern>/ClazzServlet</url-pattern>
</servlet-mapping>

  第三步，我们打开素材文件，找到clazzList.jsp，将其复制到view目录下。
打开里面部分代码如下面所示，我们之前已经将左边的菜单栏布置好了，当用户点击菜单栏中的班级列表时，我们需要将clazzList.jsp在右边显示出来。

public class ClazzServlet extends HttpServlet {private static final long serialVersionUID = -7264164305513332635L;public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{doPost(req,res);}public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{String method = req.getParameter("method");if("toClazzListView".equals(method)){clazzList(req,res);}}private void clazzList(HttpServletRequest req, HttpServletResponse res) throws IOException {// TODO Auto-generated method stubtry {req.getRequestDispatcher("view/clazzList.jsp").forward(req, res);} catch (ServletException e) {e.printStackTrace();}}

  从system.jsp中有这样一行代码，这个请求就是发往ClazzServlet的，并且传入了一个参数 toClazzListView，我们根据这个参数实现了请求转发。

{"menuid":"42","menuname":"班级列表","icon":"icon-house","url":"ClazzServlet?method=toClazzListView"},

  现在已经将班级列表页面，即clazzList.jsp能够动态的嵌入到System.jsp中了，打开clazzList.jsp，有这样的几行代码：功能是显示班级列表，通过传递getClazzList来显示班级列表。

    $('#dataList').datagrid({ ........(部分代码省略)method: "post",// 给服务器发送请求url:"ClazzServlet?method=getClazzList&t="+new Date().getTime(),idField:'id', ........(部分代码省略)})

  我们按照这里给出的url在ClazzServlet中进行参数的传递，ClazzServlet的doPost方法就成了下面的样子。我们通过调用的getClazzList()方法来显示从数据库中读取的数据。

	public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{String method = req.getParameter("method");if("toClazzListView".equals(method)){clazzList(req,res);}else if("getClazzList".equals(method)){getClazzList(req, res);}}

读取数据库的信息

  但是我们还没有实现从数据库中读取列表的方法。
接下来我们要创建一个班级列表的model类——Clazz.java，并且附上相应的get和set方法。

public class Clazz {private int id;private String name;private String info;public int getId() {return id;}public void setId(int id) {this.id = id;}....(部分代码省略)
}

  有了model，我们就可以相应的在dao的package下创建一个dao——ClazzDao。
  我们还要根据显示的页面来实现数据的分页显示，在这之前我们创建一个Page的model，但是这个类并没有在数据库中对应存在的数据表，只是方便在分页的时候做处理。

public class Page {private int start;			// 起始页private int currentPage;	// 当前页private int pageSize;		// 每页显示的数量public Page(int curruntPage,int pageSize){this.start = (curruntPage-1)*pageSize;this.currentPage = curruntPage;this.pageSize = pageSize;}public int getStart() {return start;}....(部分代码省略)

  从这个类的的构造函数中可以看出，每一页的起始页都是当前的页数减一再乘以每一页的数目，这一点不难理解。
有了page之后，可以在ClazzDao中实现查询班级列表的方法。

	public List<Clazz> getClazzList(Clazz clazz,Page page){List<Clazz> ret = new ArrayList<Clazz>();String sql = "select * from s_clazz";if(!StringUtil.isEmpty(clazz.getName())){sql += " where name like '%" + clazz.getName() +"'"; // 模糊查询}sql += " limit " + page.getStart() +","+page.getPageSize();ResultSet resultSet = query(sql);try {while(resultSet.next()){Clazz c1 = new Clazz();c1.setId(resultSet.getInt("id"));c1.setName(resultSet.getString("name"));c1.setInfo(resultSet.getString("info"));ret.add(c1);}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return ret;}

  从上面代码中显示的sql语句来看，这里的分页查询是基于了sql语句的拼接。是" limit " + page.getStart() +","+page.getPageSize();这部分起到了作用。

  我们在上面的ClazzServlet已经给出了getClazzList(req, res);方法，但是还没有具体实现。回到ClazzServlet，在doPost方法下可以写。

private void getClazzList(HttpServletRequest req,HttpServletResponse res){String name = req.getParameter("name");				// 获取前台参数Integer currentPage = Integer.parseInt(req.getParameter("page"));		// 获取前台数据转为IntegerInteger pageSize = Integer.parseInt(req.getParameter("rows"));Clazz clazz = new Clazz();		//创建一个Clazz对象clazz.setName(name);			// 给班级对象的班级名属性进行赋值，这个值是前台传来的，用于在数据库中按照班级名进行条件查询的ClazzDao clazzDao = new ClazzDao();	List<Clazz> clazzList = clazzDao.getClazzList(clazz, new Page(currentPage, pageSize));		// 获取数据库的数据，多条查询结果，所以用List存储clazzDao.closeCon();JsonConfig jsonConfig = new JsonConfig();	String clazzListString = JSONArray.fromObject(clazzList, jsonConfig).toString();System.out.println(clazzListString);		// 查询的结果转为Json串res.setCharacterEncoding("utf-8");			// 设置字符集，防止乱码try {res.getWriter().write(clazzListString);	// 返回相应给客户端} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}
}

  那么返回的响应，是什么样子的呢，可以打开F12调试窗口看一下我们从后台得到的数据是什么样子的。

  回到clazzList.jsp，以下就是数据显示的表格，所以一切查询到的数据都是动态的添加在这个表格中的。记住，这里的id为dataList，是先在html中定义数据显示的行和列。

<!-- 数据列表 --><table id="dataList" cellspacing="0" cellpadding="0"> </table> 

  使用Id选择器选择到了上面的数据列表，并且创建了一个数据网络（datagrid）。

//datagrid初始化 
$('#dataList').datagrid({ ....url:"ClazzServlet?method=getClazzList&t="+new Date().getTime(),....columns: [[  {field:'chk',checkbox: true,width:50},{field:'id',title:'ID',width:50, sortable: true},    {field:'name',title:'班级名称',width:200},{field:'info',title:'班级介绍',width:100},]], 
}); 

最终获取的数据将会在这里显示出来。

模糊查询

  根据条件来查询相关的数据在clazzDao查询班级列表的功能中已经实现好了，其核心代码就是在我们输入了关键信息，并且根据这个信息作为条件来返回数据。

if(!StringUtil.isEmpty(clazz.getName())){sql += " where name like '%" + clazz.getName() +"'"; // 模糊查询
}

  这里我们要完成的功能是按照条件进行模糊查询，但是素材中并没有搜索框与搜索按钮，这里要我们自己去设定。所以仍然是在clazzList.jsp中进行修改。

<div style="margin-top: 3px">班级名称：<input id="clazzName" class="easyui-textbox" name="clazzName" /><a id="search-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">搜索</a>	
</div>

  接着要给搜索按钮添加一个事件的监听，当点击的时候触发 datagrid.load方法。把参数clazzName传入到后台，通过requet.getParamete(‘clazzName’)来获取。

$("#search-btn").click(function(){$('#dataList').datagrid('load',{clazzName:$('#clazzName').val()})
});

  模糊查询也是查询，所以可以使用之前定义在Servlet层的getClazzList方法，Dao层也仍然要使用getClazzList方法。如上图中标志2的部分，我们需要统计出符合模糊查询条件的数据个数，所以需要在Dao层定义一个便于统计个数的方法。

public int getClazzListTotal(Clazz clazz){int total = 0;String sql = "select count(*) as total from s_clazz ";if(!StringUtil.isEmpty(clazz.getName())){sql += "where name like '%" + clazz.getName() +"%'";}ResultSet resultSet = query(sql);try {while(resultSet.next()){total = resultSet.getInt("total");}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return total;
}

  因为查询到的数据仍然是使用list来返回的，现在需要对getClazzList()方法进行修改，将统计查询结果的个数和查得到的数据一起返回给浏览器。

private void getClazzList(HttpServletRequest req,HttpServletResponse res){res.setCharacterEncoding("utf-8");res.setContentType("text/html;charset=utf-8");String name = req.getParameter("clazzName"); // 获取模糊查询的条件Integer currentPage = Integer.parseInt(req.getParameter("page"));Integer pageSize = Integer.parseInt(req.getParameter("rows"));Clazz clazz = new Clazz();clazz.setName(name);		// 给Clazz对象的name属性进行赋值ClazzDao clazzDao = new ClazzDao();		List<Clazz> clazzList = clazzDao.getClazzList(clazz, new Page(currentPage, pageSize));clazzDao.closeCon();int total = clazzDao.getClazzListTotal(clazz);	// 获取模糊查询结果的总结果数clazzDao.closeCon();Map<String,Object> ret = new HashMap<String,Object>();ret.put("total", total);ret.put("rows", clazzList);try {res.getWriter().write(JSONObject.fromObject(ret).toString());// 将map中的数据转换为json} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}
}

打开浏览器 调试窗口，也可以查看到返回的响应信息。

添加数据

  因为要添加数据，我们所想自然也需要一个填写信息的弹窗来做为填写数据的载体。而素材文件中也包含这一部分代码。

<!-- 添加窗口 -->
<div id="addDialog" style="padding: 10px">  <form id="addForm" method="post"><table cellpadding="8" ><tr><td>班级名称:</td><td><input id="add_name" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="name"  data-options="required:true, missingMessage:'不能为空'" /></td></tr><tr><td>班级介绍:</td><td><textarea name="info" style="width:200px; height:60px;"cols=""></textarea></td></tr></table></form>
</div>

	  	//设置添加班级窗口$("#addDialog").dialog({title: "添加班级",....(部分代码省略)buttons: [{....(部分代码省略)handler:function(){....(部分代码省略)} else{$.ajax({type: "post",url: "ClazzServlet?method=AddClazz",data: $("#addForm").serialize(),success: function(msg){....(部分代码省略)}}});....(部分代码省略)});

  上面ajax所请求的url为"ClazzServlet?method=AddClazz"，接下来，回到Servlet中继续创建应对AddClazz的方法。
在doPost中添加代码。

public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{....}else if("AddClazz".equals(method)){addClazz(req,res);}}

  创建addClazz()方法，从前台获取数据之后再调用Dao层的方法进行查询，如果查询到那么久给浏览器个success的响应，浏览器再根据这个响应进行处理。

private void addClazz(HttpServletRequest req, HttpServletResponse res) {String name = req.getParameter("name");String info = req.getParameter("info");Clazz clazz = new Clazz();clazz.setName(name);clazz.setInfo(info);ClazzDao clazzDao = new ClazzDao();if(clazzDao.addClazz(clazz)){try {res.getWriter().write("success");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{clazzDao.closeCon();}}
}

在来看看Dao的addClazz方法。

public boolean addClazz(Clazz clazz){String sql = "insert into s_clazz values(null,'"+clazz.getName()+"','"+clazz.getInfo()+"') ";return update(sql);
}

  因为这个更新的操作使用的比较频繁，就将其定义到了BaseDao中，从这里我们就知道了如果我们执行成功就说明数据库的操作是没有问题的，那么在addClazz方法中就会返回一个真，并且将这个结果发往Servlet，就能给浏览器发送“success”的响应。

public boolean update(String sql){try {return dbUtil.getConnection().prepareStatement(sql).executeUpdate()>0;} catch (SQLException e) {e.printStackTrace();}return false;
}

  我们看看前台收到success之后的操作，当添加数据成功后，重新刷新页面。

success: function(msg){if(msg == "success"){$.messager.alert("消息提醒","添加成功!","info");//关闭窗口$("#addDialog").dialog("close");//清空原表格数据$("#add_name").textbox('setValue', "");$("#Info").val("");//重新刷新页面数据$('#dataList').datagrid("reload");		} else{$.messager.alert("消息提醒","添加失败!","warning");return;}

测试一下

  我们看成功之后返回了一个success。

删除功能

  删除功能上面的流程一致，这就不贴删除键的html了，我们将删除按钮给一个id=delete。通过id选择器来实现单击后的操作。
第一件事，先获取行号，确定要删除的数据。这里的行号传到后台使用req.getParameter(“clazzid”)来进行获取。

	    $("#delete").click(function(){var selectRow = $("#dataList").datagrid("getSelected");  // 获取行号if(selectRow == null){$.messager.alert("消息提醒", "请选择数据进行删除!", "warning");} else{var clazzid = selectRow.id;$.messager.confirm("消息提醒", "将删除与班级信息（如果班级下存在学生或教师则不能删除），确认继续？", function(r){if(r){$.ajax({type: "post",url: "ClazzServlet?method=DeleteClazz",data: {clazzid: clazzid},success: function(msg){if(msg == "success"){$.messager.alert("消息提醒","删除成功!","info");//刷新表格$("#dataList").datagrid("reload");} else{$.messager.alert("消息提醒","删除失败!","warning");return;}}});}});}});

  通过上面的代码，我们明确了要访问的地址，以及传送的数据等，接下来和之前一样，在doPost中添加代码。

public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{....}else if("DeleteClazz".equals(method)){deleteClazz(req,res);}}

后面也是一样要创建一个deleteClazz()方法：

private void deleteClazz(HttpServletRequest req, HttpServletResponse res) {Integer id = Integer.parseInt(req.getParameter("clazzid"));ClazzDao clazzDao = new ClazzDao();if(clazzDao.deleteClazz(id)){try {res.getWriter().write("success");} catch (IOException e) {e.printStackTrace();} finally {clazzDao.closeCon();}}
}

后面的操作和上面的步骤差不多，只是Dao层所使用的的sql语句不一样，就不进行说明了。

修改功能

  修改操作是在已有数据的基础上进行的，这里需要一个新的按钮，并且触发一个编辑的弹窗出来，便于修改其中的数据。修改按钮也给一个id名称为edit-btn。

$("#edit-btn").click(function(){var selectRow = $("#dataList").datagrid("getSelected");if(selectRow == null){$.messager.alert("消息提醒", "请选择数据进行修改!", "warning");return;}$("#editDialog").dialog("open");
});

  定义了一个selectRow变量用来保存我们所选行的数据，我们之前创建datagrid的时候，我们的列是这样定义的，可以使用datagrid(“getSelected”)来选择到，并且可以获得各个列属性值。

	        columns: [[  {field:'chk',checkbox: true,width:50},{field:'id',title:'ID',width:50, sortable: true},    {field:'name',title:'班级名称',width:200},{field:'info',title:'班级介绍',width:100, },]], 

  后面我们会在ajax中的url请求地址是"ClazzServlet?method=EditClazz"，在这个模块最后，有这样的几行代码，它确保了我们打开弹窗出现的值是之前选择的行中所对应的值。

onBeforeOpen: function(){var selectRow = $("#dataList").datagrid("getSelected");//设置值$("#edit_name").textbox('setValue', selectRow.name);$("#edit_info").val(selectRow.info); // 设置input框的值$("#edit-id").val(selectRow.id);
}

和之前一样，我们需要在doPost中添加代码。

public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{....}else if("EditClazz".equals(method)){editClazz(req,res);}}

  之后再创建一个名为editClazz()的方法，我们获取到，其中id，name，info都是获取的编辑框中填写的值。

	private void editClazz(HttpServletRequest req, HttpServletResponse res) {// TODO Auto-generated method stubInteger id = Integer.parseInt(req.getParameter("id"));String name = req.getParameter("name");String info = req.getParameter("info");Clazz clazz = new Clazz();clazz.setName(name);clazz.setInfo(info);clazz.setId(id);ClazzDao clazzDao = new ClazzDao();if(clazzDao.editClazz(clazz)){try {res.getWriter().write("success");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{clazzDao.closeCon();}}}

  上面也调用到了ClazzDao的方法，如果更改数据库的数据成功之后仍然会返回一个true，方便前台进行处理。

public boolean editClazz(Clazz clazz) {// TODO Auto-generated method stubString sql = "update s_clazz set name= '"+clazz.getName()+"' , info = '"+clazz.getInfo()+"' "+ "where id = '"+ clazz.getId() +"'";return update(sql);
}

关于班级列表的增删改查就基本上整理完了。