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>
<!-- 其他頁面調用時,確保引入的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.getParameter("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