easyui高级控件（2）

easyui高级控件（2）

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

1. datagrid布局

   1. 分页数据
      easyui的页码page,页大小rows
   2. datagrid组件
      {total:10,rows:[{},{},{}]}
   3. 加载中文插件包
      locale/easyui-lang-zh_CN.js
   4. 关键属性
      后台数据
      url
      load/reload
      列
      columns
      分页
      pagination
      pageList
      pageSize
      按钮
      toolbar

2. dialog布局

3. form布局

4. 通用的JsonBaseDao增删改方法

5. dao层

6. web层

7. 功能完善

前后端分离

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

---

$(function() {
	$('#dg').datagrid({
		url:'../userAction.action?methodName=list',
		pagination:true,
		fitColumns:true,
		columns:[[
			{field:'code',title:'ID',width:100},
			{field:'name',title:'用户名',width:100},
			{field:'price',title:'密码',width:100,align:'right'}
			]],
			toolbar: [{
				//增加
				iconCls: 'icon-add',
				handler: function(){
					//alert('增加按钮');
					$('#ff').form('clear');//清空
					$('#dd').dialog('open');
					$("#dd").alert("title","增加用户！！！");//增加信息
					$("#lin").val("add");
					}
			},{
				//编辑
				iconCls: 'icon-edit',
				handler: function(){
					//alert('编辑按钮');
					$('#dd').dialog('open');  
//					通过easyui的form控件直接回填选中行的数据
					var row = $('#dg').datagrid('getSelected');//选择需要删除的行
					if(row){
						$('#ff').form('load',row);
					}else{
						alert("请选择你要修改的数据");
					}
					
				}
			},'-',{
				//删除
				iconCls: 'icon-remove',
				handler: function(){
					//alert('删除按钮')
					var row=$('#dg').datagrid('getSelected');//选择需要删除的行
					//判断是否选中
					if(row){
						$.ajax({
							url:'../userAction.action?methodName=del&&SerialNo='+row.SerialNo
						});
						alert('删除了！！！');
						$('#dg').datagrid('reload');
					}else{
						alert('删除失败');
					}
					}
			},'-',{
			}]
	})
})


function ok(){
	alert('ok');
	$('#ff').form('submit', {    
	    url:'../userAction.action?methodName=edit',    
	    success:function(data){    
//	    	将json串转成json对象
	        var res = eval('(' + data + ')');  
//	        比如说如果返回1代表成功，0代表失败，还有业务逻辑需要处理的话，由前端完成
	        if(res.code ==1){
	        	
	        	$('#dd').dialog('close'); 
	        	$('#dg').datagrid("reload");
	        }else{
	        	
	        }
	    }    
	});  
}

UserAction

---

package com.lrc.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.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.lrc.dao.UserDao;
import com.lrc.framework.ActionSupport;
import com.lrc.util.PageBean;
import com.lrc.util.ResponseUtil;

public class UserAction extends com.zking.framework.ActionSupport {
	private UserDao userDao = new UserDao();

	public String login(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		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 sd = new StringBuilder();
				for (Map<String, Object> map : menuList) {
					sd.append("," + map.get("menuId"));
				}
				req.setAttribute("menuIds", sd.substring(1));
			} else {// 用户不存在
				req.setAttribute("msg", "用户不存在");
				code = "login";
			}
		} catch (Exception e) {
			e.printStackTrace();
			code = "login";
		}
		return code;
	}

	/**
	 * easyui的datagrid的数据来源
	 * 
	 */
	public String list(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		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;
	}

	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
	 */
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		int add;
		try {
			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;
	}

}

UserDao

---

package com.lrc.dao;

import java.util.List;
import java.util.Map;

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


public class UserDao extends JsonBaseDao {
	/**
	 * 查询用户分页列表
	 *用户登录
	 */
	public List<Map<String, Object>> list(Map<String,String[]> map,PageBean pageBean) throws Exception{
		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的集合
	public List<Map<String, Object>> getMenusByUser(Map<String,String[]> map,PageBean pageBean) throws Exception{
		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 Exception{
		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 map
	  * @return
	  * @throws Exception
	  * @throws SecurityException
	  * @throws IllegalArgumentException
	  * @throws IllegalAccessException
	  * @throws SQLException
	  */

	public int add(Map<String, String[]> map) throws Exception {
	  String sql ="insert  into  t_easyui_user_version2  (uid,uname,upwd)  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[]> map) throws Exception {
	  String sql ="delete from t_easyui_user_version2 where SerialNo =? ";
	  return super.executeUpdate(sql, new String[] {"SerialNo"} , map);
	 }

	
}

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/js/public/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script>
<title>人员信息维护</title>
</head>
<body>
<table id="dg"></table>
<!-- 新增修改对应的编辑窗体 -->
<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">   
       
<!--        
	自定义正则属性
	$.extend({
	})

 -->
       <form id="ff" method="post">   
       	<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>

---