easyui（二）

最新推荐文章于 2020-10-11 16:15:08 发布

思如秀在恩沥青

最新推荐文章于 2020-10-11 16:15:08 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUi 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/chenbowenleave/article/details/97844111

EasyUi 专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍了使用easyui实现CRUD操作的详细步骤，包括datagrid布局、dialog布局、form布局等，并探讨了前后端分离的优点，如提升工作效率，明确职责分工。通过示例展示了如何在java层和前端进行数据交互，简化开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui的crud

1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善

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

简单而言就是后台java工程师的工作：写方法返回数据前端：只管展示数据
而以前陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。

接下来就我们的前后端代码案例：

写一个jsp页面(userManage):
这个页面只要是控制我们的增删改查：

<%@ 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>
<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>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>人员信息维护界面</title>
</head>
<body>

<table id="dg"></table>  
<!-- ,closed:true -->
<!--新增修改对应的编辑窗体-->
<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({
  validType:{
    xxx:fun[
    }
    }) -->
       <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">Email:</label>   
        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div>   
    <div>   
        <label for="upwd">Email:</label>   
        <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true"/>   
    </div>   
</form>  
      <div id="bb">
<a href="#" class="easyui-linkbutton" onclick="ok()">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>
</div>  



</body>
</html>

Dao方法（UserDao）：
之后添加一些方法，（list edit）

package com.dao;

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

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


public class UserDao extends JsonBaseDao {
  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+=" and uid="+uid;
	 }
	 if(StringUtils.isNotBlank(upwd)) {
		 sql+=" and upwd="+upwd;
	 }
	 
	return super.executeQuery(sql, pageBean);
	  
  }
  
  /**
   * 根据当前用户登录的ID去查询对应的所有菜单
   * @param paMap
   * @param pageBean
   * @return
   * @throws InstantiationException
   * @throws IllegalAccessException
   * @throws SQLException
   */
  public List<Map<String, Object>> getMenuByUid(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);
		  
	  }
  
  public int edit (Map<String,String[]> paMap) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{
		 String sql="update t_easyui_user_version2  set uid=?,uname=?,upwd=? where serialno=? "; 
		 String uid=JsonUtils.getParamVal(paMap, "uid");
		 if(StringUtils.isNotBlank(uid)) {
			 sql+=" and uid="+uid;
		 }
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, paMap);
		  
	  }
  
}

web层(UserAction):

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

public class userAction extends ActionSupport {
	private UserDao userDao=new UserDao();
	/**
	 * 登录成功后调转index.jsp
	 * @param req
	 * @param resq
	 * @return
	 */
	 public String login(HttpServletRequest req,HttpServletResponse resq) {
		 Map<String, Object> map;
		try {
			map = this.userDao.list(req.getParameterMap(), null).get(0);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			req.setAttribute("msg", "用户不存在");
			return "login";
		}
			//系统中是有有当前用户登录
		 try {
			//有的话
			if(map!=null && map.size()>0) {
				//[{Menid:002....},{Menuid:003,.....}]
				//但是必须得到数值  像 002,003；
				StringBuilder sb=new StringBuilder();
			List<Map<String, Object>> menuIdArr=this.userDao.getMenuByUid(req.getParameterMap(), null);
			for (Map<String, Object> m : menuIdArr) {
				sb.append(","+m.get("menuId"));
				//002,003
			}
			req.setAttribute("menuIds", sb.substring(1));
			System.out.println("获取menuid"+sb.substring(1));
				return "index";
			}else {
				req.setAttribute("msg", "用户不存在");
				return "login";
			}
			 //查询用户菜单中间表，获取对应menuid的集合
			//没有
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return "login";
		}
	 }
	 /**
	  * easyui的datagrid的数据
	  * @param req
	  * @param resq
	  * @return
	  */
	 public String list(HttpServletRequest req,HttpServletResponse resq) {
		 Map<String, Object> map=new HashMap<>();
		 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(resq, om.writeValueAsString(map));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			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<>();
			 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
		 * @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,
	    toolbar:true,
	    columns:[[    
	        {field:'uid',title:'代码',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');
	    		}
	    	},{
	    		iconCls: 'icon-edit',
	    		handler: function(){
	    		$('#dd').dialog('open');  // open a window 
	    		//通过easyui的form控件直接回填选中行的数据
	    		var row= $('#dg').datagrid('getSelected');
	    		//console.log(row);
	    		if(row){
	    			$('#ff').form('load',row);  // 读取表单的URL
	    		}else{
	    			alert("请选择你要修改的数据");
	    		}
	    		}
	    	},'-',{
	    		iconCls: 'icon-remove',
	    		handler: function(){alert('编辑按钮')}
	    	}]

	});  

})

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

}

配置xml::

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<!-- <action path="/regAction" type="test.RegAction">
		<forward name="failed" path="/reg.jsp" redirect="false" />
		<forward name="success" path="/login.jsp" redirect="true" />
	</action> -->
	
	<action path="/menuAction" type="com.web.MenuAction">
	</action>
	<action path="/userAction" type="com.web.userAction">
	<forward name="index" path="/index.jsp" redirect="false" />
		<forward name="login" path="/login.jsp" redirect="false" />
	</action>
</config>