java整合easyui進行的增刪改操作
阿新 • • 發佈：2018-11-05
首先發一下效果圖：
1、顯示全部使用者資訊
2、加入使用者資訊
3、刪除使用者資訊
4、編輯使用者資訊
以下就來介紹一下如何使用easyui的crud：
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();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected 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 block
e.printStackTrace();
}finally{
try {
dbUtil.closeCon(con);
} catch (Exception e) {
// TODO Auto-generated catch block
e.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 @[email protected]@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @[email protected]@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @[email protected]@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @[email protected]@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();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected 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 block
e.printStackTrace();
}finally{
try {
dbUtil.closeCon(con);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}顯示使用者資訊的controller
public class UserListServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
DbUtil dbUtil=new DbUtil();
UserDao userDao=new UserDao();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected 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 block
e.printStackTrace();
}finally{
try {
dbUtil.closeCon(con);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}儲存使用者資訊的controller
public class UserSaveServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
DbUtil dbUtil=new DbUtil();
UserDao userDao=new UserDao();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected 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 block
e.printStackTrace();
}finally{
try {
dbUtil.closeCon(con);
} catch (Exception e) {
// TODO Auto-generated catch block
e.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>