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,动态展示数据缺点: 客户需要调节前端的展示效果解决:由美工去重新排版,重新选色. 前后端分离: 前端 ...

随机推荐

php libevent扩展
Libevent 是一个用C语言编写的.轻量级的开源高性能网络库,主要有以下几个亮点:事件驱动( event-driven),高性能;轻量级,专注于网络,不如 ACE 那么臃肿庞大: 源代码相当精炼. ...
jsmind实现思维导图，和echars 的tree图类似
https://blog.csdn.net/qq_41619796/article/details/88552029
js提示是否删除
第一种: <a href="javascript:if(confirm('确认删除吗?'))window.location='del.asp'">删除</a> ...
Project Euler 35 Circular primes
题意:197被称为圆周素数,因为将它逐位旋转所得到的数:197/971和719都是素数.小于100的圆周素数有十三个:2.3.5.7.11.13.17.31.37.71.73.79和97.小于一百万的 ...
小松之LINUX驱动学习笔记之模块间函数调用通讯
1. 符号导出函数 EXPORT_SYMBOL() EXPORT_SYMBOL标签内定义的函数对全部内核代码公开,不用修改内核代码就可以在您的内核模块中直接调用. EXPORT_SYMBOL_GPL( ...
洛谷 1144 最短路计数 bfs
洛谷1144 最短路计数传送门其实这道题目的正解应该是spfa里面加一些处理,,然而,,然而,,既然它是无权图,,那么就直接bfs了,用一个cnt记录一下每一个点的方案数,分几种情况讨论一下转移, ...
《Python 源码剖析》之对象
py一切皆对象的实现 Python中对象分为两类: 定长(int等), 非定长(list/dict等) 所有对象都有一些相同的东西, 源码中定义为PyObject和PyVarObject, 两个定义都 ...
c#基于udp实现的p2p语音聊天工具
原创性申明此博文的出处为 http://blog.csdn.net/zhujunxxxxx/article/details/40124773假设进行转载请注明出处.本文作者原创,邮箱zhujunx ...
稀疏编码(Sparse Coding)的前世今生(二)
为了更进一步的清晰理解大脑皮层对信号编码的工作机制(策略),须要把他们转成数学语言,由于数学语言作为一种严谨的语言,能够利用它推导出期望和要寻找的程式.本节就使用概率推理(bayes views)的方 ...
ANT公布SVN WEB项目到TOMCAT以及利用post-commit自己主动提交编译更新
开发者在本地提交更新到SVNserver后.往往须要測试人员又一次測试.为了将更新内容即时反映到測试server.能够利用post-commit脚本将SVN更新同步到測试server中. (1)利用S ...

easyui的增删改

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

随机推荐

热门专题