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 ...

随机推荐

微信小程序服务类目大坑：特殊行业服务类目所需资质材料
作为一个技术开发人员,遇到特殊行业服务类目所需资质材料,只能叫苦连天了,妈的,这个不是技术可以解决的问题,如果技术可以解决的问题都不是问题. 百牛信息技术bainiu.ltd整理发布于博客园特殊行业 ...
Javascript位置 body之前、后执行顺序(探讨)!
转载来自:http://blog.csdn.net/dxnn520/article/details/7927461 简介:当页面加载的时候,嵌入html标记的js代码和位于<body>&l ...
jsp 验证码
<%@page import="java.awt.Graphics2D"%> <%@page import="java.util.Random" ...
layui前端框架实例（修复官网数据接口异常问题）
layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...
PJzhang:微信公众号短连接与微信好友验证
猫宁!!! 参考链接:https://mp.weixin.qq.com/s/LPuYrDEyEXHyhcK3_HokSg 之前看到他们有人把微信公众号文章的长链接转为短链接,很受用,百度搜索一下方法, ...
第八篇 .NET高级技术之字符串暂存池（缓冲池）
字符串不可变性,字符串的‘暂存池’两个特性字符串是引用类型,程序中会存在大量的字符串对象,如果每次都创建一个字符串对象,会比较浪费内存.性能低,因此CLR做了“暂存池”(拘留池,缓冲池,暂存池),在 ...
Python 字符串太长分行写
原文:https://blog.csdn.net/peng__dada/article/details/79138135 #第一种:三个单引号 print '''我是一个程序员我刚开始学 ...
Zeppelin的入门使用系列之创建新的Notebook
前期博客 hadoop-2.6.0.tar.gz + spark-1.6.1-bin-hadoop2.6.tgz + zeppelin-0.5.6-incubating-bin-all.tgz(mas ...
自适应的两端对齐：text-align:justify
<!DOCTYPE HTML> <html> <head> <title>文本两端对齐 by hongchenok</title> < ...
（四）python自带解释器(IDLE)的使用
什么是IDE? Integrated Development Environment(集成开发环境) 打个不恰当的比方,如果说写代码是制作一件工艺品,那IDE就是机床.再打个不恰当的比方,PS就是图片 ...

easyui实现增删改查

easyui实现增删改查的更多相关文章

随机推荐

热门专题