easyUI高级控件-03

今天我们用easyUI实现简单的增删改查，要用到的控件有 datagrid布局、dialog布局、form布局，用以上三个布局实现前后端分离。

两种开发模式的对比

陈旧的开发模式

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

现今的开发模式

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

easyUI实现增删改查

我们要从数据库中取出数据，并展示到界面上进行增删改查，我们先来把UserDao完善一下
UserDao

package com.lst.dao;

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

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

public class UserDao extends JsonBaseDao {
	
	/**
	 * 登录查询用户表       登录
	 * @param pamap
	 * @param pageBean
	 * @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
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> listMenu(String uid,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_usermenu where true ";
		if(StringUtils.isNotBlank(uid)) {
			sql = 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 SQLException 
	 * @throws IllegalAccessException 
	 * @throws IllegalArgumentException 
	 * @throws SecurityException 
	 * @throws NoSuchFieldException 
	 */
	public int add(Map<String,String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException{
		String sql = "insert into t_easyui_user_version2(uid,uname,upwd) values(?,?,?)";
		return  super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, paMap);
	}
	
	/**
	 * 删除
	 * @param paMap
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws IllegalArgumentException 
	 * @throws SecurityException 
	 * @throws NoSuchFieldException 
	 */
	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.lst.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.fasterxml.jackson.databind.ObjectMapper;
import com.lst.dao.UserDao;
import com.lst.entity.TreeNode;
import com.lst.util.PageBean;
import com.lst.util.ResponseUtil;
import com.zking.framework.ActionSupport;

public class UserAction extends ActionSupport {
	
	private UserDao userDao = new UserDao();
	
	public String login(HttpServletRequest req,HttpServletResponse resp) {
		try {
			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"));
					System.out.println(map.get("menuId"));
				}
				req.setAttribute("menuHid",sb.substring(1));
			}
			else {
				return "login";
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "index";
	}
	
	/**
	 * datagrid所需的数据后端程序员开发完毕
	 * @param req
	 * @param resp
	 * @return
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		try {
			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(list));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * form组件提交所需的数据后端程序员处理完毕
	 * @param req
	 * @param resp
	 * @return
	 */
	public String edit(HttpServletRequest req,HttpServletResponse resp) {
		try {
			
			int edit = this.userDao.edit(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(edit));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 增加
	 * @param req
	 * @param resp
	 * @return
	 */
	public String add(HttpServletRequest req,HttpServletResponse resp) {
		try {
			
			int add = this.userDao.add(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(add));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 删除
	 * @param req
	 * @param resp
	 * @return
	 */
	public String del(HttpServletRequest req,HttpServletResponse resp) {
		try {
			
			int del = this.userDao.del(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(del));
		} catch (Exception e) {
			e.printStackTrace();
		}
		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 }/static/js/userManage.js"></script>
<title>userManage</title>
</head>
<body>
<!-- 展示数据所用 -->
	<table id="dg" name="dg"></table> 
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath}" >
	<input type="hidden" id="cc">
	
<!-- 弹出框提交表单所用 -->
	<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="text-align: center;">
    		<input type="hidden" name="SerialNo" >
		    <div>
		        <label for="uid">uid:</label>   
		        <input class="easyui-validatebox" type="text" name="uid" 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="ok();">保存</a>
		<a href="#" class="easyui-linkbutton">关闭</a>
	</div>
</body>
</html>

编写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){
					$('#cc').val('edit');
					$('#ff').form('load',row);
					$('#dd').dialog('open');
				}
			}
		},'-',{
			iconCls: 'icon-add',		//增加
			handler: function(){
				$('#cc').val('add');
				$('#ff').form('clear');
				$('#dd').dialog('open');
			}
		},'-',{ 
			iconCls: 'icon-remove',		//删除
			handler: function(){
				var row = $('#dg').datagrid('getSelected');
				if(row){     //判断是否选中
					$.messager.confirm('确认','您确认想要删除吗？',function(r){    //提示：点击OK就删除，
					    if (r){    //判断是否点了OK
					    	$('#cc').val('del');
					    	$('#ff').form('load',row);
					    	alert('删除成功');
					    	ok();
					    }    
					}); 
				}
			}
		}]
	}); 
})

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

最后我们就来进行效果展示：
我们可以看到，数据已经从数据库中取出来了。

接下来我们先进行编辑：必须选中才能够进行编辑，否则点击没有任何效果
我们可以看到点击第一个图标（编辑）会弹出一个弹出框，修改文本框中的数据可以进行修改

以下是修改后的，（把uname的123改成了123123）

接下来我们看看增加：点击第二个图标（增加）会出现一个空的文本框，可以在里面输入数据

点击保存，我们就看到表中成功添加了一条数据

最后我们来试试删除：选中毛毛，点击第三个图标（删除），会弹出一个提示框，点击Cancel（取消），就什么都不会发生，当我们点击OK的时候，数据就会成功删除，并且会弹出“删除成功”


我们来看看删除后的效果：
我们已经看到删除后，毛毛已经不存在了

好了！我们今日的分享就到这里结束了！！！