easyui三

最新推荐文章于 2025-09-06 16:16:54 发布

转载最新推荐文章于 2025-09-06 16:16:54 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BAYOUA/p/11134727.html

文章标签：

#json #ui #前端 #ViewUI

陈旧的开发模式

美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。
Vs
前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json

　　UserDao

package com.dao;

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

import com_tanhaifang.util.JsonBaseDao;
import com_tanhaifang.util.JsonUtils;
import com_tanhaifang.util.PageBean;
import com_tanhaifang.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_varsion2 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
  * @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 remove(Map<String, String[]> paMap) throws Exception, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
  String sql ="delete from t_easyui_user_version2 where SerialNo =? ";
  return super.executeUpdate(sql, new String[] {"SerialNo"} , paMap);
 }


/**
  * 增加方法
  * @param paMap
  * @return
  * @throws Exception
  * @throws SecurityException
  * @throws IllegalArgumentException
  * @throws IllegalAccessException
  * @throws SQLException
  */

public int add(Map<String, String[]> paMap) throws Exception, 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);
 }


	/**
	 * 根据当前的用户登录的ID去查询对应的所有菜单
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String,Object>> getMenuIdsBy(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);
		}


}

　UserAction 继承ActionSupport

package com.web;

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

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

import com.dengrenli.dao.UserDao;
import com.dengrenli.entity.TreeNode;
import com.dengrenli.framework.ActionSupport;
import com.dengrenli.util.PageBean;
import com.dengrenli.util.ResponseUtil;
import com.fasterxml.jackson.databind.ObjectMapper;

public class UserAction extends ActionSupport{
	private UserDao dao=new UserDao();
	private Object userDao;
/**
 * 登陆成功后跳转到index.jsp
 * @param req
 * @param resp
 * @return
 */
	public String login(HttpServletRequest req,HttpServletResponse resp) {
		try {
			//系统中是否有当前用户
			
			try {
				Map<String, Object>	map = this.dao.list(req.getParameterMap(),null).get(0);
				//有
				if(map!=null && map.size()>0) {
					StringBuffer sb=new StringBuffer();
					//查询用户菜单中间表,获取menuid的集合
					List<Map<String, Object>> menuByUid = this.dao.getMenuByUid(req.getParameterMap(),null);
					for (Map<String, Object> m : menuByUid) {
						sb.append(","+m.get("menuId"));
					}
					req.setAttribute("menuIds", sb.substring(1));
					return "index";
				}else {
					//没有
					req.setAttribute("hh", "用户不存在");
					return "login";
				}
			} catch (Exception e) {
				// TODO Auto-generated catch block
				req.setAttribute("hh", "用户不存在");
				return "login";
			}
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return "login";
		}
		
	}
	/**
	 * 数据表格datagrid加载方法
	 * @param req
	 * @param resp
	 * @return
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		ObjectMapper om = new ObjectMapper();
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		
		try {
			List<Map<String, Object>> list = this.dao.list(req.getParameterMap(), pageBean );
//		[{},{},{]]-->{"total":28,"rows":[{},{},{]]}
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("total", pageBean.getTotal());
			map.put("rows", list);
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * form组件提交方法
	 * @param req
	 * @param resp
	 * @return
	 */
	public String edit(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int code = this.dao.edit(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("code", code);
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (NoSuchFieldException | SecurityException | IllegalArgumentException | IllegalAccessException
				| SQLException e) {
			e.printStackTrace();
		}catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 增加方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws Exception
	 */
	public String add(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
		int code=this.dao.add(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<>();
		map.put("code", code);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
	
	/**
	 *删除方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws Exception
	 */
	public String del(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
		int code=this.dao.del(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<>();
		map.put("code", code);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}



}

　JsonBaseDao.java

package com.util;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonBaseDao extends BaseDao<Map<String,Object>> {
	public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
		return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
			@Override
			public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				List<Map<String,Object>> list = new ArrayList<>();
//				获取源数据
				ResultSetMetaData md = rs.getMetaData();
				int count = md.getColumnCount();
				Map<String,Object> map = null;
				while(rs.next()) {
					map = new HashMap<>();
					for (int i = 1; i <= count; i++) {
						map.put(md.getColumnName(i), rs.getObject(i));
					}
					list.add(map);
				}
				return list;
			}
		});
	}
	

	/**
	 * 
	 * @param sql
	 * @param attrs	map中的key
	 * @param paMap	jsp向后台传递的参数集合
	 * @return
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 */
	public int executeUpdate(String sql, String[] attrs, Map<String,String[]> paMap) throws SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		for (int i = 0; i < attrs.length; i++) {
			pst.setObject(i+1, JsonUtils.getParamVal(paMap, attrs[i]));
		}
		return pst.executeUpdate();
	}







}

　userManage.js

$(function(){
	var ctx = $("#ctx").val();
	$('#dg').datagrid({    
	    url:ctx+'/userAction.action?methodName=list', 
	    fit:true,
	    fitColumns:true,
	    pagination:true,
	    singleSelect:true,
	    columns:[[    
	        {field:'uid',title:'ID',width:100},    
	        {field:'uname',title:'用户名',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]],
	    toolbar: [{
    		iconCls: 'icon-add',
    		handler: function(){
    			$('#ff').form('clear');//清空文本框的值
    			$('#dd').dialog('open');//打开表格
    			$("#dd").attr("title","增加用户");//增加信息
    			$("#method").val("add"); //通过隐藏ID来设置增加方法	
    		}
    	},'-',{
    		iconCls: 'icon-edit',
    		handler: function(){
    			$('#dd').dialog('open');
         // 到datagrid控件中找需要回填额数据（区别于原来从后台查询）
    			var row = $('#dg').datagrid('getSelected');
    			if(row){
//    			get_data.php指的是回填的数据
    				$('#ff').form('load',row);
    				$('#method').val('edit');
    			}else{
    				alert("请选中你要修改的行");
    			}
    		}
    	},'-',{
    		iconCls: 'icon-remove',
    		handler: function(){
    			var row =$('#dg').datagrid('getSelected');//选择你要删除的行
    			if(row){
    				$.ajax({  
        			    url:$("#ctx").val()+'/userAction.action?methodName=remove&&SerialNo='+row.SerialNo,  //传一个删除del方法跟serialNo列名值
        			});   
    				$('#dg').datagrid('reload');//刷新方法
    				alert('删除成功');
    			}else{
    				alert('删除失败');
    			}
    		}
    	},'-',{
    		iconCls: 'icon-reload',
    		handler: function(){alert('刷新按钮')}
    	}]

	}); 

})

function ok() {
	alert('ok');
	$('#ff').form('submit', {    
//		url:ctx+'/userAction.action?methodName=edit',
		url:ctx+'/userAction.action?methodName='+$("#method").val(),
		success:function(data){ 
//	        针对于后端返回的结果进行处理
			$('#ff').form('clear');
			$('#dd').dialog('close');
			$('#dg').datagrid('reload');
		}    
	});  

}

　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>人员信息维护管理界面</title>
<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>

</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
	<!-- 展示数据 -->
	<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,closed:true,buttons:'#bb'">
		<!-- 提交的from表单 -->
		<form id="ff" method="post">
			<input type="hidden" name="SerialNo">
			 <input type="hidden" id="method">
			<!-- 
	     easyui自带正则：
		但是如果你想要正则规则在easyui中不存在，easyui中只是定义了一些常见的正则
		那么可以在easyui中自定义validType:'xxx，这个xxx就代表一种正则
		列如：
			$.extends({validType:xxx
			
			})
 -->
			<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>
<!-- ctrl+shift+f -->
<!-- 	<div id="tb"> -->
<!-- 		<a href="#" class="easyui-linkbutton" -->
<!-- 			data-options="iconCls:'icon-edit',plain:true" /a> <a href="#" -->
<!-- 			class="easyui-linkbutton" -->
<!-- 			data-options="iconCls:'icon-help',plain:true" /a> -->
<!-- 	</div> -->

<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="ok()">保存</a>
<a href="#" class="easyui-linkbutton" onclick="ok1()">关闭</a>
</div>







</body>
</html>

结果如效果图所示：