Layui基本功能（增删改查）

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

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

 

后台功能实现 

数据查看

 

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

查询

userDao方法

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

	/**
	 * List、List

userAction方法

因为我们用的是Layui的框架，所以我们要遵循他的规则来进行一个编写。

我们就用map集合进行保存。后面会用R工具类进行一个优化

public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List> userRole = userDao.userRole(user, pageBean);
		 Map map = new HashMap();
		 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> 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 {

	/**
	 * 查询所有用户
	 * 
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List 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 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、List

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 {

	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> userRole = userDao.userRole(user, pageBean);
		// Map map = new HashMap();
		// 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"%>








	
	

		

			用户名：
			

				
			
		

		

			

				
					 查询
				
				新增
			
		

	
	
	
 

 

js（userManage.js）

记得我们在userManage.jsp里面导入

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方法，这是一个把数据进行一个绑定的方法，做一个数据回显

运行效果

我么要编写一个数据重载的方法，并且在查询的按钮上设置一个点击事件还要调用重载的方法。

$("#btn_search").click(function() {
		query();
	});

/**
 * 表格重载
 * 
 * @returns
 */
function query() {
	table.reload('userTable', {
		where : { // 设定异步数据接口的额外参数，任意设
			name : $("#name").val()
		},
		request : {
			pageName : 'page' // 页码的参数名称，默认：page
			,
			limitName : 'rows' // 每页数据量的参数名，默认：limit 我们的定义的是rows，所以更改为rows
		}
	}); // 只重载数据
}

这样我们就可以进行搜索了

增加、修改

jsp界面（userEdit.js）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>









	

		

			
			

				用户名称
				

					
				
			
			

				用户角色
				

					
						---请选择---
						管理员
						发起者
						审批者
						参与者
						会议管理员
					
				
			
			

				登录账号
				

					
				
			
			

				登录密码
				

					
				
			
		
	

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('编辑');
		}
	});

我们进行一个编辑 

 

删除

我们在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

删除之后会进行一个刷新

 

我们就删除完成了 

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

后续我会加上源码！