easyUI（3）

最新推荐文章于 2022-05-05 19:27:22 发布
最新推荐文章于 2022-05-05 19:27:22 发布
阅读量274 收藏
点赞数
分类专栏： 上课知识 文章标签： easyui(3)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyi215/article/details/97823176
版权

easyUI（3）

easyui的crud（dialog，datagrid、form讲解）

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

陈旧的开发模式

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

以下为前后端的代码展示:

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>
	<!-- 导入index.js代码 -->
<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,buttons:'#bb',closed:true">   
        
<!--        
 自定义正则属性
$.extend({
validType:{
xx: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">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>  

</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="ok()">保存</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,//右边挤满
	    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');  
//通过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');
        }
    }    
});
}

mvc配置文件

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

UserDao的增删改后端定义sql语句页面

package com.xiaoyi.dao;

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

import com.xiaoyi.util.JsonBaseDao;
import com.xiaoyi.util.JsonUtils;
import com.xiaoyi.util.PageBean;
import com.xiaoyi.util.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>> 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 InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 */
	public int edit(Map<String, String[]> map) throws InstantiationException, IllegalAccessException, SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException{
		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 InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 */
	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.xiaoyi.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.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.xiaoyi.dao.UserDao;
import com.xiaoyi.util.PageBean;
import com.xiaoyi.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"));
		
	}
	req.setAttribute("menuIds", sb.substring(1));
			}else {
				//用户不存在
				req.setAttribute("msg", "用户不存在");
				code="login";
			
		}
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
			code="login";

		}
		return code;
		
		
		
	}

	/**
	 * easyui的datagrid的数据来源
	 * @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("total", pageBean.getTotal());//总数
			map.put("rows", list);//data1里面的
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (Exception e) {
			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<String, Object>();
			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 JsonProcessingException
 * @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;
	}
	
	
	
	
}

效果如下:
在这里插入图片描述
在这里插入图片描述

依呀
关注
专栏目录
【EasyUI】入门之布局
全栈
05-04 1399
目录 第一节EasyUI的介绍和常用组件 第二节 EasyUI的组件使用 第一节EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。...
easyui基本布局
m0_67514201的博客
04-09 1707
目录 1.什么是easyui？ 2.easyui能带给我们什么好处？ 3.easyui如何使用？ 4.组件 5,引入 easyui 相关文件 6,easyui框架的使用 http://www.jeasyui.net/（中文网） http://www.jeasyui.com/（英文版） EasyUI官方下载地址：http://www.jeasyui.com/download/index.php 常见UI： Layui，Bootstrap，element ui,ant de...
easyui【三】
qq_44847231的博客
06-13 185
easyui【三】easyui的crud案列(前后端分离) easyui的crud 1、datagrid布局 2、dialog布局 3、form布局 案列(前后端分离) 后台java工程师的工作：写方法返回数据 前端：只管展示数据 我们需要将数据展示到页面上进行增删查改: 写好dao方法(后台): public class UserDao extends JsonBaseDao{ /** ...
3、EasyUI的可拖拽组件
xyphf的博客
12-26 400
给元素加上class=”easyui-draggable”<div class="easyui-draggable" style="width:500px;height:400px;border: 1px solid #000000;"> 这是可拖拽组件 </div>
ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局
weixin_34119545的博客
02-13 131
 系列目录 前言：这一节比较有趣。基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式，我们必须自定义布局来适合业务场景打印！我们想要什么效果？看下图 （我们没有布局之前的表单和设置布局后的表单） 改变后的布局 本节知识点： easyui draggable 与 resizable 的结合使用（拖动与设置大小） 在Form添加Action Action提取来自48节的...
easyUI例子_easyui1.4.4_一套EASYUI的经典后台管理模板_jquery_
10-03
3. **后台管理模板**：这个压缩包提供的后台管理模板，通常包括了登录页面、主页面、数据管理、设置等功能模块。这些模板可以作为基础，根据实际项目需求进行定制和扩展。 4. **运行环境**：这个模板适用于所有现代...
jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e
09-20
《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了丰富的组件和易于使用的API，极大地简化了Web界面的开发。而其核心魅力之一，便是丰富的主题系统，使得开发者可以轻松定制...
jquery-easyui-1.4.5_easyuiapi_
10-03
3. **API详解** EasyUI的每个组件都有一套完整的API，通过这些API可以对组件进行细致的控制。例如： - `.dialog('open')` 打开对话框 - `.grid('load', data)` 加载Grid数据 - `.tree('select', node)` 选中Tree...
jquery-easyui.zip_easyui框架_html 框架_jquery-easyui
09-21
3. **数据绑定**：EasyUI支持从服务器动态加载数据，例如，Datagrid可以通过Ajax方式获取并显示数据。 4. **事件处理**：利用jQuery的事件监听机制，可以响应用户交互并执行相应的逻辑。 5. **自定义样式**：虽然...
easyui1000个ico图标
03-11
EasyUI 是一个基于 jQuery 的前端开发框架，专为构建用户界面而设计。它提供了一套完整的组件和样式，包括布局、表格、对话框、菜单、按钮等，使得开发者能够快速地构建出美观且功能丰富的 web 应用。在这个“easyui...
easyui页面布局示例
04-03
使用easyui实现的页面布局，带导航菜单，并点击导航菜单中的某一项在主页面显示
easyui(基本布局)
m0_68332494的博客
05-05 169
http://www.jeasyui.net/（中文网） http://www.jeasyui.com/（英文版） EasyUI官方下载地址：http://www.jeasyui.com/download/index.php 常见UI： Layui，Bootstrap，element ui,ant design,iview 1.什么是easyui？ easyui是一种基于jQuery的用户界面插件集合 2.easyui能带给我们什么好处？ 1）easyui是个完美支持HTML5网页的完整...
EasyUI-布局
李守宏
04-30 3709
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> LayOut Border布局
EasyUI Tabs 布局
dianyanxia的博客
03-14 326
&lt;div id="tt" class="easyui-tabs" style="width:500px;height:250px; border: false; " &gt; &lt;div title="Tab1" style="padding:20px;display:none;"&gt; tab1 &lt;/div&gt;
EasyUi高级布局（三）
what_where的博客
06-13 788
EasyUi高级布局1.前台1.1，数据表格1.2，弹出框1.3，表单2.后台 今天我就说一说咋们的一个前后端分离，在很多的一些企业里面我们所做的项目都是前后端分离的，也就是说我们前面台展示的界面和我们的数据操控不是同一个人写的，而是两个部门。当然在一些小型的企业里一个人既要干前端的是也要干后台的事。今天我们就来学习一一些简单的前台和后台。 1.前台 我们的前台界面是用easyUI进行开发的，虽然...
【EasyUI】——EasyUI的布局
Coder Yasmine
07-21 5024
做一个网站首先要有网站的布局，所谓的布局其实就是网页的排版，就是说你的网页显示时是什么样子的。
easyUI创建CRUD应用(JAVA Web/Servlet版)
superzcw的博客
11-20 180
easyUI创建CRUD教程(教程中采用php做后端) 自己没有学过php，对jQuery也只是了解一点，做这个时遇到了一点困难。。。尤其是ajax这块。 首先导入把easyUI的库添加到项目中。 在html中添加引用 <script type="text/javascript" src="easyUI/jquery.min.js"></script> <scrip...
easyui的布局(layout)
玖尘的博客
01-08 1122
通过 $.fn.layout.defaults 重写默认的 defaults。        布局容器有5个区域：布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。 布局（layout）可以嵌套...
easyUI DataGrid&布局
Neil的专栏
03-26 1804
function initGrid(urlVal) {             $('#tt').datagrid({                 width: document.getElementById('div1').width,                 height: document.getElementById('div1').heigh,
easyui vue3
最新发布
10-14
EasyUI 是一个基于 jQuery 的 UI 库，而 Vue3 是一个流行的 JavaScript 框架。它们之间没有直接的关系，但是可以在 Vue3 中使用 EasyUI 库。 要在 Vue3 中使用 EasyUI，需要先引入 jQuery 和 EasyUI 库，然后在 Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值