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

随机推荐

使用lsyncd配置数据库备份多异地同步
lsyncd配置文件 settings { logfile = "/var/log/lsyncd.log", --日志路径 status = "/var/log/lsyn ...
865C
二分+期望dp 好神奇啊...出题人太神了! 我们发现dp之间的关系不满足是一个dag,那么我们只能用高斯消元,但是由于这里是取最小值,需要取min,也不能用高斯消元,于是我们想出了一个奇妙的方法我 ...
android调用第三方库——第二篇——编写库android程序直接调用第三方库libhello.so （转载）
转自:http://blog.csdn.net/jiuyueguang/article/details/9449737 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言 1:本文主要作为 ...
XTU1267:Highway（LCA+树的直径）
传送门题意有n个小镇,Bobo想要建造n-1条边,并且如果在u到v建边,那么花费是u到v的最短路长度(原图),问你最大的花费. 分析比赛的时候没做出来,QAQ 我们首先要找到树的直径起点和终点, ...
bzoj 4557: [JLoi2016]侦察守卫【树形dp】
设f[u][i]为u点向下覆盖至少i层并且处理完u的子树的最小代价,f[u][i]为u点向上覆盖至少i层并且处理完u的子树的最小代价转移的话显然f[u][i]+=f[v][i-1],但是f[u][0 ...
P5154 数列游戏（区间dp）
传送门果然和dp有关的东西我绝对做不出来啊-- 设$dp[i][j]$表示消完区间$[i,j]$中的数之后能得到的最大分数,如果消不完则为$-inf$,否则枚举断点.顺便如果\(a[i] ...
PyCharm - 格式化代码 (Reformat Code)
1. Ctrl + A全选代码. 2. Code -> Reformat Code
P2024 [NOI2001]食物链
第一种说法是"1 X Y",表示 X 和 Y 是同类. 第二种说法是"2 X Y",表示 X 吃 Y . 根据这句话可以看出来这是一个种类并查集种类并查集 ...
python之unittest
unittest是单元测试的一个框架在说unittest之前,先说几个概念: TestCase 也就是测试用例 TestSuite 多个测试用例集合在一起,就是TestSuite TestLoade ...
Linux、Windows 下分割、合并rar文件
1.分割rar 1.1 linux下分割压缩rar 安装rar和unrar和序 $sudo aptitude install rar unrar 示例,分割压缩temp文件,每个包为1MB $rar ...

easyui实现增删改查

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

随机推荐

热门专题