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

随机推荐

bzoj5073
dp 字符串dp不太会啊... 这种序列和子串的匹配一般设两个状态,dp[i][j]表示当前s匹配到i,t匹配到j的...,g[i][j]表示当前s匹配到i,t匹配到j,i,j必须匹配的...,noi ...
C# 利用Aspose.Slides.dll将本地ppt文档转化成pdf（完美破解版无水印无中文乱码）
下载Aspose.Slides.dll http://pan.baidu.com/s/1kVPjnzL 添加引用C#代码. using System; using System.Collectio ...
看鸟哥的Linux私房菜的一些命令自我总结（三）
-修改文件创建时间或创建新文件 touch [-acdmt] -a :仅修改访问时间 -c :仅修改文件的时间,若该文件不存在则不创建新文件 -d :后面可以接想要修改的日期而不用当前的日期 - ...
E20180403-hm
accompany vt. 陪伴,陪同; 附加,补充; 与…共存; 为…伴奏 synchronous adj. 同时存在[发生]的,同步的 asynchronous adj. 异步的; particu ...
E20170425-gg
margin n(网页设置,CSS) 外铺,(金融,外汇交易)保证金 property n(计算机)类的属性变量 , 资产
51NOD 1134 最长上升子序列
给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10. 输入第1行:1个数N, ...
vim 不同的插入方式
在命令行模式下进入到输入模式可以敲击 i.a.o. s. I. A. O. S 它们之间的区别做下备忘:i:在光标所在字符前开始插入a:在光标所在字符后开始插入o:在光标所在行的下面另起一新行插入s ...
HDU - 6063 RXD and math
Bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6063 打表发现规律是n^k #include <iostream> #inc ...
Codeforces Round #408 (Div. 2) C
Description Although Inzane successfully found his beloved bone, Zane, his owner, has yet to return. ...
递推DP URAL 1244 Gentlemen
题目传送门 /* 题意:给出少了若干卡片后的总和,和原来所有卡片,问少了哪几张 DP:转化为少了的总和是否能有若干张卡片相加得到,dp[j+a[i]] += dp[j]; 记录一次路径,当第一次更新的 ...

easyui实现增删改查

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

随机推荐

热门专题