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

随机推荐

bzoj3270博物馆——期望概率DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3270 设计一个状态表示两个人分别在两个点的状态,带个标号num[i][j]: 据此得到状态之 ...
return break contiune
return 会直接跳出当前作用域,继续执行下面的方法:在js中for循环没有局部作用域的概念,所以如果是多级循环会直接跳出所有的循环: demo for(var i=0; i<10; i++) ...
python-day-10-python mysql and ORM
本节内容数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型常用mysql命令事务创建数据库外键增删改查表权限索引 python 操作mysql ORM sq ...
安装并配置JAVA环境
详见百度经验 http://jingyan.baidu.com/article/0202781175839b1bcc9ce529.html
iOS---UICollectionView Class Reference---UICollectionView 类参考文档
UICollectionView 类: Inherits from UIScrollView : UIView : UIResponder : NSObject Conforms to NSCodin ...
windows下patch
经常在网上看到有人发布patch文件来更新他们的开源代码,例如cegui.ogre等都使用这种形式来修bug或者增加一些小功能.但是,我们下载到的patch文件,貌似是linux/unix的diff工 ...
oppo手机怎么打开USB调试模式
OPPO手机USB调试的设置方法:1.ColorOS 3.0版本,进入设置--关于手机,连续点击版本号直到出现“您已处于开发者选项”,再进入设置--其他设置--开发者选项--USB调试进行设置: 2. ...
poj1511【最短路spfa】
题意: 计算从源点1到各点的最短路之和+各点到源点1的最短路之和: 思路: 源点这个好做啊,可是各点到源点,转个弯就是反向建边然后求一下源点到各点的最短路,就是各点到源点的最短路,在两幅图里搞: 贴一 ...
poj3617【贪心】
题意: 给定长度为N的字符串S,要构造一个长度为N的字符串T串. 从S的头部删除一个字符,加到T的尾部从S的尾部删除一个字符,加到T的尾部目标是构造字典序尽可能小的字符串. 思路: 贪心,每次取小 ...
解决 Xshell 连接出现 The remote SSH server rejected X11 forwarding request 问题
问题描述使用 Xshell 5 首次连接虚拟机 CentOS 7.6 出现这样的提示: WARNING! The remote SSH server rejected X11 forwarding ...

easyui实现增删改查

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

随机推荐

热门专题