java整合easyui進行的增刪改操作，java整合easyui增刪

java整合easyui進行的增刪改操作，java整合easyui增刪

首先發一下

顯示所有使用者資訊

添加使用者資訊

刪除使用者資訊

編輯使用者資訊

下面就來介紹一下easyui的crud,在java中是怎麼與後台進行交換的

前台html頁面，我將它命名為crud1.html

1.首先是一個datagrid，通過class來標記，

關於url 直接給出官方的解釋： To load data from remote server, you should set 'url' peoperty, where server will return JSON format data

其次是pagination(分頁),它的官方解釋是

set 'pagination' property to true, which will generate a pagination bar on datagrid bottom. The pagination will send two parameters to server:

• page: The page number, start with 1.
• rows: The page rows per page.

接著關於thread官方的解釋是 datagrid columns is defined in <thead> markup(datagrid的列是定義在<thread>標記之中的)

2.工具列

關於工具列，We don't need to write any javascript code, attach a toolbar to the datagrid via 'toolbar' attribute.

工具列中通過定義時所寫的onclick方法來完成調用。

3.工具列中定義的方法

方法位於js中，舉例，如：newUser這個方法

點擊"添加使用者"這個工具列，就會調用js中的newUser()方法

(1)開啟 id為dlg的對話方塊，並且對話方塊的標題設定為 "添加使用者"

$("#dlg").dialog('open').dialog('setTitle','添加使用者');

(2)對話方塊的定義，在body之中是這樣定義的，此處不多解釋

<div id="dlg" class="easyui-dialog" style="width:400px;height:250px;padding:10px 20px"            closed="true" buttons="#dlg-buttons">        <form id="fm" method="post">        <table cellspacing="10px;">        <tr>        <td>姓名：</td>        <td><input name="name" class="easyui-validatebox" required="true" style="width: 200px;"></td>        </tr>        <tr>        <td>聯絡電話：</td>        <td><input name="phone" class="easyui-validatebox" required="true" style="width: 200px;"></td>        </tr>        <tr>        <td>Email：</td>        <td><input name="email" class="easyui-validatebox" validType="email" required="true" style="width: 200px;"></td>        </tr>        <tr>        <td>QQ：</td>        <td><input name="qq" class="easyui-validatebox" required="true" style="width: 200px;"></td>        </tr>        </table>        </form></div>    <div id="dlg-buttons"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">儲存</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">關閉</a></div>

(3)清除對話方塊的內容

$('#fm').form('clear');

(4)通過ajax與後台java程式進行互動

url='userSave';

背景java程式是這樣的

接受使用者傳進來的四個值，完成資料庫的相關操作，然後將result的返回值，放到一個jsonObject之中

public class UserSaveServlet extends HttpServlet{/** *  */private static final long serialVersionUID = 1L;DbUtil dbUtil=new DbUtil();UserDao userDao=new UserDao();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String name=request.getParameter("name");String phone=request.getParameter("phone");String email=request.getParameter("email");String qq=request.getParameter("qq");String id=request.getParameter("id");User user=new User(name, phone, email, qq);if(StringUtil.isNotEmpty(id)){user.setId(Integer.parseInt(id));}Connection con=null;try {int saveNums=0;con=dbUtil.getCon();JSONObject result=new JSONObject();if(StringUtil.isNotEmpty(id)){saveNums=userDao.userModify(con, user);}else{saveNums=userDao.userAdd(con, user);}if(saveNums==1){result.put("success", "true");}else{result.put("success", "true");result.put("errorMsg", "儲存成功");}ResponseUtil.write(response, result);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}

好，以上就是完整的easyui和後台java程式的互動過程。

下面貼出完整代碼：

項目結構：

資料庫建表語句：就是一個t_user表

/*SQLyog 企業版 - MySQL GUI v8.14 MySQL - 5.1.49-community : Database - db_easyui**********************************************************************//*!40101 SET NAMES utf8 */;/*!40101 SET SQL_MODE=''*/;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;CREATE DATABASE /*!32312 IF NOT EXISTS*/`db_easyui` /*!40100 DEFAULT CHARACTER SET utf8 */;USE `db_easyui`;/*Table structure for table `t_user` */DROP TABLE IF EXISTS `t_user`;CREATE TABLE `t_user` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `name` varchar(20) DEFAULT NULL,  `phone` varchar(20) DEFAULT NULL,  `email` varchar(20) DEFAULT NULL,  `qq` varchar(20) DEFAULT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8;/*Data for the table `t_user` */

前台頁面 crud1.html

<html><head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/demo/demo.css"><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script><script>var url;function deleteUser(){var row=$('#dg').datagrid('getSelected');if(row){$.messager.confirm("系統提示","您確定要刪除這條記錄嗎?",function(r){if(r){$.post('userDelete',{delId:row.id},function(result){if(result.success){$.messager.alert("系統提示","已成功刪除這條記錄!");$("#dg").datagrid("reload");}else{$.messager.alert("系統提示",result.errorMsg);}},'json');}});}}function newUser(){$("#dlg").dialog('open').dialog('setTitle','添加使用者');$('#fm').form('clear');url='userSave';}function editUser(){var row=$('#dg').datagrid('getSelected');if(row){$("#dlg").dialog('open').dialog('setTitle','編輯使用者');$('#fm').form('load',row);url='userSave?id='+row.id;}}function saveUser(){$('#fm').form('submit',{url:url,onSubmit:function(){return $(this).form('validate');},success:function(result){var result=eval('('+result+')');if(result.errorMsg){$.messager.alert("系統提示",result.errorMsg);return;}else{$.messager.alert("系統提示","儲存成功");$('#dlg').dialog('close');$("#dg").datagrid("reload");}}});}</script></head><body><table id="dg" title="使用者管理" class="easyui-datagrid" style="width:700px;height:365px"            url="userList"            toolbar="#toolbar" pagination="true"            rownumbers="true" fitColumns="true" singleSelect="true">        <thead>            <tr>            <th field="id" width="50" hidden="true">編號</th>                <th field="name" width="50">姓名</th>                <th field="phone" width="50">電話</th>                <th field="email" width="50">Email</th>                <th field="qq" width="50">QQ</th>            </tr>        </thead>    </table>    <div id="toolbar">        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加使用者</a>        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">編輯使用者</a>        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">刪除使用者</a>    </div><div id="dlg" class="easyui-dialog" style="width:400px;height:250px;padding:10px 20px"            closed="true" buttons="#dlg-buttons">        <form id="fm" method="post">        <table cellspacing="10px;">        <tr>        <td>姓名：</td>        <td><input name="name" class="easyui-validatebox" required="true" style="width: 200px;"></td>        </tr>        <tr>        <td>聯絡電話：</td>        <td><input name="phone" class="easyui-validatebox" required="true" style="width: 200px;"></td>        </tr>        <tr>        <td>Email：</td>        <td><input name="email" class="easyui-validatebox" validType="email" required="true" style="width: 200px;"></td>        </tr>        <tr>        <td>QQ：</td>        <td><input name="qq" class="easyui-validatebox" required="true" style="width: 200px;"></td>        </tr>        </table>        </form></div>    <div id="dlg-buttons"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">儲存</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">關閉</a></div></body>

model層對user表和pageBean的封裝

public class PageBean {private int page; // 第幾頁private int rows; // 每頁的記錄數private int start; // 起始頁        //省略get和set方法}

public class User {private int id;private String name;private String phone;private String email;private String qq;public User() {}public User(String name, String phone, String email, String qq) {this.name = name;this.phone = phone;this.email = email;this.qq = qq;}        //省略get和set方法 }

工具類：

(1)串連資料庫的類

public class DbUtil {private String dbUrl="jdbc:mysql://localhost:3306/db_easyui";private String dbUserName="root";private String dbPassword="root";private String jdbcName="com.mysql.jdbc.Driver";public Connection getCon()throws Exception{Class.forName(jdbcName);Connection con=DriverManager.getConnection(dbUrl,dbUserName,dbPassword);return con;}public void closeCon(Connection con)throws Exception{if(con!=null){con.close();}}}

(2)將result轉換成json數組的工具類public class JsonUtil {/** * 將result的結果集轉化成json數組格式 * @param rs * @return * @throws Exception */public static JSONArray formatRsToJsonArray(ResultSet rs)throws Exception{ResultSetMetaData md=rs.getMetaData();int num=md.getColumnCount();JSONArray array=new JSONArray();while(rs.next()){JSONObject mapOfColValues=new JSONObject();for(int i=1;i<=num;i++){mapOfColValues.put(md.getColumnName(i), rs.getObject(i));}array.add(mapOfColValues);}return array;}}

(3)向頁面輸出資訊的類

public class ResponseUtil {public static void write(HttpServletResponse response,Object o)throws Exception{response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();out.print(o.toString());out.flush();out.close();}}

下面是控制層controller 

刪除使用者資訊的controller

public class UserDeleteServlet extends HttpServlet{/** *  */private static final long serialVersionUID = 1L;DbUtil dbUtil=new DbUtil();UserDao userDao=new UserDao();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// String delId=request.getParameter("delId");String delId=request.getParameter("delId");Connection con=null;try {con=dbUtil.getCon();JSONObject result=new JSONObject();int delNums=userDao.userDelete(con, delId);if(delNums==1){result.put("success", "true");}else{result.put("errorMsg", "刪除失敗");}ResponseUtil.write(response, result);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}

顯示使用者資訊的controller

public class UserListServlet extends HttpServlet{/** *  */private static final long serialVersionUID = 1L;DbUtil dbUtil=new DbUtil();UserDao userDao=new UserDao();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String page=request.getParameter("page");String rows=request.getParameter("rows");PageBean pageBean=new PageBean(Integer.parseInt(page),Integer.parseInt(rows));Connection con=null;try {con=dbUtil.getCon();JSONObject result=new JSONObject();JSONArray jsonArray=JsonUtil.formatRsToJsonArray(userDao.userList(con, pageBean));int total=userDao.userCount(con);result.put("rows", jsonArray);result.put("total", total);ResponseUtil.write(response, result);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}

儲存使用者資訊的controller

public class UserSaveServlet extends HttpServlet{/** *  */private static final long serialVersionUID = 1L;DbUtil dbUtil=new DbUtil();UserDao userDao=new UserDao();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String name=request.getParameter("name");String phone=request.getParameter("phone");String email=request.getParameter("email");String qq=request.getParameter("qq");String id=request.getParameter("id");User user=new User(name, phone, email, qq);if(StringUtil.isNotEmpty(id)){user.setId(Integer.parseInt(id));}Connection con=null;try {int saveNums=0;con=dbUtil.getCon();JSONObject result=new JSONObject();if(StringUtil.isNotEmpty(id)){saveNums=userDao.userModify(con, user);}else{saveNums=userDao.userAdd(con, user);}if(saveNums==1){result.put("success", "true");}else{result.put("success", "true");result.put("errorMsg", "儲存成功");}ResponseUtil.write(response, result);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}

最後附上設定檔web.xml

<servlet>  <servlet-name>userListServlet</servlet-name>  <servlet-class>com.qzp.web.UserListServlet</servlet-class>  </servlet>    <servlet>  <servlet-name>userDeleteServlet</servlet-name>  <servlet-class>com.qzp.web.UserDeleteServlet</servlet-class>  </servlet>    <servlet>  <servlet-name>userSaveServlet</servlet-name>  <servlet-class>com.qzp.web.UserSaveServlet</servlet-class>  </servlet>    <servlet-mapping>  <servlet-name>userListServlet</servlet-name>  <url-pattern>/userList</url-pattern>  </servlet-mapping>    <servlet-mapping>  <servlet-name>userDeleteServlet</servlet-name>  <url-pattern>/userDelete</url-pattern>  </servlet-mapping>    <servlet-mapping>  <servlet-name>userSaveServlet</servlet-name>  <url-pattern>/userSave</url-pattern>  </servlet-mapping>