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

随机推荐

Bug: CCScheduler#scheduleSelector. Selector already scheduled. Updating interval from: 0.0000 to 0.0000
原因是当前的scheduleOnce还没有执行完成, 可以将scheduleOnce方法改写成另外一种形式,把CCDelayTime和CCCallFunc拼接构造延迟事件调用: CCDelayTime ...
Servlet3.0之九：web模块化
一.使用web-fragment.xml 在Servlet 3.0中,可以使用标注来设置Servlet的相关信息.实际上,Web容器并不仅读取/WEB-INF/classes中的Servlet标注信息 ...
字体的设置 REM EM PX
px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...
absolute属性与IE6/IE7之间的误会
三.absolute属性与IE6/IE7之间的误会 absolute属性确实存在不少兼容性的问题,首先absolute属性定位相关(left/top)的些bug(例如IE6的奇偶bug)这里不予以讨论 ...
error: expected ‘)’ before ‘PRId64’（转载）
转自:www.xuebuyuan.com/2077822.html error: expected ‘)’ before ‘PRId64’ 原来这个宏定义给c用的,C++要用它,就要定义一个__STD ...
sql常识性误解
今天在公司一个项目,遇到一个问题,最后解决下来竟然发现自己对sql竟然存在一个常识性的误解表数据需求如下查找 name中的数据被参数 'adsb' 包含的的列个人原先的误区一直在于一个认识, ...
rbenv的使用
创建: 2017/09/05 更新: 2018/02/03 增加更新rbenv和获取list没有的版本更新: 2018/02/25 把path里面[个人主机名]全部替换为[主机名] 更新: 2018 ...
Unity Transform常识（转）
Variables position: Vector3 物体在世界坐标中的位置. transform.position=Vector3(10,10,10)//把物体放到(x=10,y=10,z= ...
bzoj 3704: 昊昊的机油之GRST【贪心+脑洞】
脑洞题大概首先处理出每个位置需要操作的次数c,假设第一次达到目标就不能再走,这样的操作次数是c差分后值的正数和,就想成分治每一段然后同减最小值然后从0处断开然后考虑能一圈一圈走的情况,连续一段多走 ...
不常见偏门的Bug，Spring Boot IDEA 静态资源图片访问404，初学者之殇
用过Idea朋友都知道,它有一个非常让人喜欢的功能就是:打算在某个a目录下创建一个hello.class文件,那么你仅需要右键点击New-Java Class- 然后输入名字:a.hello 即可. ...

easyui实现增删改查

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

随机推荐

热门专题