EasyUi的高级控件

最新推荐文章于 2025-08-03 15:30:48 发布

原创最新推荐文章于 2025-08-03 15:30:48 发布 · 179 阅读

CC 4.0 BY-SA版权

本文介绍了传统的开发模式与前后端分离的对比。在传统模式中，美工和Java工程师协作紧密，但在前后端分离模式下，两者独立工作，通过预定义的数据交互格式协同。以EasyUi为例，Java工程师负责提供数据，如tree_data1.json，而美工专注于展示这些数据，降低了沟通成本。通过jsp页面userManage.jsp和对应的js文件，展示了如何实现这一分离过程。

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

写一个jsp页面 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/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/easyui5/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/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>  

</body>
</html>

提供datagrid_date1.json

{"total":28,"rows":[
	{"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

写一个userManage.js：

//jquery入口
$(function(){
	$('#dg').datagrid({    
	    url:'datagrid_data1.json',    
	    pagination:true,//实现分页功能
	    fitColumns:true,//将页面排满
	    columns:[[    
	        {field:'uid',title:'代码',width:100},    
	        {field:'uname',title:'名称',with:100},    
	        {field:'upwd',title:'价格',width:100,align:'right'}    
	    ]]    
	});  
})

运行结果如下：
在这里插入图片描述
完善jsp页面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/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/easyui/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui/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,closed:true,buttons:'#bb'">   
    
    <!--  有自定义正则属性   -->
    <form id="ff" method="post">
    <!-- 隐藏域提交   --> 
    <input type="hidden"  name="SerialNo" />
    <div>   
        <label for="uid" style="margin-left: 80px">uid:</label>   
        <input class="easyui-validatebox"  type="text" name="uid" data-options="required:true" />   
    </div>   
    <div>   
        <label for="uname" style="margin-left: 59px">uname:</label>   
        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div> 
     <div>   
        <label for="upwd" style="margin-left: 66px">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()" id="name" value="edit">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>

</body>
</html>

写Dao方法（UserDao）：

package com.lg.dao;

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

import com.lg.uitl.JsonBaseDao;
import com.lg.uitl.JsonUtils;
import com.lg.uitl.PageBean;
import com.lg.uitl.StringUtils;

public class UserDao extends JsonBaseDao {
	/**
	 * 用于查询用户分页列表所用
	 * 用于用户登录所用
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> list(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		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的集合
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> getMenu(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		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 Exception
	 */
	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 pamap
	 * @return
	 * @throws Exception
	 */
	public int add(Map<String, String[]> pamap) throws Exception {
		String sql = "insert into t_easyui_user_version2(uid,uname,upwd) value(?,?,?)";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, pamap);
	}
	
	/**
	 * 删除
	 * @param pamap
	 * @return
	 * @throws Exception
	 */
	public int del(Map<String, String[]> pamap) throws Exception {
		String sql = "delete from t_easyui_user_version2 where SerialNo = ?";
		return super.executeUpdate(sql, new String[] {"SerialNo"}, pamap);
	}

}

web层(UserAction):

package com.lg.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.fasterxml.jackson.databind.ObjectMapper;
import com.lg.dao.UserDao;
import com.lg.uitl.PageBean;
import com.lg.uitl.ResponseUtil;
import com.zking.framework.ActionSupport;

public class UserAction extends ActionSupport {
	
	private UserDao userDao=new UserDao();
	
	public String login(HttpServletRequest req,HttpServletResponse resp) {
		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.getMenu(req.getParameterMap(), null);
				StringBuilder sb=new StringBuilder();
				for (Map<String, Object> map : menuList) {
					sb.append(","+map.get("menuId"));
				}
				req.setAttribute("menuIds", sb.substring(1));
			}else {
			//用户不存在
				req.setAttribute("msg", "用户不存在");
				code="login";
			}
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
			code="login";
		}
		return code;
	}
	
	/**
	 * easyui的datargrid的数据来源
	 * @param req
	 * @param resp
	 * @return
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		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("rows", list);
			ObjectMapper om=new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 修改
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String edit(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		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));
		return null;
	}
	/**
	 * 增加
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String 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 null;
	}
	/**
	 * 删除
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String 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 null;
	}

}

userManage.js

$(function(){
	$('#dg').datagrid({    
	    url:'../userAction.action?methodName=list', 
        /*分页*/
	    pagination:true,
	    /*把右边挤满*/
	    fitColumns:true,
	    /*展示全屏*/
	    /*fit: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');
					$('#name').text('增加');
					$('#name').attr('value','add');
					$('#dd').dialog('open');
				}
	    	},'-',{
	    		iconCls: 'icon-edit',
				handler: function(){
					//打开窗体
					$('#dd').dialog('open');
					//获取选中的的数据
					var row = $('#dg').datagrid('getSelected');
					if(row){
						//回显到表单里
						$('#ff').form('load',row);
					}else{
						alert('请选中你要修改的项!');
					}
				}
	    	},'-',{
	    		iconCls: 'icon-remove',
				handler: function(){
					var row = $('#dg').datagrid('getSelected');
					if(row){
						if(confirm('你确定要删除吗?')){
							$('#name').text('删除');
							$('#name').attr('value','del');
							//自动刷新
							$('#ff').form('load',row);
							ok();
						}
					}
					else{
						alert('请选中你要删除的项!');
					}
				}
	    	}]
	}); 
})

function 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');
	        	alert($('#name').text()+'成功!');
	    		$('#ff').form('clear');
	        }
	    }    
	});
}

配置xml:

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/menuAction" type="com.lg.web.MenuAction">
	</action>
	
	<action path="/userAction" type="com.lg.web.UserAction">
	     <forward name="index" path="/index.jsp" redirect="false" />
	     <forward name="login" path="/login.jsp" redirect="false" />
	</action>
</config>

主界面
在这里插入图片描述
增加