【EasyUI】Maven+Servlet项目进行DataGrid获取、查询、新增、删除、修改
2017-12-16 21:21
591 查看
DataGrid获取、查询、新增、删除、修改操作
1.项目结构
采用Maven+Servlet普通JavaWeb模式jsp页面未进行访问控制:没有放在WEB-INF文件夹内
主要Java代码位于dataGrid包中
2.页面布局
2.1head.jsp引入相关js/css
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/icon.css"> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/validate.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/easyui-default.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/common.js"></script> <script type="text/javascript"> function formatterDateBox(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d); } $.fn.serializeObject = function() {//提供form序列化 var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; </script>
2.2datagGrid页面
<%@ 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"> <title>dataGrid</title> </head> <%@ include file = "head.jsp" %> <body> <!-- 其他页面调用时,确保引 4000 入的js文件在body内,否则不会加载引入相关 文件 --> <script type="text/javascript" src="<%=request.getContextPath()%>/js/grid.js"></script> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',border:true" title="菜单" style="width:200px;"> </div> <div data-options="region:'center',border:false" title=""> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',border:false" title="查询条件" style="height:90px"> <div style="width: 970px;"> <form id="qf"> <table> <tr> <td >用户名:</td> <td><input name="username" class="easyui-textbox" /></td> <td >真实姓名:</td> <td><input name="realname" class="easyui-textbox"/></td> <td >CC:</td> <td><input name="cc" class="easyui-datebox" data-options="editable:false,formatter:formatterDateBox"></input></td> <td> <a id="query" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-zoom'">查询</a> </td> </tr> <tr> <td>DD:</td> <td><input name="dd" class="easyui-textbox" /></td> <td>EE:</td> <td colspan="3"><input name="ee" class="easyui-textbox" /></td> <td> <a id="clear" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-cross'">重置</a> </td> </tr> </table> </form> </div> </div> <div data-options="region:'center',border:false" title="数据列表"> <table id="grid" toolbar="#gridbar"></table> <div id="gridbar"> <div style="padding: 2px"> <a id="addBtn" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-add'">新增</a> <a id="updateBtn" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-page_edit'">查看/更新</a> <a id="delBtn" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-delete'">删除</a> </div> </div> </div> </div> </div> </div> </body> </html>
3.数据库连接+datagrid数据返回类
3.1数据库连接类
package dataGrid; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; /** * 工具类:连接数据库+字符转换 * @author wsz * @date 2017年12月16日 */ public class ConnUtil { private static String DRIVER = "com.mysql.jdbc.Driver"; private static String URL = "jdbc:mysql://localhost:3306/mybatis?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC"; private static String USR ="wsz"; private static String PASSWORD ="wsz"; public static Connection getConnection() { try { Class.forName(DRIVER); try { Connection connection = DriverManager.getConnection(URL, USR, PASSWORD); return connection; } catch (SQLException e) { e.printStackTrace(); } } catch (ClassNotFoundException e) { System.out.println("类加载失败"); e.printStackTrace(); } return null; } public static void clearSelectConn(Connection conn,PreparedStatement pst, ResultSet rs) { try { if(rs != null) rs.close(); if(pst != null) pst.close(); if(conn != null) conn.close(); }catch(SQLException e) { e.printStackTrace(); } } public static void clearUpdateConn(Connection conn, PreparedStatement pst) { try { if(conn != null )conn.close(); if(pst != null) pst.close(); } catch (SQLException e) { e.printStackTrace(); } } public static String nullToEmpty(Object obj) { return obj == null ? "" : String.valueOf(obj); } }
3.2封装DataGrid数据类
package dataGrid; import java.util.List; public class DataGrid { private long total; private List<?> rows; public long getTotal() { return total; } public void setTotal(long total) { this.total = total; } public List<?> getRows() { return rows; } public void setRows(List<?> rows) { this.rows = rows; } }
4.dataGrid数据操作
所有数据操作url,指向对应的Servlet。var URL = { gridData : "GetDataGrid", deleteByIds : "DeleteGridData", formWin : "newWin.jsp", getInfo : "GetInfo" };
4.1获取数据
/** grid对象+渲染+按钮* */ var grid = $("#grid"); renderGrid(); bindGridToorBar(); //渲染datagrid,固定数据无法分页。 function renderGrid(){ grid.datagrid({ url :URL.gridData, onDblClickRow : function(index,row) {//双击事件 openFormWin(row.id); }, frozenColumns :[[ {field:"id",checkbox:true}, {field:"name",title:"a",align:"left",halign:"center",width:100}, {field:"idcard",title:"b",align:"left",halign:"center",width:100}, {field:"c",title:"c",align:"left",halign:"center",width:100}, ]], columns:[[ {field:"d",title:"d",align:"left",halign:"center",width:100}, {field:"e",title:"e",align:"left",halign:"center",width:100}, {field:"f",title:"f",align:"left",halign:"center",width:100}, {field:"g",title:"g",align:"left",halign:"center",width:100}, {field:"h",title:"h",align:"left",halign:"center",width:100}, {field:"cz",title:"操作",align:"center",halign:"center",width:200,formatter: fmtCz} ]], onLoadSuccess : function(){ $(".fmtBtn").linkbutton({ plain : true, onClick : function(){ var id = $(this).data("id"); doSomething(id); } }); //也可用只渲染为按钮 $(".fmtBtn").each(function(){ var d = $(this).data("d"); $(this).tooltip({ position: 'right', content: "<span style='color:#abc'>"+d+"</span>", onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); }); } }) } /** * formatter方法 */ function fmtCz(value,row,index){ return "<a class='fmtBtn' data-id='"+row.id+"' data-d='"+row.d+"' href='#' style='background-color:#36BDEF;color:#FFFFFF;'>点击</a>"; }
package dataGrid; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSONObject; /** * 获取datagrid数据列表并分页 * @author wsz * @date 2017年12月16日 */ public class GetDataGrid extends HttpServlet { private static final long serialVersionUID = 1L; public GetDataGrid() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int page = Integer.parseInt("".equals(ConnUtil.nullToEmpty(request.getParameter("page"))) ? "0" : request.getParameter("page")); int rows = Integer.parseInt("".equals(ConnUtil.nullToEmpty(request.getParameter("rows"))) ? "0" : request.getParameter("rows")); String uname = ConnUtil.nullToEmpty(request.getParameter("username")); String rname = ConnUtil.nullToEmpty(request.getParameter("realname")); String conditions = "";//判断和组装查询条件 if(!"".equals(uname)) { conditions += " and username = '"+uname+"' "; } if(!"".equals(rname)) { conditions += " and real_name like '%"+rname+"%' "; } PreparedStatement ps = null; ResultSet rs = null; Connection conn = ConnUtil.getConnection(); page = (page < 0) ? 1 : page; rows = (rows < 0) ? 0 : rows; int start = (page-1)*rows; int end = page*rows-1; List<Student> list = new ArrayList<Student>(); if(conn != null) { try { String sql = "select * from t_user where deleted=0 "+conditions+" limit ?,?"; ps = conn.prepareStatement(sql); ps.setInt(1, start); ps.setInt(2, end); rs = ps.executeQuery(); int count=0; while(rs.next()) { int id = rs.getInt("id"); String username = rs.getString("username"); String realName = rs.getString("real_name"); Student s = new Student(); s.setId(id); s.setName(username); s.setIdcard(realName); list.add(s); count++; } DataGrid grid = new DataGrid(); grid.setTotal(count); grid.setRows(list); response.getWriter().write(JSONObject.toJSONString(grid));//返回数据必须满足格式 } catch (SQLException e) { e.printStackTrace(); }finally { ConnUtil.clearSelectConn(conn,ps,rs); } } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
4.3查询
/** 查询表单+按钮* */ var queryForm = $("#qf"); bindSearchBtns(); /** 查询按钮事件 **/ function bindSearchBtns(){ //带参数,也可序列化数组类型,load时可查看js中url中的参数 $("#query").unbind().bind("click",function(){ var formData = queryForm.serializeObject({transcript:"overlay"});//序列化时,必须有head.jsp中定义的方法 grid.datagrid("load",formData);//查询并获取 }); //查询form清空 $("#clear").unbind().bind("click",function(){ queryForm.form("clear"); }); }
4.4新增+查看/修改+删除
三个操作按钮新增页面
修改页面(与新增页面同一个,注意隐藏的id属性),同时需要formLoadData从后台获取信息
删除:只需要获取grid列表中的主键信息。
/** grid按钮事件* */ function bindGridToorBar() { $("#addBtn").bind("click",function(){ openFormWin(); }); $("#updateBtn").bind("click",function(){ var row = gridSelectedValid(grid); if(row){ openFormWin(row.id); } }); $("#delBtn").bind("click",function(){ deleteByIds(); }); }
/**跳转到其他页面**/ function openFormWin(id){ var win = $("<div id='newWin'></div>").window({ title : id ? "查看" :"新增", href :URL.formWin, width : 500, height : 300, onLoad : function(){ if(id){ formLoadData(id); } }, onClose : function() { win.window('destroy'); } }); } //查询数据并渲染展示到页面 function formLoadData(id){ $.ajax({ type : "get", url :URL.getInfo, data : {id:id}, success : function(data){ //{id:"1",username:"111",realname:"11111"} var json = jQuery.parseJSON(data);//转换一次数据结构 $("#saveForm").form("load", json);//填入数据 } }); } //删除测试 function deleteByIds(){ var ids = gridCheckedValid(grid); if(ids){ $.messager.confirm("提示","是否确定?",function(r){ if(r){ $.messager.progress({text:"正在保存..."}); $.ajax({ url : URL.deleteByIds, type : "get", data :{ids:ids}, success : function(data){ $.messager.progress("close"); $.messager.show({ title:'提示', msg:data }); if(data == "success"){//操作成功进行刷新 grid.datagrid("reload"); } } }); } }); } }
4.5新增/修改操作
<%@ 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"> <title>新增/修改页面</title> </head> <body> <!-- 注意引入js的位置必须包含在body内 --> <script type="text/javascript" src="<%=request.getContextPath()%>/js/newWin1.js"></script> <div id="cc" class="easyui-layout" data-options="fit:true"> <div data-options="region:'center'" style="padding:3px;background:#eee;"> <form id="saveForm"> <input name="id" type="hidden"/> <table> <tr> <td>用户名</td> <td><input name="username" class="easyui-textbox" data-options="required:true"/></td> </tr> <tr> <td>真实姓名</td> <td><input name="realname" class="easyui-textbox" /></td> </tr> </table> </form> </div> <div data-options="region:'south'" style="height:33px;padding:3px;text-align: center" > <a id="saveBtn" class="easyui-linkbutton" data-options="iconCls:'icon-page_save'">保存</a> <a id="closeBtn" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">关闭</a> </div> </div> </body> </html>
$(function(){ var URL = { saveObj : "AddGridData" }; var addForm = $("#saveForm"); renderBtn(); function renderBtn(){ $("#saveBtn").bind("click",function(){ saveObj(); }); $("#closeBtn").bind("click",function(){ $("#newWin").window("destroy");//close有时会无法关闭,可直接销毁 }); } function saveObj(){ var formData = addForm.serializeObject(); if(addForm.form("validate")){ $.messager.confirm("提示","是否保存?",function(r){ if(r){ $.messager.progress({text:"正在保存..."}); $.ajax({ url : URL.saveObj, data :formData, type :"post", success: function(data){ $.messager.progress("close"); $.messager.show({ title:'提示', msg:data }); if(data == "success"){ $("#newWin").window("destroy");//close有时会无法关闭,可直接销毁 $("#grid").datagrid("load");//刷新datagrid } } }); } }); } } });
package dataGrid; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 新增/修改servlet * @author wsz * @date 2017年12月16日 */ public class AddGridData extends HttpServlet { private static final long serialVersionUID = 1L; public AddGridData() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id = ConnUtil.nullToEmpty(request.getParameter("id")); String username = ConnUtil.nullToEmpty(request.getParameter("username"));; String realname = ConnUtil.nullToEmpty(request.g b909 etParameter("realname")); //判断操作类型。不存在(为空)id即新增;否则为修改更新 boolean isOk = false; if(!"".equals(id)) { isOk = updateObj(id,username,realname); }else { isOk = saveObj(username,realname); } response.getWriter().write(isOk ? "success" : "false"); doGet(request, response); } /** * 更新操作 * @param id * @param username * @param realname * @return */ private boolean updateObj(String id, String username, String realname) { Connection conn = ConnUtil.getConnection(); PreparedStatement pst = null; int count = 0; if(conn != null) { String sql = "update t_user set username = ? , real_name = ? where id = ?"; try { pst = conn.prepareStatement(sql); pst.setString(1, username); pst.setString(2, realname); pst.setInt(3, Integer.parseInt(id)); count = pst.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } } return count > 0 ? true : false; } /** * 保存操作 * @param username * @param realname * @return */ public boolean saveObj(String username,String realname) { Connection conn = ConnUtil.getConnection(); PreparedStatement pst = null; int total = 0; if(conn != null) { String sql = "insert into t_user(username,real_name,password,deleted) " + " values(?,?,'123456',0)"; try { pst = conn.prepareStatement(sql); pst.setString(1, username); pst.setString(2, realname); total = pst.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); }finally { ConnUtil.clearUpdateConn(conn,pst); } }else { System.out.println("连接数据库失败"); } return total > 0 ? true : false ; } }
4.6删除代码
package dataGrid; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 删除操作servlet * @author wsz * @date 2017年12月16日 */ public class DeleteGridData extends HttpServlet { private static final long serialVersionUID = 1L; public DeleteGridData() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String ids= request.getParameter("ids"); Connection conn = ConnUtil.getConnection(); PreparedStatement pst = null; int rs =0; try { String sql = "update t_user set deleted = 1 where id in ("+ids+")"; System.out.println(sql); pst = conn.prepareStatement(sql); rs = pst.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); }finally { ConnUtil.clearUpdateConn(conn, pst); } response.getWriter().write((rs > 0) ? "success" : "false"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
4.7完整grid.js
$(function(){
var URL = { gridData : "GetDataGrid", deleteByIds : "DeleteGridData", formWin : "newWin.jsp", getInfo : "GetInfo" };
/** 模块名称* */
var modelName = "demo";
/** 查询表单+按钮* */
var queryForm = $("#qf");
bindSearchBtns();
/** grid对象+渲染+按钮* */
var grid = $("#grid");
renderGrid();
bindGridToorBar();
//渲染datagrid,固定数据无法分页。
function renderGrid(){
grid.datagrid({
url :URL.gridData,
onDblClickRow : function(index,row) {//双击事件
openFormWin(row.id);
},
frozenColumns :[[
{field:"id",checkbox:true},
{field:"name",title:"a",align:"left",halign:"center",width:100},
{field:"idcard",title:"b",align:"left",halign:"center",width:100},
{field:"c",title:"c",align:"left",halign:"center",width:100},
]],
columns:[[
{field:"d",title:"d",align:"left",halign:"center",width:100},
{field:"e",title:"e",align:"left",halign:"center",width:100},
{field:"f",title:"f",align:"left",halign:"center",width:100},
{field:"g",title:"g",align:"left",halign:"center",width:100},
{field:"h",title:"h",align:"left",halign:"center",width:100},
{field:"cz",title:"操作",align:"center",halign:"center",width:200,formatter: fmtCz}
]],
onLoadSuccess : function(){
$(".fmtBtn").linkbutton({
plain : true,
onClick : function(){
var id = $(this).data("id");
doSomething(id);
}
});
//也可用只渲染为按钮
$(".fmtBtn").each(function(){
var d = $(this).data("d");
$(this).tooltip({
position: 'right',
content: "<span style='color:#abc'>"+d+"</span>",
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});
});
}
})
}
/**
* formatter方法
*/
function fmtCz(value,row,index){
return "<a class='fmtBtn' data-id='"+row.id+"' data-d='"+row.d+"' href='#' style='background-color:#36BDEF;color:#FFFFFF;'>点击</a>";
}
/*
* 进行其他操作
*/
function doSomething(id){
alert(id);
}
/** grid按钮事件* */
function bindGridToorBar() {
$("#addBtn").bind("click",function(){
openFormWin();
});
$("#updateBtn").bind("click",function(){
var row = gridSelectedValid(grid);
if(row){
openFormWin(row.id);
}
});
$("#delBtn").bind("click",function(){
deleteByIds();
});
}
/** 查询按钮事件 **/
function bindSearchBtns(){
//带参数,也可序列化数组类型,load时可查看js中url中的参数
$("#query").unbind().bind("click",function(){
var formData = queryForm.serializeObject({transcript:"overlay"});
grid.datagrid("load",formData);
});
//查询form清空
$("#clear").unbind().bind("click",function(){
queryForm.form("clear");
});
}
/**跳转到其他页面**/
function openFormWin(id){
var win = $("<div id='newWin'></div>").window({
title : id ? "查看" :"新增",
href :URL.formWin,
width : 500,
height : 300,
onLoad : function(){
if(id){
formLoadData(id);
}
},
onClose : function() {
win.window('destroy');
}
});
}
//查询数据并渲染展示到页面
function formLoadData(id){
$.ajax({
type : "get",
url :URL.getInfo,
data : {id:id},
success : function(data){
//{id:"1",username:"111",realname:"11111"}
var json = jQuery.parseJSON(data);//转换一次数据结构
$("#saveForm").form("load", json);
}
});
}
//删除测试
function deleteByIds(){
var ids = gridCheckedValid(grid);
if(ids){
$.messager.confirm("提示","是否确定?",function(r){
if(r){
$.messager.progress({text:"正在保存..."});
$.ajax({
url : URL.deleteByIds,
type : "get",
data :{ids:ids},
success : function(data){
$.messager.progress("close");
$.messager.show({
title:'提示',
msg:data
});
if(data == "success"){//操作成功进行刷新
grid.datagrid("reload");
}
}
});
}
});
}
}
});
5.总结
注意点、可能遇到的问题与解决方法:统一的DataGrid返回数据结构类:DataGrid类。
注意分页的方法:默认传递到后台page、rows属性即当前页、页列表数,需要手动整理开始/结束的数据位置。
formLoadData时注意load的数据结构,不一致将无法加载。
var json = jQuery.parseJSON(data);//转换一次数据结构
注意访问的Servlet的路径,本文没有规范命名。注意默认访问类型到达的方法,doGet、doPost。
新增/查看页面路径最好经过sevlet的跳转。
gitHub位置:https://github.com/BeHappyWsz/easyui-datagrid.git
源码:http://download.csdn.net/download/qq_33560169/10161743
相关文章推荐
- JPA学习笔记---JPA数据的操作:增加,删除,修改,获取,使用JPQL进行查询
- JAVAEE——BOS物流项目04:学习计划、datagrid、分页查询、批量删除、修改功能
- JPA数据的操作:增加,删除,修改,获取,使用JPOL进行查询
- 操作excel,进行新增,查询,修改
- C#使用XmlDocument操作XML进行查询、增加、修改、删除、保存应用的实例
- jquery easyui datagrid实现增加、删除、修改
- php操作MongoDB基础教程(连接、新增、修改、删除、查询)
- [转]对web.config进行新增修改删除读取操作
- 对appSettings节点进行新增、修改、删除、读取操作的类AppSettingsHelper
- MYSQL使用inner join 进行 查询,删除,修改
- JDBC连接数据库(适当的封装查询、新增修改删除)的方法改进
- Active Directory如何用C#进行增加、删除、修改、查询用户与组织单位!
- 关于利用DataGrid进行数据查询、修改操作
- JAVA+JDBC对数据库的数据进行增加、修改、删除、查询等操作
- 如何在DataGrid中进行添加、删除和修改操作
- easyui-datagrid获取到日期格式的数据,在jsp页面进行格式化。
- EasyUI - DataGrid 组建 - [ 删除,修改 ]
- easyui datagrid 获取多条选中的数据进行操作
- 将一个Android项目修改为能够使用Maven进行构建
- easyui 获取datagrid的url和参数 获取url 获取查询参数