【EasyUI之crud使用】

最新推荐文章于 2021-09-26 19:30:47 发布
最新推荐文章于 2021-09-26 19:30:47 发布
阅读量501 收藏
点赞数 3
分类专栏： 前端UI 文章标签： EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43943548/article/details/91904900
版权

目录

前言

先讲下crud是什么好吧。

CRUD是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。

哈哈，其实也就是对一个表的增，删，查，改。

那么今天是要用到数据表格(datagrid)，用来装填，用弹出框(dialog)来操作数据，用表单(from)来提交数据

那么，今天的内容也就明了

数据表格(datagrid)：

前端设计

咱们来看看效果图
在这里插入图片描述
这就是数据表格
在这里插入图片描述这上面的工具是数据表格的一个组件，
那么一个视图的实现必定有他代码支撑

首先看下jsp:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/jsp/userManage.js"></script>

</head>
<body>
	<input type="hidden" id="ctr" value="${pageContext.request.contextPath }">
	
	<table id="dg"></table>  
	 
</body>
</html>

一个工具栏插件:

$(function(){
	$('#dg').datagrid({    
	    url:$("#ctr").val()+'/userAction.action?methodName=list', //有jsp来获取的绝对路径
	    fitColumns:true,
	    pagination:true,
	    fit:true,
	    columns:[[    
	        {field:'productid',title:'代码',width:100},    
	        {field:'productname',title:'名称',width:100},    
	        {field:'unitcost',title:'价格',width:100,align:'right'}    
	    ]],
	    toolbar: [{//看这里看这里工具栏的插件
			iconCls: 'icon-edit',
			handler: function(){//编辑
		},'-',{
			iconCls: 'icon-add',
			handler: function(){	//增加
			}
		},'-',{
			iconCls: 'icon-remove',
			handler: function(){//删除
				}
				
				
			}
		}]
	    
	});

弹出框(dialog)：

前端设计

一个xml配置：

<body>
	
	<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">   
   	
	</div> 
</body>

对了，忘说了，userManage.js是用来放本节面的js代码哦

所以到js文件：

	$('#dd').dialog({
		buttons:[{//也是一种插件按钮插件
			text:'保存',
			handler:function(){}
		},{
			text:'关闭',
			handler:function(){}
		}]
	})

这个会比较少，

表单(from)

前端设计

说到表单我们都知道是用来发送请求的嘛。
所以这次我们要的是放到弹出框上去

	<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">   
   		<form id="ff" method="post">   
   			<input type="hidden" name="SerialNo" >
		   uid<input type="text" id="uid" name="uid"  value="" class="easyui-textbox" style="width:200px"><br>
		   uname<input type="text" id="uname" name="uname" value="" class="easyui-textbox"  style="width:200px"><br>
		   upwd<input type="password" id="upwd" name="upwd" value="" class="easyui-textbox"  style="width:200px"><br>   
		</form>  
	</div>

就是这个：
在这里插入图片描述
嵌套了在弹出框里;

function ok(){
		$('#ff').form('submit',{//表单提交方法    
		    url:$("#ctr").val()+'/userAction.action?methodName='+$("#str").val(),    
		    onSubmit: function(){ 
		    	
		    },    
		    success:function(data){    
		    }
		}); 
	}

后端以及前端代码使用

userDao

其实我多搞得麻烦了一些，就是哪个zhu()方法，如果明白的可以不加

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");//获取参数值uid
		String upwd = JsonUtils.getParamVal(pamap, "upwd");//获取参数值upwd
		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>> listmenu(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 List<Map<String,Object>> list2(Map<String, String[]> pamap ,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_user_version2 where true ";
		
		return super.executeQuery(sql, pageBean);
	}
	
	
	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);
	}
	public int add(Map<String, String[]> pamap ) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException, InstantiationException {
		List<Map<String, Object>> list2 = this.list2(pamap, null);
		String sql = "insert into  t_easyui_user_version2(SerialNo,uid,uname,upwd) values("+list2.size()+1+",?,?,?) ";
		
		return super.executeUpdate(sql,new String[] {"uid","uname","upwd"}, pamap);
	}
	public int del(Map<String, String[]> pamap ) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "delete from  t_easyui_user_version2 where uid = ?";
		
		return super.executeUpdate(sql,new String[] {"uid"}, pamap);
	}
	
	
	public List<Map<String,Object>> zhu(List<Map<String,Object>> pamap){
		List<Map<String,Object>> la = new ArrayList<>();
		Map<String, Object> ma ;
		for (Map<String, Object> map : pamap) {
			ma = new HashMap<>();
			ma.put("productid", map.get("uid"));
			ma.put("productname", map.get("uname"));
			ma.put("unitcost", map.get("upwd"));
			ma.put("status", map.get("SerialNo"));
			la.add(ma);
		}
		
		return la;
	}
}

这个方法是在json文件里的格式，其实可以通过修改json文件格式就简单些

public List<Map<String,Object>> zhu(List<Map<String,Object>> pamap){
		List<Map<String,Object>> la = new ArrayList<>();
		Map<String, Object> ma ;
		for (Map<String, Object> map : pamap) {
			ma = new HashMap<>();
			ma.put("productid", map.get("uid"));
			ma.put("productname", map.get("uname"));
			ma.put("unitcost", map.get("upwd"));
			ma.put("status", map.get("SerialNo"));
			la.add(ma);
		}
		
		return la;
	}

UserAction

public class UserAction extends ActionSupport{
	
	private UserDao ud = new UserDao();
	
	public String login(HttpServletRequest req,HttpServletResponse resp) {
			try {
				List<Map<String, Object>> list = ud.list(req.getParameterMap(), null);//获取数据库中有无这个人
				
				if(list!=null&&list.size()>0) {//如果有，则进入下一步
					List<Map<String, Object>> listmenu = ud.listmenu(req.getParameterMap(), null);//获取这个人的权限
					StringBuilder sb = new StringBuilder();
					for (Map<String, Object> map : listmenu) {//将权限已字符串的形式打包
						sb.append(","+map.get("menuId"));
					}
					req.setAttribute("menuHid", sb.substring(1));//设置到request中
					
				}else {
					return "login";//如果没有就到login.jsp中
				}
				
			} catch (Exception e) {
				e.printStackTrace();
			}
		return "index";//如果有这个人就到index.jsp中
	}
	
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		try {
			
			PageBean pageBean = new PageBean();//分页
			pageBean.setRequest(req);
			
			List<Map<String, Object>> listmenu = ud.list(req.getParameterMap(), pageBean);//获取所信息
			List<Map<String, Object>> zhulist = ud.zhu(listmenu);//转换格式
			Map<String, Object> ma = new HashMap<>();
			ma.put("total", pageBean.getTotal());
			ma.put("rows", zhulist);//符合json文件的格式
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(ma));
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	return null;
}
	public String edit(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int edit = ud.edit(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(edit));
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	return null;
}
	public String add(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int edit = ud.add(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(edit));
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	return null;
}
	public String del(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int edit = ud.del(req.getParameterMap());
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(edit));
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	return null;
}
}

最终版的前端代码

userManage.jsp

<body>
	<input type="hidden" id="ctr" value="${pageContext.request.contextPath }">
	<input type="hidden" id="str"  >
	
	<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,closed:true">   
   		<form id="ff" method="post">   
   			<input type="hidden" name="SerialNo" >
		   uid<input type="text" id="uid" name="uid"  value="" class="easyui-textbox" style="width:200px"><br>
		   uname<input type="text" id="uname" name="uname" value="" class="easyui-textbox"  style="width:200px"><br>
		   upwd<input type="password" id="upwd" name="upwd" value="" class="easyui-textbox"  style="width:200px"><br>
		   
		</form>  
	</div> 
	
	 
</body>

userManage.js

$(function(){
	$('#dg').datagrid({    
	    url:$("#ctr").val()+'/userAction.action?methodName=list', 
	    fitColumns:true,
	    pagination:true,
	    fit:true,
	    columns:[[    
	        {field:'productid',title:'代码',width:100},    
	        {field:'productname',title:'名称',width:100},    
	        {field:'unitcost',title:'价格',width:100,align:'right'}    
	    ]],
	    toolbar: [{
			iconCls: 'icon-edit',
			handler: function(){
				var row = $('#dg').datagrid('getSelected');
				if(row!=null){
					$('#ff').form('clear');
					$("#str").val('edit');
					$('#dd').dialog('open');
					$('#ff').form('load',{
						uid:row.productid,
						uname:row.productname,
						upwd:row.unitcost,
						SerialNo:row.status
					});
					
				}
				
			}
		},'-',{
			iconCls: 'icon-add',
			handler: function(){
				$('#ff').form('clear');
				$('#str').val('add');
				$('#dd').dialog('open');
				
			}
		},'-',{
			iconCls: 'icon-remove',
			handler: function(){
				var row = $('#dg').datagrid('getSelected');
				if(row!=null){
					$('#str').val('del');
					$("uid").val(row.productid);
					ok();
					
				}
				
				
			}
		}]
	    
	});
	
	$('#dd').dialog({
		buttons:[{
			text:'保存',
			handler:function(){
				ok();  
			}
		},{
			text:'关闭',
			handler:function(){}
		}]
	})
	
	function ok(){
		$('#ff').form('submit',{    
		    url:$("#ctr").val()+'/userAction.action?methodName='+$("#str").val(),    
		    onSubmit: function(){ 
		    	
		    },    
		    success:function(data){    
		        if(data>>0){
		        	$('#dd').dialog('close');
		        	$('#dg').datagrid('reload');
		        	alert('编辑成功');
		        	$('#ff').form('clear');
		        	
		        }
		        else{
		        	alert('编辑失败');
		        }
		    }    
		}); 
	}
	


})

一上代码搞好就可以，实现工具栏的方法实现

总结

总的说不难，思路可以有很多种

☋希望大家有所帮助

么卡
关注
专栏目录
EasyUI入门——CRUD
下半夜的风
12-10 1773
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。 jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。 easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。使用 easyui，您不需要写太多 javascript 代码，
easyui实现crud实例
qq1073674233的博客
12-11 807
控制层代码 package cn.ps.controll; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import or...
easyui crud java_EasyUI CRUD应用Java改造版本
weixin_39968319的博客
02-13 96
EasyUI的CRUD应用采用的是php实现后台功能，将其改造为java版本实现数据表格的增删改功能。源代码结构：1、建立数据库表，将users.sql导入mysql即可2、修改index.html，将index.html中url的get_user.php替换为自己写的jsp代码3、get_user.jsp，其中page和rows是翻页的参数，offset是用于分页查询使用的参数，需要返回总的记录...
easyui crud java_Easyui 创建 CRUD 应用_EasyUI 插件
weixin_39638801的博客
02-13 95
数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。我们将使用下面的插件： datagrid：向用户展示列表数据。dialog：创建或编辑一条单一的用户信息。form：用于提交表单数据。messager：显示一些操作信息。步骤 1：准备数据库我们将使用 MySq...
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
gaoqiao1988的专栏
10-21 995
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍 初识Jquery EasyUI看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例 初识Jquery EasyUI看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
10-23
在本教程中，我们将关注如何使用 EasyUI 创建 CRUD（Create、Read、Update、Delete）应用程序，这通常是任何数据管理系统的基石。 1. **创建 CRUD 应用的准备工作** 在开始之前，你需要确保有一个支持 SQL 查询的...
easyui-crud-demo
07-21
"easyui-crud-demo" 是一个使用 jQuery EasyUI 实现的CRUD（创建、读取、更新、删除）操作的示例项目。这个项目涵盖了从数据获取、展示到用户交互的核心功能，下面我们将详细解析其关键知识点。 1. **jQuery EasyUI...
easyui的crud.zip
05-04
为了更好地学习和掌握 EasyUI，你可以访问其官方网站，查阅详细的文档和示例代码，同时，B站（Bilibili）上的相关视频教程也是很好的学习资源，它们通常会以实际操作的方式演示如何使用 EasyUI 进行 CRUD 开发，让你...
easyUI的crud实现
10-22
它的CRUD（Create、Read、Update、Delete）实现是指使用EasyUI来完成数据的创建、读取、更新和删除功能，这些是任何数据管理应用的基础操作。在这里，我们将深入探讨如何使用EasyUI和Java来实现这一目标。 首先，让...
EasyUi_crud
weixin_43710113的博客
06-14 249
1、easyui的crud（datagrid、dialog、form） 数据表格是基于table标签的 1、datagrid（数据表格） $(’#dg’).datagrid({ url:‘datagrid_data.json’, columns:[[ {field:‘code’,title:‘代码’,width:100}, {field:‘name’,title:‘名称’,width:100}, ...
EasyUI数据操作（CRUD）
05-28
使用Easyui作为数据承载，使用列表和弹窗实现数据的增加删除修改查找。如果需要了解easyui datagrid 和 基本数据操作。可以下载学习
使用EasyUI+Springmvc实现的CRUD
12-10
对应博客：http://blog.csdn.net/fancheng614/article/details/78764145
使用jquery-easyui写的CRUD插件(1)
10-13 195
写插件先看看jqeury的插件如何写，先了解一下如何写插件的代码。 jQuery插件的开发包括两种： 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 ...
EASYUI学习之CRUD(一)
超超超超哥的博客
06-01 370
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt
使用easyui的DataGrid实现即时编辑(CRUD)
smwhotjay的专栏
05-10 606
首先来个Basic DataGrid，只显示列表。如图tag_cloud.sql /* Navicat MySQL Data Transfer Source Server         : code Source Server Version : 50538 Source Host           : localhost:3306 Source Database       : blog...
使用easyUI创建一个CRUD的应用
血公子的专栏
12-23 1701
crud成为普遍的应用去搜集数据和正常的管理.CRUD允许我们生成页面列表和编辑数据库数据,这个教程将告诉你如何实现CRUD DataGrid 使用easyUI框架. 我们将要使用以下插件: datagrid: 显示用户列表数据.dialog: 创建或者编辑单个用户信息.form: 使用form提交数据.messager: 显示一些操作信息. 第一步: 准备好数据库 我们将使用
easyui crud demo1
xiaofeifeijin的博客
07-14 94
// 测试环境 /*$(function(){ alert($===jQuery); $.messager.alert('提示','内容') });*/ $(function(){ $("#mydatagrid").datagrid({ title:'用户列表', width:500, height:'auto', idFiel...
EasyUi项目《网上书城》之书籍功能（CRUD）
weixin_56069070的博客
09-26 226
前言：继续上一篇讲解EasyUi项目《网上书城》延展书籍的增删改查 *easyui的新的控件combobox（下拉框） 码字不易，点个关注 转载请说明！ 开发工具:eclipse，MySQL 一、目标 1、点击新增（crud）的时候弹出增加书籍界面，类型列会呈下拉框形式显示数据 2、新增一本书后，会显示未上架的界面中 3、在未上架的界面中，点击上架会显示已上架的界面中 4、在未上架中点击修改可以修改数据 5、在已上架的界面中点击下架会显示...
EasyUi之书籍功能（CRUD）
m0_53151031的博客
09-24 160
前言：昨天与大家分享了EasyUI的
使用EasyUI创建CRUD应用教程
"这篇教程介绍了如何使用jQuery插件EasyUI创建CRUD应用，涉及datagrid、dialog、form和messager等组件的使用，以及与MySQL数据库的集成。" 在Web开发中，EasyUI是一个基于jQuery的轻量级UI框架，它提供了一系列预...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值