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

随机推荐

Django使用中常见的错误
Django Mysql SET SESSION TRANSACTION ISOLATION LEVEL READ COMMITTED Django 执行makemigrations 的时候报错 ...
Linux搭建Jenkins
1.添加存储库 yum的repo中默认没有Jenkins,需要先将Jenkins存储库添加到yum repos,执行下面的命令: 使用wget -O下载并以不同的文件名保存 [root@besttes ...
Python笔记8----DataFrame（二维）
目录: DataFrame概念 DataFrame创建基本操作查看.索引修改.删除统计功能条件筛选合并去除空值 4. 一些常用的函数 apply memory_usage pivot_t ...
asyncio 自动跳出长时间堵塞的 task
https://www.cnblogs.com/ywhyme/p/10660411.html 的升级版可以知道当前是卡在哪一个 task 甚至是多少行 import asyncio import o ...
.net 技术基础
C#常见运算符一元运算符(+.-.!.~.++.--) 算术运算符(*./.%.+ . – ) 移位运算符(<< .>> ) 关系和类型测试运算符(==.!=.<.&g ...
C#常用 API函数大全
常用Windows API1. API之网络函数WNetAddConnection 创建同一个网络资源的永久性连接WNetAddConnection2 创建同一个网络资源的连接WNetAddConne ...
Centos文件查看命令字符
文件(夹)查看类命令 ls--显示指定目录下内容说明:ls 显示结果以不同的颜色来区分文件类别.蓝色代表目录,灰色代表普通文件,绿色代表可执行文件,红色代表压缩文件,浅蓝色代表链接文件. -a--- ...
FreeMarker 语法 date 类型处理
一.java 代码 @Test public void testFreeMarker() throws Exception { //1.创建一个模板文件 //2.创建一个Configuration对象 ...
从MySQL临时表谈到filesort
内部临时表的类型和产生时机相关,翻译自:http://dev.mysql.com/doc/refman/5.6/en/internal-temporary-tables.html In some ca ...
BA-冷源系统--一次流量控制方案（转载）
空调水变一次流量控制方案浙大网新快威科技黄逸林一.引言建筑物中央空调系统的冷冻水一次泵,传统上都采用固定转速水泵.空调水的变一次流量控制系统(VPF:Variable-Primary-Flow ...

easyui的增删改

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

随机推荐

热门专题