easyUI的增删改查

easyui的crud（dialog，datagrid、form讲解）
1、打开tab页
2、创建dao
3、Web的增删改查与配置
4、使用datagrid承载查询数据
5、增加和修改使用dialog与form
6、使用ajax做删除
7、解决tab页面重复的问题
dao

	/**
	 * 二星权限
	 * @param paramMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> userList2(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String uid = JsonUtils.getParamVal(paramMap, "uid");
		String upwd = JsonUtils.getParamVal(paramMap, "upwd");
		String sql = "select * from t_easyui_user_version2 where true";
		if (StringUtils.isNotBlank(uid)) {
			sql += " and uid = " + uid;
		}
		if (StringUtils.isNotBlank(upwd)) {
			sql +=" and upwd = " + upwd;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	public List<Map<String, Object>> getMenuIdsFromUser(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String uid = JsonUtils.getParamVal(paramMap, "uid");
		String sql = "select * from t_easyui_usermenu where true";
		if (StringUtils.isNotBlank(uid)) {
			sql += " and uid = " + uid;
		}
		return super.executeQuery(sql, pageBean);
	}
/**
	 * 修改
	 * @param paramMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int update(Map<String,String[]> paramMap) 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"}, paramMap);
	}
	/**
	 * 增加
	 * @param paramMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int add(Map<String, String[]> paramMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "insert into t_easyui_user_version2 values('"+System.currentTimeMillis()+"',?,?,?)";
		return super.executeUpdate(sql, new String[] {"SerialNo","uid","uname","upwd"}, paramMap);
	}
	/**
	 * 删除
	 * @param paramMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int delete(Map<String, String[]> paramMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "delete from t_easyui_user_version2 where SerialNo";
		return super.executeUpdate(sql, new String[] {"SerialNo"}, paramMap);
	}

servlet

/**
	 * 查询
	 * @param req
	 * @param resp
	 * @return
	 * @throws JsonProcessingException
	 * @throws IOException
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, IOException {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> userList2 = this.userDao.userList2(req.getParameterMap(), pageBean);
			Map<String, Object> reMap = new HashMap<>();
			reMap.put("total", pageBean.getTotal());
			reMap.put("rows", userList2);
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(userList2));
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 修改
	 * @param req
	 * @param resp
	 * @return
	 */
	public String update(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int code = this.userDao.update(req.getParameterMap());
		} catch (NoSuchFieldException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SecurityException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalArgumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 增加
	 * @param req
	 * @param resp
	 * @return
	 */
	public String add(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int code = this.userDao.add(req.getParameterMap());
		} catch (NoSuchFieldException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SecurityException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalArgumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 删除
	 * @param req
	 * @param resp
	 * @return
	 */
	public String delete(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int code = this.userDao.delete(req.getParameterMap());
		} catch (NoSuchFieldException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SecurityException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalArgumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

js

$(function(){
	var ctx = $("#ctx").val();
	$('#dg').datagrid({    
	    url:ctx+'/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);	// 读取表单的URL
					$('#dd').dialog('open');
				}
				
			}
		},'-',{
			iconCls: 'icon-add',
			handler: function(){
				$('#dd').dialog('open');
			}
		},'-',{
			iconCls : 'icon-remove',
			handler : function() {
				var row = $('#dg').datagrid("getSelected");
				if(row){
					$.messager.confirm('确认对话框', '你确定要删除吗？', function(r){
						if (r){
							$.ajax({ 
								//跳转修改地址
								url:ctx+'/userAction.action?methodName=del&&SerialNo='+row.SerialNo, 
								dataType:'json' ,
								success:function(result){
									if(result==1){
										
										
										$('#dg').datagrid('reload');
									}else{
										$.messager.alert('提示信息', '操作失败'); 
									}
								}  
							});
							$.messager.show({
								title:'我的消息',
								msg:'操作成功',
								timeout:5000,
								showType:'show',
								style:{
									right:'',
									top:document.body.scrollTop+document.documentElement.scrollTop,
									bottom:''
								}
							});
							// 重新载入当前页面数据 
							$('#dg').datagrid('reload');
						}
					});
					// 重新载入当前页面数据 
				}else{
					$.messager.alert('提示信息', '操作失败'); 
				}
			}
		}]

	});  
})

function ok(){
	var ctx = $("#ctx").val();
	var serialNo = $("#SerialNo").val();
	if(serialNo==""){
		//增加
		$('#ff').form('submit',{ 
			//跳转增加地址
			url:ctx+'/userAction.action?methodName=add',
		});
		//关闭窗体
		$("dd").dialog('close');
	}else{
		$('#ff').form('submit', {    
			url:ctx+'/userAction.action?methodName=update',    
			success:function(data){    
				$.messager.alert('提示信息', '操作成功'); 
				$('#dg').datagrid('reload');    // 重新载入当前页面数据    
				$('#ff').form('clear');//清除表单数据
				$('#dd').dialog('close');//关闭窗体
			}    
		});  
	}
}

页面

<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<table id="dg"></table>
<div id="dd" class="easyui-dialog" title="My Dialog" 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" id="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>

1. datagrid
   1.1 分页数据
   easyui的页码page、页大小rows
   1.2 datagrid组件
   {total:10,rows:[{},{},{}]}
   1.3 加载中文插件包
   locale/easyui-lang-zh_CN.js
   1.4 关键属性
   后台数据
   url
   load/reload

   列
   columns

   分页
   pagination
   pageList
   pageSize

   按钮
   toolbar

   其它
   singleSelect
   idField
   rownumbers
   getSelected
   row.sid
   getRowIndex