easyui实现增删改查
陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。
前后端分离：
前端：整个页面显示以及页面的交互逻辑。用ajax和node作为交互。其中node作为中间层。
后端：提供api接口，利用redis保存session，与数据库交互
easyui的crud
1、datagrid布局 数据表格
2、dialog布局 弹框
3、form布局
操作的表格
SerialNo为自增列
HTML部分
<body>
<div id="tb">
<input type="text" id="qq">
<button onclick="qq();">搜索</button>
</div>
<!-- 展示数据所用 -->
<table id="dg"></table>
<input type="hidden" id="ctx" 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">用户ID:</label>
<input class="easyui-validatebox" type="text" name="uid" data-options="required:true" />
</div>
<div>
<label for="uname">用户名:</label>
<input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />
</div>
<div>
<label for="upwd">密码:</label>
<input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />
</div>
<div id="bb">
<a href="#" id="zz" class="easyui-linkbutton" onclick="ok();" data="zz">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div> </form>
</div>
</body>
js部分
$(function(){
$('#dg').datagrid({
url:$("#ctx").val()+'/userAction.action?methodName=list',
fitColumns:true,
fit:true,
pagination:true,
columns:[[
{field:'uid',title:'用户ID',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');
$("#zz").attr("data","edit");
if(row){
$('#ff').form('load',row);
$('#dd').dialog('open');
}
}
},'-',{
iconCls: 'icon-add',
handler: function(){
var row=$('#dg').datagrid('getSelected');
//修改方法名
$("#zz").attr("data","add");
//清空数据
$('#ff').form('clear');
//打开提示框
$('#dd').dialog('open');
}
},'-',{
//删除方法
iconCls: 'icon-remove',
handler: function(){
//获取选中的数据
var row=$('#dg').datagrid('getSelected');
$.ajax({
//请求地址与参数传递
url:$("#ctx").val()+'/userAction.action?methodName=remove&SerialNo='+row.SerialNo,
success: function(param){
//重新载入页面
$('#dg').datagrid('reload');
}
})
}
}]
});
})
/**
* 搜索的方法
* @returns
*/
function qq(){
//获取文本框的值
var query=$("#qq").val();
$("#dg").datagrid({
url:$("#ctx").val()+'/userAction.action?methodName=query&uname='+query
});
}
/**
* 新增和修改方法
* @returns
*/
function ok(){
//获取方法名
var a=$("#zz").attr("data");
$('#ff').form('submit', {
url:'../userAction.action?methodName='+a,
success: function(param){
$('#dd').dialog('close');
$('#dg').datagrid('reload');
$('#ff').form('clear');
}
});
}
dao方法
/**
* 修改方法
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
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); } /**
* 新增方法
* @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); } /**
* 查询的方法
* @param paMap
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Map<String, Object>> query(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select * from t_easyui_user_version2 where true";
String uname = JsonUtils.getParamVal(paMap, "uname");
if (StringUtils.isNotBlank(uname)) {
sql = sql + " and uname like '%" + uname + "%'";
}
return super.executeQuery(sql, pageBean); }
web层
/**
* datagrid所需数据后端程序员开发完毕
* @param req
* @param resp
* @return
*/
public String list(HttpServletRequest req,HttpServletResponse resp){
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean);
ObjectMapper om=new ObjectMapper();
//数据格式转换
Map<String, Object> map=new HashMap<>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} return null;
} /**
* 查询的请求方法
* @param req
* @param resp
* @return
*/
public String query(HttpServletRequest req,HttpServletResponse resp) {
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> list = this.userDao.query(req.getParameterMap(), pageBean);
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return "index"; } /**
* form组件提交所需数据后端程序员处理完毕
* @param req
* @param resp
* @return
*/
public String edit(HttpServletRequest req,HttpServletResponse resp){
try {
int edit = this.userDao.edit(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(edit));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
} /**
* 新增的请求方法
* @param req
* @param resp
* @return
*/ public String add(HttpServletRequest req,HttpServletResponse resp){
try {
int add = this.userDao.add(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(add));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
} /**
* 删除的请求方法
* @param req
* @param resp
* @return
*/
public String remove(HttpServletRequest req,HttpServletResponse resp) {
try {
int remove=this.userDao.remove(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(remove));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null; }
mvc.xml配置
<action path="/menuAction" type="com.liuwenwu.web.MenuAction">
<forward name="index" path="/index.jsp" redirect="false" />
</action>
<action path="/userAction" type="com.liuwenwu.web.UserAction">
<forward name="index" path="/index.jsp" redirect="false" />
</action>
成品效果：
查询效果：
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的增删改查的实现代码贴了出来,发现访问量达到 ...
- MVC5+EasyUI+EF6增删改查的演示
一.创建MVC项目 二.引入EasyUI 1.进入easyui官网下载源码 2. 将上述源码中需要的jquery 有选择的加到项目中来 添加Content文件夹,放入easyui代码 三.添加EF, ...
- easyui datagrid 增删改查示例
查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...
- asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL
效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...
随机推荐
- Vue中devtools安装使用
vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...
- kvm_虚拟机迁移
virsh domblklist 虚拟机名称 #查看虚拟磁盘文件 一.kvm虚拟机静态迁移 1.静态迁移就是虚拟机在关机状态下,拷贝虚拟机虚拟磁盘文件与配置文件到目标虚拟主机中,实现的迁移. (1)虚 ...
- ORA-01843: not a valid month 错误
转自:https://blog.csdn.net/jetluning/article/details/48785599 insert into ......的场合发生ORA-01843: not a ...
- k8s-存储卷2-configMap-Secret-十三
一.StorageClass 在前一篇文章中,手动定义了pv,并让pvc关联至pv:现实中在pvc申请存储空间时,未必就有现成的pv符合pvc申请的需求,该怎么办呢? Kubernetes提供了描述存 ...
- redis简介、安装、配置和数据类型
redis简介.安装.配置和数据类型 redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理. 它支持字符串.哈希表.列表.集合.有序集合, ...
- 51 nod 1521 一维战舰（二分）
传送门 题意 分析 这是我在51nod上的第2题,下载了4个数据,得不偿失?我太菜啦 一开始wa了6个点,下数据后发现舰与舰不能相邻,再交wa,发现l和r都没设好,再wa,发现check里面[1,b[ ...
- 几题LCS后的小总结
先得理解最长上升子序列吧,这还是非常简单的. 然后就是要真正理解LCS: 真正理解源于做题,做题就像查漏补缺一样,你总有不会的地方. 非常彻底地理解该图(还是去做题啦) = =瞎几把乱说有两种问题 [ ...
- bzoj 1814: Ural 1519 Formula 1【插头dp】
设f[i][j][s]为轮廓线推到格子(i,j),状态为s的方案数 括号表示一段线的左端和右端,表示成左括号和右括号,状压的时候用1和2表示,0表示已经闭合 下面的蓝线是黄色格子的轮廓线,dp转移要把 ...
- useradd user 错误解决
今天给安装Sequoiadb 软体时,出现添加用户和组失败,显示错误: cannot lock /et/passwd; try again later. 在网上查了一下,说是/etc/passwd 文 ...
- hdu1162 Eddy's picture 基础最小生成树
#include <cstdio> #include <cmath> #include <cstring> #include <algorithm> # ...