easyui的增删改

陈旧的开发模式
PM：“我要这个功能”
后端：“这个先找前端做个模板”
前端：“模板做完了”
后端：“我来对接一下，这里样式不对”
前端：“我改完了”
后端：“功能交付”
PM：“春节要加这个活动”
后端：“这个先找前端改个模板”
前端：“模板做完了”
后端：“我来对接一下，这里样式不对”
前端：“我改完了”
后端：“功能交付”

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

前后端分离
PM：“我要这个功能”
前端：“我要接口”
后端：“接口完成了”
前端：“我来对接一下，功能交付”
PM：“春节要加这个活动”
前端：“需要增加接口”
后端：“接口完成了”
前端：“我来对接一下，功能交付”

优点：

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

前端有且仅有静态内容，再明确些，只有HTML/CSS/JS。

后端可以用任何语言；遵循一个原则：只提供数据，不提供任何和界面表现有关的内容；统一API接口，接口完全可以共用。

减少后端服务器的兵法压力，除了接口以外的其他所有http请求全部转移到前端服务器上

页面不再是全部刷新，而是异步加载，局部刷新，减轻压力

案例：

我们要使用easyui的三个布局

1、datagrid布局
2、dialog布局
3、form布局

操作表：

SerialNo是自增列

前端代码：

<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 }/static/js/userManage.js"></script>

</head>

<body>

	<!-- 展示数据所用 -->

	<table id="dg"></table>

	<input type="hidden" id="txc" value="${pageContext.request.contextPath }" >

	<!-- 弹出框提交表单所用 -->

	<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">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 id="bb">

		<a href="#" id="xm" class="easyui-linkbutton" onclick="ok(this);" data="data">保存</a> <a

			href="#" class="easyui-linkbutton">关闭</a>

	</div>

	<!-- <div id="tb">

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>

</div>

 -->

</body>

　　js:

$(function() {

	$('#dg').datagrid({

		url : $("#txc").val()+'/userAction.action?methodName=list',

		fitColumns : true,

		fit : true,

		pagination : true,

		columns : [ [ {

			field : 'uid',

			title : '代码',

			width : 100

		}, {

			field : 'uname',

			title : '名称',

			width : 100

		}, {

			field : 'upwd',

			title : '价格',

			width : 100,

			align : 'right'

		} ] ],

		toolbar : [ {

			iconCls : 'icon-edit',

			handler : function() {

				var row = $('#dg').datagrid('getSelected');

				if(row){

					$('#ff').form('load', row);

					$('#dd').dialog('open');

					$('#xm').html('编辑');

					$('#xm').attr("data","edit");

				}

			}

		}, '-', {

			iconCls : 'icon-add',

			handler : function() {

				$('#ff').form('clear');

				$('#dd').dialog('open');

				$('#xm').attr("data","add");

			}

		}, '-', {

			iconCls : 'icon-remove',

			handler : function() {

			var data=$('#dg').datagrid('getSelected');

			console.log( $("#txc").val()+'/userAction.action?methodName=remove&SerialNo='+data.SerialNo);

				$.ajax({

					url : $("#txc").val()+'/userAction.action?methodName=remove&SerialNo='+data.SerialNo,

					success: function(param){

						$('#dg').datagrid('reload');

					    }

				})

			}

		} ]

	});

})

function ok(obj){

	$('#ff').form('submit', {   

	    url:'../userAction.action?methodName='+$("#xm").attr("data"),

	    success: function(param){

	    	$('#dd').dialog('close');

	    	$('#dg').datagrid('reload');

	    	$('#ff').form('clear');

	    }

	});

}

前后端的规则tree_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"}

]}

　　后台代码：

package com.chenjiahao.dao;

import java.util.List;

import java.util.Map;

import com.chenjiahao.util.JsonBaseDao;

import com.chenjiahao.util.JsonUtils;

import com.chenjiahao.util.PageBean;

import com.chenjiahao.util.StringUtils;

public class UserDao extends JsonBaseDao {

	/**

	 * 登录查询用户表

	 *

	 * @param map

	 * @param pageBean

	 * @return

	 * @throws Exception

	 */

	public List<Map<String, Object>> list(Map<String, String[]> map, PageBean pageBean) throws Exception {

		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 = sql + " and uid=" + uid;

		}

		if (StringUtils.isNotBlank(upwd)) {

			sql = sql + " and upwd=" + upwd;

		}

		return super.executeQuery(sql, null);

	}

	/**

	 * 通过中间表查询登录用户所对应的权限

	 *

	 * @param string

	 * @param pageBean

	 * @return

	 * @throws Exception

	 */

	public List<Map<String, Object>> listMenu(String uid, PageBean pageBean) throws Exception {

		String sql = "SELECT*FROM t_easyui_usermenu WHERE TRUE";

		if (StringUtils.isNotBlank(uid)) {

			sql = sql + " and uid=" + uid;

		}

		return super.executeQuery(sql, null);

	}

	/**

	 * 编辑用户信息

	 *

	 * @param paMap

	 * @return

	 * @throws Exception

	 */

	public int edit(Map<String, String[]> paMap) 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" }, paMap);

	}

	/**

	 * 新增用户信息

	 *

	 * @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) VALUES(?,?,?)";

		return super.executeUpdate(sql, new String[] { "uid", "uname", "upwd" }, paMap);

	}

	/**

	 * 删除用户信息

	 *

	 * @param paMap

	 * @return

	 * @throws Exception

	 */

	public int remove(Map<String, String[]> paMap) throws Exception {

		String sql = "DELETE FROM t_easyui_user_version2 WHERE  SerialNo=?";

		return super.executeUpdate(sql, new String[] { "SerialNo" }, paMap);

	}

}

　　处理请求页面

package com.chenjiahao.web;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.tomcat.jni.OS;

import com.chenjiahao.dao.UserDao;

import com.chenjiahao.util.PageBean;

import com.chenjiahao.util.ResponseUtil;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.zking.framework.ActionSupport;

public class UserAction extends ActionSupport {

	private UserDao userDao = new UserDao();

	/**

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public String login(HttpServletRequest request, HttpServletResponse response) throws Exception {

		List<Map<String, Object>> list = this.userDao.list(request.getParameterMap(), null);

		if (list != null && list.size() > 0) {

			List<Map<String, Object>> listMenu = this.userDao.listMenu(request.getParameter("uid"), null);

			StringBuilder sb = new StringBuilder();

			for (Map<String, Object> map : listMenu) {

				sb.append("," + map.get("menuId"));

			}

			request.setAttribute("menuHid", sb.substring(1));

		} else {

			return "login";

		}

		return "index";

	}

	/**

	 * datagrid所需数据

	 *

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public String list(HttpServletRequest request, HttpServletResponse response) throws Exception {

		PageBean pageBean = new PageBean();

		pageBean.setRequest(request);

		List<Map<String, Object>> list = this.userDao.list(request.getParameterMap(), pageBean);

		ObjectMapper om = new ObjectMapper();

		Map<String, Object> map = new HashMap<>();

		map.put("total", pageBean.getTotal());

		map.put("rows", list);

		ResponseUtil.write(response, om.writeValueAsString(map));

		return null;

	}

	/**

	 * form组件提交所需数据

	 *

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public String edit(HttpServletRequest request, HttpServletResponse response) throws Exception {

		int edit = this.userDao.edit(request.getParameterMap());

		ObjectMapper om = new ObjectMapper();

		ResponseUtil.write(response, om.writeValueAsString(edit));

		return null;

	}

	public String add(HttpServletRequest request, HttpServletResponse response) throws Exception {

		int add = this.userDao.add(request.getParameterMap());

		ObjectMapper om = new ObjectMapper();

		ResponseUtil.write(response, om.writeValueAsString(add));

		return null;

	}

	public String remove(HttpServletRequest request, HttpServletResponse response) throws Exception {

		int remove = this.userDao.remove(request.getParameterMap());

		ObjectMapper om = new ObjectMapper();

		ResponseUtil.write(response, om.writeValueAsString(remove));

		return null;

	}

}

　　效果：

进行增，删，改时会有数据回访。

easyui的增删改的更多相关文章

golang学习之beego框架配合easyui实现增删改查及图片上传
golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...
MVC与EasyUI结合增删改查
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的 ...
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查
系列目录文章于2016-12-17日重写在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...
Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
前言从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...
详谈easyui datagrid增删改查操作
转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...
ASP.NET Easyui datagrid增删改+sqlhelper
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAFxCAYAAABtHZI7AAAgAElEQVR4nOy9DXwU1b3//wmCYHjUPl
MVC5+EasyUI+EF6增删改查的演示
一.创建MVC项目二.引入EasyUI 1.进入easyui官网下载源码 2. 将上述源码中需要的jquery 有选择的加到项目中来添加Content文件夹,放入easyui代码三.添加EF, ...
easyui datagrid 增删改查示例
查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...
easyui实现增删改查
陈旧的开发模式美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据缺点: 客户需要调节前端的展示效果解决:由美工去重新排版,重新选色. 前后端分离: 前端 ...

随机推荐

字符识别Python实现图片验证码识别
字符型图片验证码识别完整过程及Python实现 1 摘要验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的防火墙功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越 ...
anaconda jupyter
本文主要讲解在Ubuntu系统中,如何在Anaconda下安装TensorFlow以及配置Jupyter Notebook远程访问的过程. 在官方文档中提到,TensorFlow的安装主要有以下五种形 ...
BA-Bacnet ip 、TCP/IP
BACENT IP TCP/IP协议
Ubuntu14.04.1安装搜狗拼音输入法
之前在Ubuntu16.04下安装过搜狗,在印象中与这次遇到的问题不一样,因此先说明一下这次Ubuntu的版本号: 参考博客http://blog.csdn.net/tao_627/article/d ...
[Angular] Upgrade existing Angular app to Progressive Web App
If you alread have an existing Angular application and want to upgrade to progressive web app. 1. In ...
memcached—向memcached中保存Java实体需注意的问题
今天以代码实例的形式总结一下向memcached中保存Java实体需注意的问题: memcached工具类代码: package com.ghj.packageoftool; import java. ...
css sprite的实现
css sprite 为什么使用css sprite? 网页上的非常多静态小图片在载入时须要大量http请求,添加了响应时间.(哈哈.雅虎34条优化法则的第一条啊) css的background-po ...
Android监听程序自身被卸载
概述: 假设不是一些特殊的情况,我想大家非常少会接触到这个需求.事实上Android的Java部分没有提供对应的接口.这里须要去调用C的代码,也就是说要写JNI了.关于JNI的初识.大家能够去參考我博 ...
Foundation框架经常使用数据类型和NSAutoreleasePool自己主动释放池解析
第一.NSAutoreleasePool自己主动释放池解析 1.自己主动释放池的物理实现自己主动释放池用栈来实现.当你创建一个新的自己主动释放池是,会压栈到栈顶.接受autorelease消息的对象 ...
Android持久化保存cookie
在解析网页信息的时候,需要登录后才能访问,所以使用httpclient模拟登录,然后把cookie保存下来,以供下一次访问使用,这时就需要持久化cookie中的内容. 在之前先科普一下基础知识: 什么 ...

easyui的增删改

easyui的增删改的更多相关文章

随机推荐

热门专题