您的位置:首页 > 产品设计 > UI/UE

【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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: