文章目录
添加的实现
dao层写添加user与修改user的方法
//实现管理员的添加操作
public int userAdd(Connection con,User user)throws Exception{
//数据库中的添加语句
String sql="insert into t_user values(null,?,?)";
//把SQL语句传到数据库中去
PreparedStatement pstmt=con.prepareStatement(sql);
//按照顺序给上面的两个问号传参数
pstmt.setString(1, user.getUserName());
pstmt.setString(2, user.getPassword());
//返回结果集
return pstmt.executeUpdate();
}
//修改功能的实现
public int userModify(Connection con,User user)throws Exception{
String sql="update t_user set userName=?,password=? where id=?";
//把SQL语句传到数据库中去
PreparedStatement pstmt=con.prepareStatement(sql);
//按照顺序给上面的两个问号传参数
pstmt.setString(1, user.getUserName());
pstmt.setString(2, user.getPassword());
pstmt.setInt(3, user.getId());
return pstmt.executeUpdate();
}
前台代码
弹框的实现
<div id="dlg" class="easyui-dialog" style="width: 400px;height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table>
<tr>
<td>管理员姓名：</td>
<td><input type="text" name="userName" id="userName"
class="easyui-validatebox" required="true"/></td>
</tr>
<tr>
<td valign="top">管理员密码</td>
<!-- 控制行和列 -->
<td><textarea rows="7" cols="30" name="password" id="password"></textarea></td>
</tr>
</table>
</form>
</div>
现在这个页面的完整的代码是这样的
<%@ 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 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">
<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>
<title>管理员管理</title>
<script type="text/javascript">
function searchManager() {
//全是ajax调用的，因为我们只用对局部的数据进行变动
//datagrid方法，引入的是下面的table的id，并且是可以自己加参数的
$('#dg').datagrid('load',{
//jQuery的知识点
userName:$('#s_userName').val()
});
}
//实现删除的方法
function deleteManager() {
//获取选中行的一个集合
var selectedRows=$("#dg").datagrid('getSelections');
if(selectedRows.length==0){
//这个是easyUI自带的提醒框
$.messager.alert("系统提示","请选择要删除的数据!");
return;
}
var strIds=[];//定义一个数组，获取所选内容的id
for(var i=0;i<selectedRows.length;i++){
strIds.push(selectedRows[i].id);//指明是第几个对象，并取出这个对象中的id属性，塞给这个数组
}
//将数组拼接成一个字符串，这个字符串中每个元素是以逗号分隔的
var ids=strIds.join(",");
$.messager.confirm("系统提示","您确定要删除这<font color=red>"
+selectedRows.length+"</font>条数据吗？",function(r){
if(r){
//上面的r是true或false，如果用户点确认，就是true
//下面的是ajax的一个异步提交，提交的url是managerDelete，post方法，json的数据格式
//提交的数据是ids这个串，后台以delIds这个属性名来获取，传回的是result，它有两个属性，这是后台自己写的
$.post("managerDelete",{delIds:ids},function(result){
if(result.success){
$.messager.alert("系统提示","您已成功删除<font color=red>"+result.delNums+"</font>条数据！");
//这句话的作用是刷新
$("#dg").datagrid("reload");
}else{
$.messager.alert('系统提示','<font color=red>'+result.errorMsg+'</font>');
}
},"json");
}
});
}
</script>
</head>
<body style="margin: 5px;">
<table id="dg" title="管理员信息管理" class="easyui-datagrid" fitColumns="true" pagination="true"
pagination="true" rownumbers="true" fit="true" url="managerList" toolbar="#tb" >
<thead>
<tr>
<th field="cb" checkbox="true"></th>
<th field="id" width="8%">编号</th>
<th field="userName" width="20%">管理员姓名</th>
<th field="password" width="72%">管理员密码</th>
</tr>
</thead>
</table>
<div id="tb">
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteManager()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<div>
管理员姓名：<input type="text" name="s_userName" id="s_userName"/>
<a href="javascript:searchManager()" class="easyui-linkbutton" iconCls="icon-search" plain="true"> 查找</a>
</div>
</div>
<div id="dlg" class="easyui-dialog" style="width: 400px;height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table>
<tr>
<td>管理员姓名：</td>
<td><input type="text" name="userName" id="userName"
class="easyui-validatebox" required="true"/></td>
</tr>
<tr>
<td valign="top">管理员密码</td>
<!-- 控制行和列 -->
<td><textarea rows="7" cols="30" name="password" id="password"></textarea></td>
</tr>
</table>
</form>
</div>
</body>
</html>
效果图
写js的方法，实现打开弹框
给添加一个js方法
<div>
<a href="javascript:openManagerAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteManager()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
js的代码如下
//打开弹框的方法
function openManagerAddDialog() {
//给功能框加入一个标题
$("#dlg").dialog("open").dialog("setTitle","添加管理员");
}
给弹框加两个按钮
<div id="dlg-buttons">
<a href="javascript:savaUser()" class="easyui-linkbutton"
iconCls="icon-ok">保存</a>
<a href="javascript:closeUserDialog()" class="easyui-linkbutton"
iconCls="icon-cancel">关闭</a>
</div>
效果图
实现关闭按钮的方法
//关闭弹框的方法
function closeUserDialog() {
$("#dlg").dialog("close");
}
补写一个清空的方法
一般情况下，我们关闭了这个弹框之后，是应该把这个弹框中我们填写的内容清空的
//下面的函数是用来解决上面关闭的时候内容没清空的bug
function resetValue() {
//这个是jQuery的知识
//直接通过id来获取这个id相对应的信息
$("#userName").val("");
$("#password").val("");
}
因此，我们的关闭的方法应该写成这样的
//关闭弹框的方法
function closeUserDialog() {
$("#dlg").dialog("close");
resetValue();
}
定义一个全局变量url
由于我们的修改和保存的代码的后台处理Servlet的相似度很高，所以就放在一起了，因此，我们进行修改和添加的时候，用的url是一样的，只是url中的数据不一样
在打开弹框的时候，给url赋值，现在这个方法变成这样了
//打开弹框的方法
function openManagerAddDialog() {
//给功能框加入一个标题
$("#dlg").dialog("open").dialog("setTitle","添加管理员");
url="managerSave";
}
实现保存按钮的方法
//用easyUI封装的一个东西
function savaUser() {
$("#fm").form("submit",{
url:url,//这个是上面的url
onSubmit:function(){//这个在提交之前会执行，主要是用来验证你到底有没有填写数据
//这里的this指的是form那个对象
return $(this).form("validate");
},
success:function(result){
if(result.errorMsg){
$.messager.alert("系统提示",result.errorMsg);
return;
}else{
$.messager.alert("系统提示","保存成功");
resetValue();
//保存成功之后，关闭弹框
$("#dlg").dialog("close");
//重新加载
$("#dg").datagrid("reload");
}
}
});
}
搭建后台的Servlet
配置web.xml文件
<servlet>
<description></description>
<servlet-name>managerSaveServlet</servlet-name>
<servlet-class>web.ManagerSaveServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>managerSaveServlet</servlet-name>
<url-pattern>/managerSave</url-pattern>
</servlet-mapping>
Servlet代码
package web;
import java.io.IOException;
import java.sql.Connection;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.UserDao;
import model.User;
import net.sf.json.JSONObject;
import util.DbUtil;
import util.ResponseUtil;
public class ManagerSaveServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
DbUtil dbUtil=new DbUtil();
UserDao userDao=new UserDao();
public ManagerSaveServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取前台form表单中提交过来的数据
request.setCharacterEncoding("UTF-8");
String userName=request.getParameter("userName");
String password=request.getParameter("password");
User user=new User(userName, password);
Connection con=null;
try {
con=dbUtil.getCon();
JSONObject result=new JSONObject();
int saveNums=userDao.userAdd(con, user);
if (saveNums>0) {
result.put("success", "true");
}else{
result.put("success", "true");
result.put("errorMsg", "删除失败");
}
ResponseUtil.write(response, result);
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
dbUtil.closeCon(con);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
其中：request.setCharacterEncoding(“UTF-8”);能解决异步提交的乱码问题
修改的实现
前台代码
先在修改的部分加一个方法
<div id="tb">
<div>
<a href="javascript:openManagerAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="javascript:openManagerModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteManager()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<div>
管理员姓名：<input type="text" name="s_userName" id="s_userName"/>
<a href="javascript:searchManager()" class="easyui-linkbutton" iconCls="icon-search" plain="true"> 查找</a>
</div>
</div>
先实现简单的js的逻辑处理
function openManagerModifyDialog() {
//获取选中行的一个集合
var selectedRows=$("#dg").datagrid('getSelections');
if(selectedRows.length!=1){
//这个是easyUI自带的提醒框
$.messager.alert("系统提示","请选择一条要编辑的数据!");
return;
}
$("#dlg").dialog("open").dialog("setTitle","编辑管理员");
}
现在完善整个前台的代码
function openManagerModifyDialog() {
//获取选中行的一个集合
var selectedRows=$("#dg").datagrid('getSelections');
if(selectedRows.length!=1){
//这个是easyUI自带的提醒框
$.messager.alert("系统提示","请选择一条要编辑的数据!");
return;
}
var row=selectedRows[0];
$("#dlg").dialog("open").dialog("setTitle","编辑管理员");
$("#fm").form("load",row);//把这一行的数据塞进form里面，form表单中是我们的user的三大属性
url="managerSave?id="+row.id;
}
修改后台的代码
package web;
import java.io.IOException;
import java.sql.Connection;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.UserDao;
import model.User;
import net.sf.json.JSONObject;
import util.DbUtil;
import util.ResponseUtil;
import util.StringUtil;
public class ManagerSaveServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
DbUtil dbUtil=new DbUtil();
UserDao userDao=new UserDao();
public ManagerSaveServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取前台form表单中提交过来的数据
request.setCharacterEncoding("UTF-8");
String userName=request.getParameter("userName");
String password=request.getParameter("password");
String id=request.getParameter("id");
User user=new User(userName, password);
if(StringUtil.isNotEmpty(id)){
user.setId(Integer.parseInt(id));
}
Connection con=null;
try {
con=dbUtil.getCon();
int saveNums=0;
JSONObject result=new JSONObject();
if(StringUtil.isNotEmpty(id)){
saveNums=userDao.userModify(con, user);
}else{
saveNums=userDao.userAdd(con, user);
}
if (saveNums>0) {
result.put("success", "true");
}else{
result.put("success", "true");
result.put("errorMsg", "删除失败");
}
ResponseUtil.write(response, result);
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
dbUtil.closeCon(con);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
2167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
