easyui高级控件(三)
2019-07-31 15:10
120 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qiu_hyun/article/details/97901672
easyui高级控件
easyui的crud(dialog,datagrid、form讲解)
1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善
陈旧的开发模式
美工(ui工程师:出一个项目模型)
java工程师:将原有的html转成jsp,动态展示数据
缺点:
客户需要调节前端的展示效果
解决:由美工去重新排版,重新选色。
Vs
前后端分离
美工、java工程师都是独立工作的,彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作:写方法返回数据如tree_data1.json
美工:只管展示tree_data1.json
基础讲解
1. datagrid
1.1 分页数据
easyui的页码page、页大小rows
1.2 datagrid组件
{total:10,rows:[{},{},{}]}
1.3 加载中文插件包
locale/easyui-lang-zh_CN.js
1.4 关键属性
后台数据
url
load/reload
列
columns
分页
pagination
pageList
pageSize
按钮
toolbar
其它
singleSelect
idField
代码演示:
前端:
userManage.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/easyui5/themes/black/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/easyui5/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui5/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui5/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script> <title>人员信息维护界面</title> </head> <body> <div id="tb"> <input type="text" id="qq"> <button onclick="qq()">搜索</button> </div> <table id="dg"></table> <!-- 新增修改对应的编辑窗体 closed:是否关闭 --> <div id="dd" class="easyui-dialog" title="编辑窗体" style="width: 400px; height: 200px;" data-options="iconCls:'icon-save',resizable:true,modal:true,buttons:'#bb',closed:true"> <!-- 自定义正则属性 $.extend({ }) --> <form id="ff" method="post"> <input type="hidden" name="SerialNo" /> <div> <label for="name">uid:</label> <input class="easyui-validatebox" type="text" name="uid" data-options="required:true," /> </div> <div> <label for="uname">uname:</label> <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" /> </div> <div> <label for="upwd">upwd:</label> <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" /> </div> </form> </div> <div id="bb"> <a href="#" class="easyui-linkbutton" onclick="ok()">保存</a> <a href="#" class="easyui-linkbutton" onclick="no()">关闭</a> </div> </body> </html>
datagrid_data1.json:
{"total":28,"rows":[ {"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}, {"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"}, {"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}, {"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"}, {"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"}, {"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}, {"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"}, {"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"}, {"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"} ]}
userManage.js:
$(function() { $('#dg').datagrid({ // 优先选择全路径名 url:'/easyui/userAction.action?methodName=list', pagination:true, // 分页 fitColumns:true, // 填充多余的部分 // fit:true, //霸屏 columns:[[ {field:'uid',title:'代码',width:100}, {field:'uname',title:'名称',width:100}, {field:'upwd',title:'价格',width:100,align:'right'} ]], // 通过数组定义工具栏: toolbar: [{ iconCls: 'icon-add', handler: function(){ $('#ff').form('clear'); // 清空数据 $('#dd').dialog('open'); // 打开窗口 } },{ iconCls: 'icon-edit', handler: function(){ // 通过easyui的form控件直接回填选中行的数据 var row = $('#dg').datagrid('getSelected'); // console.log(row); if(row){ // 打开和关闭窗口 $('#dd').dialog('open'); $('#ff').form('load',row); }else{ alert("请选择你要修改的数据!"); } $('#ff').form('load','get_data.php'); // 读取表单的URL } },'-',{ iconCls : 'icon-remove', handler : function() { var row = $('#dg').datagrid('getSelected'); if (null == row) { $.messager.alert('警告', '请选中行'); return false; } $.messager.confirm('确认', '您确认要删除记录吗', function(r) { if(r){ $.ajax({ url:$("#myy").val()+'/userAction.action?methodName=del&SerialNo='+row.SerialNo, success: function(param){ // 重新载入页面 $('#dg').datagrid('reload'); } }) } }) } } ] }); }) // 保存数据 function ok(){ var urls = '/easyui/userAction.action?methodName=edit'; var SerialNo = $('#SerialNo').val(); if(SerialNo == null || SerialNo == ""){ urls = '/easyui/userAction.action?methodName=add'; } // 提交操作 $('#ff').form('submit', { url: urls, success:function(data){ console.log(data); // 将json串转成json对象 var res = eval('('+ data +')'); // 比如说如果返回1代表成功,0代表失败,还有业务逻辑要处理的话,由前端完成 if(res.code == 1){ $('#dd').dialog('close'); // 关闭窗口 $('#dg').datagrid('reload'); // 重新载入当前页面数据 }else{ alert("失败!"); } } }); } // 关闭窗口 function no() { $('#dd').dialog('close'); } // 查询 function qq() { var query = $("#qq").val(); $("#dg").datagrid( { url : $("#myy").val() + '/userAction.action?methodName=query&uname=' + query }); }
后台:
dao包:
UserDao.java:
package com.qiuwenfan.dao; import java.util.List; import java.util.Map; import com.qiuwenfan.util.JsonBaseDao; import com.qiuwenfan.util.JsonUtils; import com.qiuwenfan.util.PageBean; import com.qiuwenfan.util.StringUtils; public class UserDao extends JsonBaseDao { /** * 用于查询用户分页列表所用 * 用于用户登录所用 * @param map * @param pageBean * @return * @throws Exception */ public List<Map<String, Object>> list(Map<String, String[]> map,PageBean pageBean) throws Exception{ String sql = "select * from t_easyui_user_version2 where true "; String uid = JsonUtils.getParamVal(map, "uid"); String upwd = JsonUtils.getParamVal(map, "upwd"); if(StringUtils.isNotBlank(uid)) { sql += " and uid =" +uid; } if(StringUtils.isNotBlank(upwd)) { sql += " and upwd =" + upwd; } return super.executeQuery(sql, pageBean); } /** * 通过用户登录的唯一账号,在用户父权限中间表中获取菜单ID的集合 * * @param map * @param pageBean * @return * @throws Exception */ public List<Map<String, Object>> getMenusByUser(Map<String, String[]> map,PageBean pageBean) throws Exception{ String sql = "select * from t_easyui_usermenu where true "; String uid = JsonUtils.getParamVal(map, "uid"); String upwd = JsonUtils.getParamVal(map, "upwd"); if(StringUtils.isNotBlank(uid)) { sql += " and uid =" +uid; } return super.executeQuery(sql, pageBean); } /** * 修改 * @param map * @return * @throws Exception */ public int edit(Map<String, String[]> map) throws Exception{ String sql = "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno=?"; return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, map); } /** * 查询SerialNoMax的最大值 * @param map * @return * @throws Exception */ public List<Map<String, Object>> SerialNoMax(Map<String, String[]> map) throws Exception{ String sql = "select max(SerialNoMax) from t_easyui_user_version2"; return super.executeQuery(sql, null); } /** * 新增信息 * @param map * @return * @throws Exception */ public int add(Map<String, String[]> map) throws Exception{ List<Map<String, Object>> SerialNo = this.SerialNoMax(map);//获取最大唯一标识符 int serialno = Integer.valueOf(SerialNo.toString().substring(16,17))+1; String sql = "insert into t_easyui_user_version2 values('"+serialno+"',?,?,?)"; return super.executeUpdate(sql, new String [] {"uid","uname","upwd"},map); } /** * 删除信息 * @param map * @return * @throws Exception */ public int del(Map<String, String[]> map) throws Exception{ String sql="delete from t_easyui_user_version2 where serialno = ? "; return super.executeUpdate(sql, new String[] {"SerialNo"},map); } /** * 按uname模糊查询信息 * @param paMap * @param pageBean * @return * @throws Exception */ public List<Map<String, Object>> query(Map<String, String[]> paMap,PageBean pageBean) throws Exception{ 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包:
UserAction.java:
package com.qiuwenfan.web; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; import com.qiuwenfan.dao.UserDao; import com.qiuwenfan.util.PageBean; import com.qiuwenfan.util.ResponseUtil; import com.zking.framework.ActionSupport; public class UserAction extends ActionSupport { private UserDao userDao = new UserDao(); public String login(HttpServletRequest req, HttpServletResponse resp) { String code = "index"; // 登录 try { List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null); if (list.size() == 1 && list != null) { // 用户存在 List<Map<String, Object>> menusList = this.userDao.getMenusByUser(req.getParameterMap(), null); StringBuilder sb = new StringBuilder(); for (Map<String, Object> map : menusList) { sb.append("," + map.get("menuId")); System.out.println(sb.toString()); } // ,001,002 req.setAttribute("menuIds", sb.substring(1)); } else { // 用户不存在 req.setAttribute("msg", "用户不存在"); code = "login"; } } catch (Exception e) { e.printStackTrace(); code = "login"; } return code; } /** * easyui的datagrid的数据来源 * @param req * @param resp * @return */ public String list(HttpServletRequest req, HttpServletResponse resp) { Map<String, Object> map = new HashMap<String, Object>(); PageBean pageBean = new PageBean(); pageBean.setRequest(req); try { List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean); map.put("total", pageBean.getTotal()); map.put("rows", list); ObjectMapper om = new ObjectMapper(); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 修改 * @param req * @param resp * @return */ public String edit(HttpServletRequest req, HttpServletResponse resp) { try { this.userDao.edit(req.getParameterMap()); ObjectMapper om = new ObjectMapper(); Map<String, Object> map = new HashMap<String, Object>(); map.put("code", 1); map.put("msg", "成功"); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 新增 * * @param req * @param resp * @return */ public String add(HttpServletRequest req, HttpServletResponse resp) { try { this.userDao.add(req.getParameterMap()); ObjectMapper om = new ObjectMapper(); Map<String, Object> map = new HashMap<String, Object>(); map.put("code", 1); map.put("msg", "成功"); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 删除 * * @param req * @param resp * @return */ public String del(HttpServletRequest req, HttpServletResponse resp) { try { int del = this.userDao.del(req.getParameterMap()); ObjectMapper om = new ObjectMapper(); Map<String, Object> map = new HashMap<String, Object>(); map.put("code", 1); map.put("msg", "成功"); ResponseUtil.write(resp, om.writeValueAsString(map)); } catch (Exception e) { 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) { e.printStackTrace(); } return "index"; } }
图片结果(增删改查):
界面显示:
修改(马六):
增加信息:
删除信息:
查询信息:
相关文章推荐
- easyui高级控件01
- easyui高级控件之权限
- easyUI增删改查的高级控件
- easyui高级控件
- easyui高级控件(增修删)
- easyui高级控件(二)
- easyui高级控件02
- easyui高级控件(1)
- easyui高级控件_01
- Android 高级UI设计笔记14:Gallery(画廊控件)之 3D图片浏览
- 基于MVC+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面
- 金山卫士开源软件之旅(九) KUI高级界面(列表控件、树控件例子、超文本、网页控件)
- Barcode Writer SDK高级条形码读写控件
- ASP.NET 2.0中Gridview控件高级技巧
- 如何清除或初始化 easyui 的 treegrid 控件的数据
- Android开发教程:Android常见的十个高级控件
- Android 高级图片滚动控件,编写3D版的图片轮播器
- easyUI 日期控件修改...
- Android高级控件——GridView ScrollView ViewPager (上)
- ASP.NET中Gridview控件高级技巧详细分析