easyui增删改查

最新推荐文章于 2022-05-11 23:21:07 发布

原创最新推荐文章于 2022-05-11 23:21:07 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easyui的crud（dialog，datagrid、form讲解）

1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善

陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。

前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json

前端：
代码：
创建userManage.jsp页面：

<%@ 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="${pageContext.request.contextPath }/static/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/easyui5/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/userManage.js"></script>
<title>Insert title here</title>
</head>
<body>
	<table id="dg"></table>
	<!-- 
          自定义属性
      $.extend({
         validType{
           xxx:fun
         }
      })
 -->
	<!-- 新增修改啊对应的编辑窗体 -->
	<div id="dd" class="easyui-dialog" title="编辑窗口"
		style="width: 400px; height: 200px;"
		data-options="iconCls:'icon-save',resizable:true,modal:true,buttons:'#bb',closed:true">

		<form id="ff" method="post">
			<input type="hidden" name="SeriaLNo">
			<div>
				<label for="uid">uid:</label> <input class="easyui-validatebox"
					type="text" name="name" data-options="required:true" />
			</div>
			<div>
				<label for="uname">uname:</label> <input class="easyui-validatebox"
					type="text" name="uname" data-options="required:true" />
			</div>
			<div>
				<label for="upwd">"upwd":</label> <input class="easyui-validatebox"
					type="text" name="upwd" data-options="required:true" />
			</div>
		</form>
	</div>

<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="on()">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>

</body>
</html>

在这里插入图片描述
把demo里面的json文件放到jsp同一目录中
datagrid_data1.json：

{"total":28,"rows":[
	{"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

创建userManage.js文件：

$(function(){
	$('#dg').datagrid({    
	    url:'../userAction.action?methodName=list', 
	    pagination:true,  // 分页
	    fitColumns:true, // 挤满
	    columns:[[    
	        {field:'uid',title:'账号',width:100},    
	        {field:'uname',title:'名称',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]] ,
	    toolbar: [{
			iconCls: 'icon-add',
			handler: function(){
				$('#ff').form('clear');
				$('#dd').dialog('open');
				$('#method').val('add');
				$('#dg').datagrid('reload');
			}
		},{
			iconCls: 'icon-edit',
			handler: function(){
//				获取easyui的from控件直接回填
				var row= $('#dg').datagrid('getSelected');  
				if(row){
//					回显数据
					$('#ff').form('load','get_data.php');
					$('#method').val('edit');
				}else{
					alert("请选择你要修改的选择项");
				}
			}
		},'-',{
			iconCls: 'icon-remove',
			handler: function(){
    			var row = $('#dg').datagrid('getSelected');
//    			选中
    			if(row){
					if(confirm('确定删除吗?')){
						$('#name').text('删除');
						$('#name').attr('value','del');
						//刷新
						$('#ff').form('load',row);
						ok();
					}
				}
				else{
					alert('请选中你要删除的选择项');
				}
			}
    	}]
	}); 
});
function ok(){
	$('#ff').form('submit', {    
	    url:'../userAction.action?methodName=edit',
	    success:function(data){    
//	    	将json串转换成json对象
	        var res=eval('('+data+')');
//	       返回1代表成功，0代表失败，还有业务逻辑需要处理的话，由前端完成
	        alert(res.code);
	        if(res.code ==1){
	        	$('#dd').dialog('close'); 
	        	$('#dg').datagrid("reload");
	        	$('#ff').form('clear');
	        }else{
	        	
	        }
	    }    
	});  
	function del() {
		$('#del').form('submit', {    
		    url:'../userAction.action?methodName=del',    
		    success:function(data){  
//              返回1代表成功，0代表失败，还有业务逻辑需要处理的话，由前端完成
//              将json串转成json对象
		    	var res = eval('('+data+')');
		        if(res.code == 1){
//		        刷新
		        $('#dg').datagrid('reload')
		        }else{
		        	
		        }
		    }    
		}); 
}
}

后端：
dao层：
UserDao：

package com.xhh.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.xhh.util.JsonBaseDao;
import com.xhh.util.JsonUtils;
import com.xhh.util.PageBean;
import com.xhh.util.StringUtils;


public class UserDao extends JsonBaseDao {
	/**
	 * 用于查询用户分页列表所用
	 * 用于用户登录所用
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> list(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_user_version2 where true ";
		String uid = JsonUtils.getParamVal(map, "uid");
		String upwd = JsonUtils.getParamVal(map, "upwd");
		if(StringUtils.isNotBlank(uid)) {
			sql += " and uid = "+uid;
		}
		if(StringUtils.isNotBlank(upwd)) {
			sql += " and upwd = "+upwd;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 通过用户登录的唯一账号，在用户父权限中间表中获取菜单ID的集合
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> getMenusByUser(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_usermenu where true ";
		String uid = JsonUtils.getParamVal(map, "uid");
		if(StringUtils.isNotBlank(uid)) {
			sql += " and uid = "+uid;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 修改
	 * @param map
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 */
	public int edit(Map<String, String[]> map) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{
		String sql = "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno = ?";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, map);
	}
	
	/**
	 * 增加
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int add(Map<String, String[]> map) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="insert into t_easyui_user_version2 values(?,?,?)";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd"} , map);
	}
	
    /**
     * 删除
     * @param paMap
     * @return
     * @throws NoSuchFieldException
     * @throws SecurityException
     * @throws IllegalArgumentException
     * @throws IllegalAccessException
     * @throws SQLException
     */
	public int del(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="delete from t_easyui_user_version2 where SerialNo=?";
		return super.executeUpdate(sql, new String[] {"SerialNo"} , paMap);
	}

}

web层：

package com.xhh.web;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.xhh.dao.UserDao;
import com.xhh.util.PageBean;
import com.xhh.util.ResponseUtil;
import com.zking.framework.ActionSupport;

public class UserAction extends ActionSupport {
	private UserDao userDao = new UserDao();

	public String login(HttpServletRequest req, HttpServletResponse resp) {
		String code = "index";
		// 登录
		try {
			List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null);
			if (list != null && list.size() == 1) {
				// 用户存在
				List<Map<String, Object>> menuList = this.userDao.getMenusByUser(req.getParameterMap(), null);
				StringBuilder sb = new StringBuilder();
				for (Map<String, Object> map : menuList) {
					sb.append(","+map.get("menuId"));
				}
//				,001,002
				req.setAttribute("menuIds", sb.substring(1));
			} else {
				// 用户不存在
				req.setAttribute("msg", "用户不存在");
				code = "login";
			}
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
			code = "login";
		}
		return code;

	}
	
	/**
	 * easyui的datagrid的数据来源
	 * @param req
	 * @param resp
	 * @return
	 */
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map = new HashMap<String, Object>();
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		try {
			List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean);
			map.put("total", pageBean.getTotal());
			map.put("rows", list);
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 修改
	 * @param req
	 * @param resp
	 * @return
	 */
	public String edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			this.userDao.edit(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("code", 1);
			map.put("msg", "成功");
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 增加
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String add(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		this.userDao.add(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("code", 1);
		map.put("msg", "成功");
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}

	/**
	 * 删除
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String del(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		this.userDao.del(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("code", 1);
		map.put("msg", "成功");
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
}

配置xml:

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<!-- <action path="/regAction" type="test.RegAction">
		<forward name="failed" path="/reg.jsp" redirect="false" />
		<forward name="success" path="/login.jsp" redirect="true" />
	</action> -->
	
	<action path="/menuAction" type="com.xhh.web.MenuAction">
	</action>
	<action path="/userAction" type="com.xhh.web.UserAction">
		<forward name="index" path="/index.jsp" redirect="false" />
		<forward name="login" path="/login.jsp" redirect="false" />
	</action>
</config>

效果：
在这里插入图片描述