EasyUI《三》

今天我们就来了解下 用easyui实现增删查改

在了解之前我们先来说一下开发模式

一、陈旧的开发者模式

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

二、前后端分离模式

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

UserDao

package com.wangshaoyang.dao;

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

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

import com.wangshaoyang.util.JsonBaseDao;
import com.wangshaoyang.util.JsonUtils;
import com.wangshaoyang.util.PageBean;
import com.wangshaoyang.util.StringUtils;
public class UserDao extends JsonBaseDao {
	/**
	 * 登录查询用户表
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	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+=" and uid="+uid;
		}
		if(StringUtils.isNotBlank(upwd)) {
			sql+=" and upwd="+upwd;
		}
		return super.executeQuery(sql, pageBean);
	}
	/**
	 * 通过中间表查询登录用户所对应的权限
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	
	public List<Map<String, Object>> listMenu(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql="select * from t_easyui_usermenu where true";
		String uid = JsonUtils.getParamVal(paMap, "uid");
		if(StringUtils.isNotBlank(uid)) {
			sql+=" and uid="+uid;
		}
		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 values(?,?,?)";
		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);
	}
}

UserAction

package com.wangshaoyang.web;

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

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

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

public class UserAction extends ActionSupport{
	private UserDao userDao=new UserDao();
	
	public String login(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException {
		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.getParameterMap(), null);
			StringBuffer sb=new StringBuffer();
			for (Map<String, Object> map : listMenu) {
				sb.append(","+map.get("menuId"));
			}
			req.setAttribute("menuHid", sb.substring(1));
		}
		else {
			return "login";
		}
		return "index";
	}
	
	/**
	 * datagrid所需数据后端开发完毕
	 * @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);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
	
	/**
	 * 
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public int 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 edit;
	}
	
	/**
	 * 增加
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public int 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 add;
	}
	/**
	 * 删除
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public int 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 del;
	}
}

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">
<title>Insert title here</title>
<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}/static/js/userManage.js"></script>

</head>
<body>
<!-- 展示数据所用 -->
	<table id="dg"></table>
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath}" />
<!-- 弹出框提交表单所用 -->
	<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,modal:true,buttons:'#bb',closed:true">   
    <form id="ff" method="post">  
    
    <input type="hidden" id="SerialNo" name="SerialNo"  /> 
    <div>   
        <label for="name">uid:</label>   
        <input class="easyui-validatebox" type="text" id="uid" name="uid" data-options="required:true" />   
    </div>   
    <div>   
        <label for="email">uname:</label>   
        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div>   
    <div>   
        <label for="email">upwd:</label>   
        <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />   
    </div>   
</form>     
</div>  

</div>
<div id="bb">
<button href="#" class="easyui-linkbutton" id="method" value="edit" onclick="ok()">保存</button>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>
</body>
</html>

userManage.js

$(function(){
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/UserAction.action?methodName=list',    
	    fitColumns:true,
	    fit:true,
	    pagination:true,
	    columns:[[    
	        {field:'uid',title:'代码',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);
					$("button").attr("value","edit");
					$('#dd').dialog('open');
				}
			}
		},'-',{
			iconCls: 'icon-add',
			handler: function(){
				var row=$('#dg').datagrid('getSelected');
				$("button").attr("value","add");
				alert();
				$('#dd').dialog('open');
			}
		},'-',{
			iconCls: 'icon-remove',
			handler: function(){
				var row=$('#dg').datagrid('getSelected');
				$('#ff').form('load',row);
				if(confirm('你确定要删除吗')){
					$("button").attr("value","del");
					ok();
				}
				
			}
		}]

	}); 
})

function ok(){
	alert($("#method").val());
	$('#ff').form('submit', {    
	    url:$("#ctx").val()+'/UserAction.action?methodName='+$("#method").val(),    
	    success: function(edit){    
	    	$("#dd").dialog('close');
	    	$("#dg").datagrid('reload');
	    	$("#ff").form('clear');
	    }    
	});  
}

然后我们就可以对其进行增删改了

今天就更新到这里
喜欢的可以关注我
不定时更新