eayui(三)

EasyUI CRUD详解
最新推荐文章于 2024-05-27 12:07:42 发布
原创 最新推荐文章于 2024-05-27 12:07:42 发布 · 203 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解了使用EasyUI实现CRUD操作的方法，包括datagrid、dialog和form布局的使用，以及后端Java代码如何配合前端进行数据增删改查。探讨了前后端分离的优势，并提供了完整的代码示例。

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

陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。

前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json
前端代码展示
userManage.jsp(表单等一些前端代码可以在API中查找)

<%@ 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> 

<!-- 新增修改对应的编辑窗体  -->
<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>

datagrid_data1.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

$(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');
					$('#dd').dialog('open');
				}
	    	},'-',{
	    		iconCls: 'icon-edit',
				handler: function(){
					//打开窗体
					$('#dd').dialog('open');
					//通过easyui的form控件直接回填选中行的数据
					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');
	        }
	    }    
	});
}

后端代码展示
UserDao(增删改的dao方法)

package com.xfz.dao;

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

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

/**
 * @author ld
 * 用于查询分页列表所用
 * 用于用户登录所用
 */
public class UserDao extends JsonBaseDao{
	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);
	}
	
	/**
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * 通过用户登录的唯一账号，在用户父权限中间表中获取菜单id的集合
	 */
	public List<Map<String, Object>> getMenusByUser(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 map
	 * @return
	 * @throws Exception
	 * 增加
	 */
	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 map
	 * @return
	 * @throws Exception
	 * 删除
	 */
	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);
	}

}

UserAction(增删改的请求方法)

package com.xfz.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.xfz.dao.UserDao;
import com.xfz.util.PageBean;
import com.xfz.util.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.getMenusByUser(req.getParameterMap(), null);
					StringBuilder sb=new StringBuilder();
					for (Map<String, Object> map : menuList) {
						sb.append(","+map.get("menuId"));
					}
					//001,002
					req.setAttribute("menuIds", sb.substring(1));
				}else {
					//用户不存在
					req.setAttribute("msg", "用户不存在");
					code="login";
				}
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			code="login";
		}
		return code;
	}
	
	/**
	 * @param req
	 * @param resp
	 * @return
	 * easyui的datagrid的数据来源
	 */
	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("total", pageBean.getTotal());
			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
	 */
	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) {
			// TODO: handle exception
			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;
	}
	
}

配置mvc.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.xfz.web.MenuAction">
	</action>
	<action path="/userAction" type="com.xfz.web.UserAction">
		<forward name="index" path="/index.jsp" redirect="false" />
		<forward name="login" path="/login.jsp" redirect="false" />
	</action>
</config>

界面显示效果：
在这里插入图片描述

数据库显示效果 ：select * from t_easyui_user_version2;
在这里插入图片描述

多种方式解决EasyUI—DataGrid中DateTime的格式化问题
Jack 架构师之路
03-02 1万+
引言    最近在项目中遇到这么一个问题就是数据库中的字段类型是datetime类型的，这样当我们在controller中进行j son序列化完成以后，在页面的easyuidatagrid中显示的时候出现了问题，不能正常显示，而是显示一列乱七八糟的 东西，见下图    上传图片    很明显这个格式的显示不是我们想要的结果，我们习惯的时间显示的方式
EasyUI官方文档(英文版)
11-29
EasyUI 社区开发了许多第三方插件，增加了更多功能，如图表、富文本编辑器等。文档会提供相关信息和接入指南。 7. **最佳实践**： 文档包含了一些使用 EasyUI 进行开发的最佳实践，如性能优化、组件组合和调试...
easyUI
AWAKE-HU
07-30 450
typora-root-url: img easyui combobox组合框 用法 组合（combo）可以使用 javascript 从 或 元素进行创建。请注意，从标记创建组合（combo）是无效的 &amp;amp;lt;input id=&amp;quot;cc&amp;quot; value=&amp;quot;001&amp;quot;&amp;amp;gt; $('#cc').combo({ required:true
Easyui(一)
what_to的博客
06-11 2773
Easyui(一) 1：什么是Easyui EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。 开发者不需要编写复杂的avascript，也不需要对css样式有深入的了解， 开发者需要了解的只有一些简单的html标签。 2:市面上的UI标签有哪些呢？ easyui：基本上的功能都有 但是页面不美观，不支持响应式 bootstrap：页面美观 需要收费 支持响应式 l...
eayUI中常用表单上下移动，表单中的搜索栏，下载excel表单，添加日期表
wd521521的博客
05-16 523
eayUI中表单添加时间表： 需要在input里面有2个选择的时间插件 源代码： //==========================================================通过查询时间过滤数据 function systemOutInt() { $('#systemOutIn').datagrid("reload", { sea
eayui动态解析
iteye_18755的博客
06-30 191
      今天使用easyui控件时遇到一个问题，我在动态的添加numberbox控件时不能正常的实现numberbox的功能。     &lt;script type="text/javascript"&gt; function AddPriceInput() { htmlText = '价格：&lt;input name="Or_price...
eayui子表套子表的设置
我的树洞
12-01 461
我来贴一段代码吧 $('#gridContract').datagrid({             title: '合同信息列表(所有合同)',             iconCls: 'icon-tb',             nowrap: true,                   //内容不换行             autoRowHeight: true,    
eayui+mvc3 编商店
08-15
2. **ASP.NET MVC3架构**：MVC模式是一种设计模式，它将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。模型负责业务逻辑，视图负责展示数据，控制器处理用户交互。在ASP.NET MVC3...
eayui前台框架及jquery1.7分页功能实现与帮助文档
从给定的文件信息中，我们可以提取出三个主要的知识点：eayui前台框架、jquery1.7以及与之相关的帮助文档和数据库文件。 ### eayui前台框架 eayui是一个前端UI框架，它为开发者提供了丰富的界面组件和便捷的开发...
EasyUI使用-中文手册
07-12
除了内置组件外，EasyUI 社区还提供了许多第三方插件，如树形表格、时间选择器等，丰富了框架的功能。 8. **兼容性和性能** EasyUI 支持主流的浏览器，包括 Chrome、Firefox、Safari 和 IE9+。其轻量级的特性保证...
打造自己的eayui平台框架
qq_40263927的博客
06-03 354
easyui可以用不同的组件搭出不一样的框架出来。如下图，我是用easyui-accordion 做为框架左侧菜单的父容器。 前端jsp代码： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java...
easyui 使用记录
李木子的博客
04-09 1248
{ "tzggBt":"都香高速昭阳到金阳段永丰大桥首跨桥梁架设成功","tzggTypeMc":"项目动态","createdTime":"2019-04-27 10:55:18","publishFlag":"已发布" },{ "tzggBt":"昭通都香高速 昭阳至金阳段开工","tzggTypeMc":"抢险管理","createdTime":"2019-04-27 10:57:46","publishFlag":"已发布" },$("#sjxxYjdj").combobox('enable');
Jquery+Eayui实现列表选择功能
weixin_30251829的博客
02-23 179
在做一个列表选择的功能，要实现一个Jquery列表选择器的效果，如图就是很常见的一种列表选择器 不过网上开源的可能要积分，资料没找到合适的，所以自己就简单写了一下，其实实现也不是很难。实现思路：左边双击之后获取元素，在右边附加上就好，右边选择列表双击之后就移除元素 实现效果： 因为系统功能是easyui做的，页面左边是一个table，也是easyui的datagrid，所以就可以调对应方法获取...
easyui使用易错点
xiaozhuangyumaotao的博客
05-12 756
一、easyui报错:form[0].submit is not a function 使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。 原因： easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现...
Java Web当中使用EasyUI|快速建立漂亮的后台网站（教程+源代码）
程序员猫爪
08-19 1万+
项目源代码下载： 一、EasyUI的概述 1、什么是EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 2、下载EasyUI 官网：https://www.jeasyui.cn/index.php
EasyUI的基本运用
最新发布
05-27 978
1.将文档和依赖文件下载之后，打开你创建的Javaweb项目，先将依赖文件导入项目（直接将文件夹导入），如下图。可通过蓝奏云盘下载：https://yfyp.lanzoub.com/b00eery9vg。
Radio单选框OnClick事件的设置
C仔 De Blob
10-16 1万+
投诉障碍
EasyUI(前端框架)
热门推荐
wyy的博客
07-10 2万+
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。 所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在 学习如何按
EasyUI(DataGrid修改&删除)
weixin_56996467的博客
04-12 795
目录 一、项目结构 二、前台代码 三、后台代码 四、运行效果: 一、项目结构 二、前台代码 editBook.jsp： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <form id="bookForm" method="post"> <input type="hidden
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值