easyui【三】

easyui的crud

1、datagrid布局
2、dialog布局
3、form布局

案列(前后端分离)

后台java工程师的工作：写方法返回数据
前端：只管展示数据

我们需要将数据展示到页面上进行增删查改:
写好dao方法(后台):

public class UserDao extends JsonBaseDao{
	/**
	 * 查询用户表验证
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_user_version2 where true";
		String uid = JsonUtils.getParamVal(paMap, "uid");
		String upwd = JsonUtils.getParamVal(paMap, "upwd");
		if(StringUtils.isNotBlank(uid)) {
			sql = sql+" and uid = "+uid;
		}
		if(StringUtils.isNotBlank(upwd)) {
			sql = sql+" and upwd = "+upwd;
		}
		return super.executeQuery(sql, pageBean);
	}
	/**
	 * 修改方法
	 * @param pamap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int edit(Map<String, String[]> pamap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "update t_easyui_user_version2 set uid = ?,uname=?,upwd=? where serialno=?";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, pamap);
	}
	/**
	 * 增加方法
	 * @param pamap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int add(Map<String, String[]> pamap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "insert into t_easyui_user_version2(uid,uname,upwd) value(?,?,?)";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, pamap);
	}
	/**
	 * 删除方法
	 * @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);
	}
}

再在action中调用dao方法(后台):

public class UserAction extends ActionSupport {
	
	private UserDao userDao = new UserDao();
	public String login(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null);
		if(list!=null&&list.size()>0) {
			List<Map<String, Object>> listMenu = this.userDao.listMenu(req.getParameter("uid"), null);
			StringBuilder sb =new StringBuilder();
			for (Map<String, Object> map : listMenu) {
				sb.append(","+map.get("menuId"));
			}
			req.setAttribute("menuHid", sb.substring(1));
		}else {
			return "login";
		}
		return "index";
		
	}
	
	/**
	 * 查询方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean);
		ObjectMapper om = new ObjectMapper();
		Map<String, Object>map = new HashMap<>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		System.out.println(om.writeValueAsString(map));
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
		
	}
	/**
	 * 修改方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String edit(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		int edit = this.userDao.edit(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(edit));
		return null;
	}
	/**
	 * 增加方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String add(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		int add = this.userDao.add(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(add));
		return null;
	}
	/**
	 * 删除方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String del(HttpServletRequest req,HttpServletResponse resp) throws Exception{
		int del = this.userDao.del(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(del));
		return null;
	}
}

写一个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/js/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/js/userManage.js"></script>  
<title>Insert title here</title>
</head>
<body>
<!-- 展示数据用 -->
<table id="dg"></table>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<!-- 弹出框提交表单用 -->
<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">   
		<form id="ff" method="post" style="align-content: center;text-align: center;">  
		<input type="hidden" name="SerialNo"> <br>
		    <div>   
		        <label for="uid">ID:</label>   
		        <input class="easyui-validatebox" type="text" name="uid" data-options="required:true" />   
		    </div><br>  
		    <div>   
		        <label for="uname">姓名:</label>   
		        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
		    </div> <br> 
		    <div>   
		        <label for="upwd">密码:</label>   
		        <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />   
		    </div> 
		</form> 
</div>



<div id="bb">
<button class="easyui-linkbutton" onclick="ok()" id="name" value="edit">保存</button>
<button class="easyui-linkbutton" onclick="">关闭</button>
</div>

</body>
</html>

写外部js(前端):

$(function(){
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/userAction.action?methodName=list',    
	    fitColumns:true,
	    fit:true,
	    pagination:true,
	    columns:[[    
	        {field:'uid',title:'ID',width:100},    
	        {field:'uname',title:'名字',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]],
	    toolbar: [{
			iconCls: 'icon-edit',
			handler: function(){
				//获取选中的第一行的数据
				var row = $('#dg').datagrid('getSelected');
				if(row){
					//回显到表单里
					$('#ff').form('load',row);
					//打开窗体
					$('#dd').dialog('open');
					$('#name').text('修改');
					$('#name').attr('value','edit');
				}else{
					alert('请选中你要修改的项!');
				}
			}
		},'-',{
			iconCls: 'icon-add',
			handler: function(){
				$('#ff').form('clear');
				$('#name').text('增加');
				$('#name').attr('value','add');
				$('#dd').dialog('open');
			}
		},'-',{
			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:$("#ctx").val()+'/userAction.action?methodName='+$('#name').val(),    
	    success: function(param){ 
	    	if(param>0){
	    		alert($('#name').text()+'成功!');
	    		$('#dd').dialog('close');
	    		$('#dg').datagrid('reload');
	    		$('#ff').form('clear');
	    	}
	    	if(param==0){
	    		alert($('#name').text()+'失败!');
	    	}
	    }    
	});  
}

在mvc.xml中配置好:

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/userAction" type="com.web.UserAction">
		<forward name="index" path="/index.jsp" redirect="false" />
	</action>

</config>

效果图:
数据展示:

修改数据:



修改成功:

增加数据:

增加成功:

删除数据:


删除成功: