Layui基本功能快速上手（增删改查）

墨蓝 2024-03-17 20:12 28阅读 0赞

> 话不多说，根据我前面的博客我们直接进行操作。  
> 记住以下的文件放置，防止操作出不来.

![77e6e4e904694367aef99ae134834b49.png][]

> 这是我们要完成的界面及功能

![4c1ce60d4a304c5f803b4f1423836b24.png][]

![6f44825b001541099709f2166935086b.png][]

## 后台功能实现 ##

> 数据查看
> 
> ![332dcf9c61b9496d94af823ffde995fa.png][]

1.  **我们在userDao方法里面进行增删改查的方法**
2.  **我们在userAction进行方法的编写**
3.  **R工具类的介绍**

### 查询 ###

**userDao方法**

> 因为我们的数据库的rid需要转成权限名，我们sql就要写case函数进行编写sql

/**
    	 * List<User>、List<Map>都是转成json数组 查询结果携带rname
    	 * 
    	 * @param user
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
    		String sql = "select u.*,\r\n" + "(case u.rid\r\n" + "when 1 then '管理员'\r\n" + "when 2 then '发起者'\r\n"
    				+ "when 3 then '审批者'\r\n" + "when 4 then '参与者'\r\n" + "when 5 then '会议管理员'\r\n"
    				+ "else '其他角色' end) as rname\r\n" + "from t_oa_user u where 1=1";
    		String name = user.getName();
    		if (StringUtils.isNotBlank(name))
    			sql += " and name like '%" + name + "%'";
    		return super.executeQuery(sql, pageBean);
    	}

**userAction方法**

> 因为我们用的是Layui的框架，所以我们要遵循他的规则来进行一个编写。
> 
> 我们就用map集合进行保存。后面会用R工具类进行一个优化

public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		PageBean pageBean = new PageBean();
    		pageBean.setRequest(req);
    		List<Map<String, Object>> userRole = userDao.userRole(user, pageBean);
    		 Map<String, Object> map = new HashMap<String, Object>();
    		 map.put("code", "0");
    		 map.put("masg", "查询成功");
    		 map.put("count", pageBean.getTotal());
    		 map.put("data", userRole);
    		 ResponseUtil.writeJson(resp, map);
    
    		ResponseUtil.writeJson(resp, map);
    	}

### **R工具类的介绍** ###

> R工具类可以更好的进行代码的优化

package com.zking.util;
    
    import java.util.HashMap;
    
    public class R extends HashMap{
    	public R data(String key, Object value) {
    		this.put(key, value);
    		return this;
    	}
    	
    	public static R ok(int code, String msg) {
    		R r = new R();
    		r.data("success", true).data("code", code).data("msg", msg);
    		return r;
    	}
    	
    	public static R error(int code, String msg) {
    		R r = new R();
    		r.data("success", false).data("code", code).data("msg", msg);
    		return r;
    	}
    	
    	public static R ok(int code, String msg,Object data) {
    		R r = new R();
    		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
    		return r;
    	}
    	
    	public static R ok(int code, String msg, long count, Object data) {
    		R r = new R();
    		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
    		return r;
    	}
    }

> 我们在userAction查询的方法上进行一个R工具类的使用
> 
>     public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
>     		PageBean pageBean = new PageBean();
>     		pageBean.setRequest(req);
>     		List<Map<String, Object>> userRole = userDao.userRole(user, pageBean);
>     		// 利用R工具类
>     		ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));
>     	}
> 
> 这样我们就进行了一个代码的优化。后面的代码我们也可以用R工具类的优化

### 增加 ###

**userDao**

/**
    	 * 增加用户
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int add(User user) throws Exception {
    		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd" });
    	}

**userAction**

public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		int i = userDao.add(user);
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));
    	}

### 修改 ###

**userDao**

/**
    	 * 修改用户
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int edit(User user) throws Exception {
    		String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
    		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd", "id" });
    	}

**userAction**

public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		int i = userDao.edit(user);
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));
    	}

### 删除 ###

**userDao**

/**
    	 * 删除用户
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int del(User user) throws Exception {
    		String sql = "delete from t_oa_user where id = ?";
    		return super.executeUpdate(sql, user, new String[] { "id" });
    	}

**userAction**

public void del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		int i = userDao.del(user);
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));
    	}

### 后台完整代码 ###

**userDao**

package com.zking.dao;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.List;
    import java.util.Map;
    
    import com.zking.entity.User;
    import com.zking.util.BaseDao;
    import com.zking.util.DBAccess;
    import com.zking.util.PageBean;
    import com.zking.util.StringUtils;
    
    /**
     * 
     * @author tgq
     *
     */
    public class UserDao extends BaseDao<User> {
    
    	/**
    	 * 查询所有用户
    	 * 
    	 * @param user
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<User> list(User user, PageBean pageBean) throws Exception {
    		String sql = "select * from t_oa_user where 1=1";
    		return super.executeQuery(sql, User.class, pageBean);
    	}
    
    	/**
    	 * 获取实体类
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public User login(User user) throws Exception {
    		String sql = "select * from t_oa_user where loginName = '" + user.getLoginName() + "' and pwd = '"
    				+ user.getPwd() + "'";
    		List<User> list = super.executeQuery(sql, User.class, null);
    		if (list != null && list.size() == 1) {
    			return list.get(0);
    		}
    
    		return null;
    	}
    
    	/**
    	 * 获取用户最大id
    	 * 
    	 * @return
    	 * @throws Exception
    	 */
    	public int getMaxId() throws Exception {
    		// 创建连接
    		Connection conn = DBAccess.getConnection();
    		int id = 0;
    		String sql = "select MAX(id) from t_oa_user";
    		PreparedStatement ps = conn.prepareStatement(sql);
    		ResultSet rs = ps.executeQuery();
    		if (rs.next()) {
    			id = rs.getInt(1);
    		}
    		return id;
    	}
    
    	/**
    	 * 注册
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int Register(User user) throws Exception {
    		String sql = "insert into t_oa_user values(?,?,?,?,?)";
    		return super.executeUpdate(sql, user, new String[] { "id", "name", "loginName", "pwd", "rid" });
    	}
    
    	/**
    	 * List<User>、List<Map>都是转成json数组 查询结果携带rname
    	 * 
    	 * @param user
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
    		String sql = "select u.*,\r\n" + "(case u.rid\r\n" + "when 1 then '管理员'\r\n" + "when 2 then '发起者'\r\n"
    				+ "when 3 then '审批者'\r\n" + "when 4 then '参与者'\r\n" + "when 5 then '会议管理员'\r\n"
    				+ "else '其他角色' end) as rname\r\n" + "from t_oa_user u where 1=1";
    		String name = user.getName();
    		if (StringUtils.isNotBlank(name))
    			sql += " and name like '%" + name + "%'";
    		return super.executeQuery(sql, pageBean);
    	}
    
    	/**
    	 * 增加用户
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int add(User user) throws Exception {
    		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd" });
    	}
    
    	/**
    	 * 修改用户
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int edit(User user) throws Exception {
    		String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
    		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd", "id" });
    	}
    
    	/**
    	 * 删除用户
    	 * 
    	 * @param user
    	 * @return
    	 * @throws Exception
    	 */
    	public int del(User user) throws Exception {
    		String sql = "delete from t_oa_user where id = ?";
    		return super.executeUpdate(sql, user, new String[] { "id" });
    	}
    
    }

**userAction**

package com.zking.web;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.zking.dao.UserDao;
    import com.zking.entity.User;
    import com.zking.framework.ActionSupport;
    import com.zking.framework.ModelDriver;
    import com.zking.util.PageBean;
    import com.zking.util.R;
    import com.zking.util.ResponseUtil;
    
    public class UserAction extends ActionSupport implements ModelDriver<User> {
    
    	private User user = new User();
    	private UserDao userDao = new UserDao();
    
    	/**
    	 * 登录
    	 * 
    	 * @param req
    	 * @param resp
    	 * @return
    	 * @throws Exception
    	 */
    	public void login(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		User u = userDao.login(user);
    		ResponseUtil.writeJson(resp, u);
    	}
    
    	/**
    	 * 注册
    	 * 
    	 * @param req
    	 * @param reps
    	 * @throws Exception
    	 */
    	public void Register(HttpServletRequest req, HttpServletResponse reps) throws Exception {
    		String loginName = req.getParameter("loginName");
    		String password = req.getParameter("password");
    		// 先获取最大的id数
    		int maxId = userDao.getMaxId();
    		user = new User(maxId + 1, req.getParameter("name"), loginName, password,
    				Long.parseLong(req.getParameter("rid")));
    		int register = userDao.Register(user);
    		ResponseUtil.writeJson(reps, register);
    
    	}
    
    	public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		PageBean pageBean = new PageBean();
    		pageBean.setRequest(req);
    		List<Map<String, Object>> userRole = userDao.userRole(user, pageBean);
    		// Map<String, Object> map = new HashMap<String, Object>();
    		// map.put("code", "0");
    		// map.put("masg", "查询成功");
    		// map.put("count", pageBean.getTotal());
    		// map.put("data", userRole);
    		// ResponseUtil.writeJson(resp, map);
    
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));
    	}
    
    	public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		int i = userDao.add(user);
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));
    	}
    
    	public void del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		int i = userDao.del(user);
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));
    	}
    
    	public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    		int i = userDao.edit(user);
    		// 利用R工具类
    		ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));
    	}
    
    	@Override
    	public User getModel() {
    		return user;
    	}
    
    }

## 前台功能实现 ##

### 查询 ###

#### jsp界面（userManage.jsp） ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@include file="/common/header.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户管理</title>
    <script src="static/js/system/userManage.js"></script>
    </head>
    <body>
    	
    	<div class="layui-form-item">
    		<div class="layui-inline">
    			<label class="layui-form-label">用户名：</label>
    			<div class="layui-input-inline">
    				<input type="text" id="name" placeholder="请输入用户名" autocomplete="off"
    					class="layui-input">
    			</div>
    		</div>
    
    		<div class="layui-inline">
    			<div class="layui-input-inline">
    				<button id="btn_search" type="button"
    					class="layui-btn layui-btn-normal">
    					<i class="layui-icon layui-icon-search"></i> 查询
    				</button>
    				<button id="btn_add" type="button" class="layui-btn">新增</button>
    			</div>
    		</div>
    
    	</div>
    	
    	<table class="layui-hide" id="userTable" lay-filter="test"></table>
     
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
      </div>
    </script>
     
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    
    </body>
    </html>

#### js（userManage.js） ####

> 记得我们在userManage.jsp里面导入
> 
>     <script src="static/js/system/userManage.js"></script>

var table, $;
    var row;
    layui.use([ 'table', 'jquery' ], function() {
    	table = layui.table;
    	$ = layui.jquery;
    	userinit();
    
    	$("#btn_search").click(function() {
    		query();
    	});
    
    	$("#btn_add").click(function() {
    		row = null;
    		edit('新增界面');
    	});
    
    });
    
    // 打开新增界面
    function edit(title) {
    	layer.open({
    		type : 2, // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    		title : title,
    		area : [ '660px', '340px' ], // 宽高
    		skin : 'layui-layer-rim', // 样式类名
    		content : 'jsp/system/userEdit.jsp', // 书本编辑页面
    		btn : [ '保存', '关闭' ],
    		yes : function(index, layero) {
    			// 调用子页面中提供的getData方法，快速获取子页面的form表单数据
    			let data = $(layero).find("iframe")[0].contentWindow.getData();
    			console.log(data);
    			// 判断title标题
    			let methodName = "add";
    			if (title == "编辑")
    				methodName = "edit";
    			$.post('user.action?methodName=' + methodName, data, function(rs) {
    				if (rs.success) {
    					// 关闭对话框
    					layer.closeAll();
    					// 调用查询方法刷新数据
    					query();
    				} else {
    					layer.msg(rs.msg, function() {
    					});
    				}
    			}, 'json');
    		},
    		btn2 : function(index, layero) {
    			layer.closeAll();
    		}
    	});
    
    }
    
    /**
     * 表格重载
     * 
     * @returns
     */
    function query() {
    	table.reload('userTable', {
    		where : { // 设定异步数据接口的额外参数，任意设
    			name : $("#name").val()
    		},
    		request : {
    			pageName : 'page' // 页码的参数名称，默认：page
    			,
    			limitName : 'rows' // 每页数据量的参数名，默认：limit 我们的定义的是rows，所以更改为rows
    		}
    	}); // 只重载数据
    }
    
    function userinit() {
    
    	table.render({
    		elem : '#userTable',
    		url : 'user.action?methodName=userRole',
    		toolbar : '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
    		,
    		defaultToolbar : [ 'filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    			title : '提示',
    			layEvent : 'LAYTABLE_TIPS',
    			icon : 'layui-icon-tips'
    		} ],
    		title : '用户数据表',
    		cols : [ [ {
    			type : 'checkbox',
    			fixed : 'left'
    		}, {
    			field : 'id',
    			title : 'ID',
    			fixed : 'left',
    			unresize : true,
    			sort : true
    		}, {
    			field : 'name',
    			title : '用户名',
    			edit : 'text'
    		}, {
    			field : 'loginName',
    			title : '用户账号',
    			edit : 'text'
    		},{
    			field : 'pwd',
    			title : '密码',
    			edit : 'text',
    		}, {
    			field : 'rname',
    			title : '权限名',
    		}, {
    			fixed : 'right',
    			title : '操作',
    			toolbar : '#barDemo',
    			width : 150
    		} ] ],
    		page : true
    	});
    
    	// 头工具栏事件
    	table.on('toolbar(test)', function(obj) {
    		var checkStatus = table.checkStatus(obj.config.id);
    		switch (obj.event) {
    		case 'getCheckData':
    			var data = checkStatus.data;
    			layer.alert(JSON.stringify(data));
    			break;
    		case 'getCheckLength':
    			var data = checkStatus.data;
    			layer.msg('选中了：' + data.length + ' 个');
    			break;
    		case 'isAll':
    			layer.msg(checkStatus.isAll ? '全选' : '未全选');
    			break;
    
    		// 自定义头工具栏右侧图标 - 提示
    		case 'LAYTABLE_TIPS':
    			layer.alert('这是工具栏右侧自定义的一个图标按钮');
    			break;
    		}
    		;
    	});
    
    	// 监听行工具事件
    	table.on('tool(test)', function(obj) {
    		row = obj.data;
    		// console.log(obj)
    		if (obj.event === 'del') {
    			layer.confirm('确认删除吗?', {
    				icon : 3,
    				title : '提示'
    			}, function(index) {
    				$.post('user.action', {
    					'methodName' : 'del',
    					'id' : row.id
    				}, function(rs) {
    					if (rs.success) {
    						// 调用查询方法刷新数据
    						query();
    					} else {
    						layer.msg(rs.msg, function() {
    						});
    					}
    				}, 'json');
    				layer.close(index);
    			});
    		} else if (obj.event === 'edit') {
    			edit('编辑');
    		}
    	});
    }

> 记住我们的userinit方法，这是一个把数据进行一个绑定的方法，做一个数据回显

#### **运行效果** ####

![85be55b2d9b54f189f8962f06786baff.png][]

> 我么要编写一个数据重载的方法，并且在查询的按钮上设置一个点击事件还要调用重载的方法。
> 
>     $("#btn_search").click(function() {
>     		query();
>     	});
> 
>     /**
>      * 表格重载
>      * 
>      * @returns
>      */
>     function query() {
>     	table.reload('userTable', {
>     		where : { // 设定异步数据接口的额外参数，任意设
>     			name : $("#name").val()
>     		},
>     		request : {
>     			pageName : 'page' // 页码的参数名称，默认：page
>     			,
>     			limitName : 'rows' // 每页数据量的参数名，默认：limit 我们的定义的是rows，所以更改为rows
>     		}
>     	}); // 只重载数据
>     }
> 
> 这样我们就可以进行搜索了
> 
> ![19328a34df374d24a2bde0fd02f8ba2c.png][]

### 增加、修改 ###

#### **jsp界面（userEdit.js）** ####

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@include file="/common/header.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="static/js/system/userEdit.js"></script>
    <title>用户新增</title>
    </head>
    <style>
    .layui-form-select dl {
    	max-height: 150px;
    }
    </style>
    <body>
    	<div style="padding: 10px;">
    		<form class="layui-form layui-form-pane" lay-filter="user">
    			<input type="hidden" name="id" />
    			<div class="layui-form-item">
    				<label class="layui-form-label">用户名称</label>
    				<div class="layui-input-block">
    					<input type="text" id="name" name="name" autocomplete="off"
    						placeholder="请输入用户名" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">用户角色</label>
    				<div class="layui-input-block">
    					<select name="rid">
    						<option value="">---请选择---</option>
    						<option value="1">管理员</option>
    						<option value="2">发起者</option>
    						<option value="3">审批者</option>
    						<option value="4">参与者</option>
    						<option value="5">会议管理员</option>
    					</select>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">登录账号</label>
    				<div class="layui-input-block">
    					<input type="text" name="loginName" lay-verify="required"
    						placeholder="请输入账号" autocomplete="off" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">登录密码</label>
    				<div class="layui-input-block">
    					<input type="password" name="pwd" placeholder="请输入密码"
    						autocomplete="off" class="layui-input">
    				</div>
    			</div>
    		</form>
    	</div>
    </body>
    </html>

#### js（userEdit.js） ####

let layer, form, $;
    layui.use([ 'layer', 'form', 'jquery' ], function() {
    	layer = layui.layer, form = layui.form, $ = layui.jquery;
    	initData();
    });
    
    function initData() {
    	console.log(parent.row);
    	if (null != parent.row) {
    		// 因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
    		// parent.row：表格行对象
    		form.val('user', $.extend({}, parent.row || {}));
    		$('#name').attr('readonly', 'readonly');
    	}
    }
    
    function getData() {
    	return form.val('user');
    }

> 我们要在userManage.js里面写一个增加和修改的方法
> 
>     function edit(title) {
>     	layer.open({
>     		type : 2, // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
>     		title : title,
>     		area : [ '660px', '340px' ], // 宽高
>     		skin : 'layui-layer-rim', // 样式类名
>     		content : 'jsp/system/userEdit.jsp', // 书本编辑页面
>     		btn : [ '保存', '关闭' ],
>     		yes : function(index, layero) {
>     			// 调用子页面中提供的getData方法，快速获取子页面的form表单数据
>     			let data = $(layero).find("iframe")[0].contentWindow.getData();
>     			console.log(data);
>     			// 判断title标题
>     			let methodName = "add";
>     			if (title == "编辑")
>     				methodName = "edit";
>     			$.post('user.action?methodName=' + methodName, data, function(rs) {
>     				if (rs.success) {
>     					// 关闭对话框
>     					layer.closeAll();
>     					// 调用查询方法刷新数据
>     					query();
>     				} else {
>     					layer.msg(rs.msg, function() {
>     					});
>     				}
>     			}, 'json');
>     		},
>     		btn2 : function(index, layero) {
>     			layer.closeAll();
>     		}
>     	});
>     
>     }
> 
> 我么调用的都是userEdit.jsp的界面
> 
> 在userManage.js监听事件里面我们进行调用edit的方法就行
> 
>     // 监听行工具事件
>     	table.on('tool(test)', function(obj) {
>     		row = obj.data;
>     		// console.log(obj)
>     		if (obj.event === 'del') {
>     			layer.confirm('确认删除吗?', {
>     				icon : 3,
>     				title : '提示'
>     			}, function(index) {
>     				$.post('user.action', {
>     					'methodName' : 'del',
>     					'id' : row.id
>     				}, function(rs) {
>     					if (rs.success) {
>     						// 调用查询方法刷新数据
>     						query();
>     					} else {
>     						layer.msg(rs.msg, function() {
>     						});
>     					}
>     				}, 'json');
>     				layer.close(index);
>     			});
>     		} else if (obj.event === 'edit') {
>     			edit('编辑');
>     		}
>     	});

![8f4ee99d2f8e4ed2b8deee6fe681732e.png][]

> 我们进行一个编辑

![a1e6d1fbc35c4d15b29b0e9e1798ea50.png][]

![f93dcb764e3d41469b5d010e53023cf5.png][]

### 删除 ###

> 我们在userManage.jsp里面的监听事件进行一个删除的提示和调用  
> 
> 
>     // 监听行工具事件
>     	table.on('tool(test)', function(obj) {
>     		row = obj.data;
>     		// console.log(obj)
>     		if (obj.event === 'del') {
>     			layer.confirm('确认删除吗?', {
>     				icon : 3,
>     				title : '提示'
>     			}, function(index) {
>     				$.post('user.action', {
>     					'methodName' : 'del',
>     					'id' : row.id
>     				}, function(rs) {
>     					if (rs.success) {
>     						// 调用查询方法刷新数据
>     						query();
>     					} else {
>     						layer.msg(rs.msg, function() {
>     						});
>     					}
>     				}, 'json');
>     				layer.close(index);
>     			});
>     		} else if (obj.event === 'edit') {
>     			edit('编辑');
>     		}
>     	});
> 
> 我们删除账户sa  
> ![19fbf3c239734de7bb75c694a991184c.png][]
> 
> 删除之后会进行一个刷新
> 
> ![b176ad6215e5477286a86e0bc01d7d31.png][]  
> 
> 
> 我们就删除完成了

分享就到这里，希望对您们有用！！！

后续我会加上源码！

[77e6e4e904694367aef99ae134834b49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/22e22f9719dc41b7a6c79bf564401cfa.png
[4c1ce60d4a304c5f803b4f1423836b24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c09e917a7ee0429489a22b60eb0b5b0d.png
[6f44825b001541099709f2166935086b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/39a5dc27790d4e3394bc80a655932040.png
[332dcf9c61b9496d94af823ffde995fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/30d497d2c4d04f83b8e8cb58183012d4.png
[85be55b2d9b54f189f8962f06786baff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f42e3ca1be1b4070bec41bc41837406b.png
[19328a34df374d24a2bde0fd02f8ba2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0ac36c1cd05943bb90a6ccc42a9f7845.png
[8f4ee99d2f8e4ed2b8deee6fe681732e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0c78bed94e7248bd84d4cb5aab0a7447.png
[a1e6d1fbc35c4d15b29b0e9e1798ea50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/04012ab29efa4f8c8a419bde7a5d68e3.png
[f93dcb764e3d41469b5d010e53023cf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1584cb2740d74f9e8ea7370ffa847689.png
[19fbf3c239734de7bb75c694a991184c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8691131abffb4caf9b091d872b3f6a45.png
[b176ad6215e5477286a86e0bc01d7d31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/35e8af51c886482b94aa88fbd5d38f1d.png