extjs+servlet填充gird实现增删改查
由于项目工程中还有许多其他的练习，不好讲项目上传！
下面只说和本文章相关的代码
usergrid.jsp
js也写在其中了所以会有点乱
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'usergird.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!--加载extjs4-->
<link rel="stylesheet" type="text/css"
href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/ext-all-debug.js"></script>
<!--ext4加载结束 -->
<script type="text/javascript">
//下面两行代码必须要，不然会报404错误
Ext.Loader.setConfig({
enabled : true
});
//我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux', 'ext4/examples/ux');
//预加载
Ext.require([ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*',
'Ext.ux.form.SearchField',
//Checkbox需要引用
'Ext.selection.CheckboxModel',
'Ext.selection.CellModel', 'Ext.ux.CheckColumn'
]
);
Ext
.onReady(function() {
var newFormWin;
// 创建Model
Ext.define('User', {
extend : 'Ext.data.Model',
fields : [ {
name : 'id',
mapping : 'id'
}, {
name : 'name',
mapping : 'name'
}, {
name : 'sex',
mapping : 'sex'
}, {
name : 'age',
mapping : 'age'
} ]
})
// 创建数据源
var store = Ext.create('Ext.data.Store', {
model : 'User',
// 设置分页大小
pageSize : 5,
proxy : {
type : 'ajax',
url : 'getUsersServlet',
reader : {
// 数据格式为json
type : 'json',
root : 'bugs',
// 获取数据总数
totalProperty : 'totalCount'
}
},
autoLoad : true,
actionMethods : {
read : 'post'
}
});
//创建多选框
var checkBox = Ext.create('Ext.selection.CheckboxModel');
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
//表示“双击”才可以修改内容（取值只能为“1”或“2”）
clicksToEdit : 2
}
);
// 创建grid
var grid = Ext
.create(
'Ext.grid.Panel',
{
tbar : [ {
xtype : 'button',
text : '添加',
handler : addFormWin
}, {
xtype : 'button',
text : '修改',
handler : edit_btn
}, {
xtype : 'button',
text : '删除',
handler : deleteUser
} ],
store : store,
selModel : checkBox,
columns : [ {
text : '编号',
width : 120,
dataIndex : 'id',
sortable : true
}, {
text : '姓名',
width : 120,
dataIndex : 'name',
sortable : true
}, {
text : '性别',
width : 120,
dataIndex : 'sex',
renderer:function(value){
if(value=='1'){
return '男';
}else{
return '女';
}
},
sortable : true
}, {
text : '年龄',
width : 120,
dataIndex : 'age',
sortable : true
} ],
height : 400,
width : 480,
x : 20,
y : 40,
title : 'ExtJS4 Grid分页查询示例示例',
renderTo : 'grid',
dockedItems : [
//多选框控件
{
dock : 'top',
xtype : 'toolbar',
items : [ {
itemId : 'Button',
text : '显示所选',
//tooltip:'Add a new row',
//iconCls:'add',
handler : function() {
var record = grid
.getSelectionModel()
.getSelection();
if (record.length == 0) {
Ext.MessageBox
.show({
title : "提示",
msg : "请先选择您要操作的行!"
//icon: Ext.MessageBox.INFO
})
return;
} else {
var ids = "";
for ( var i = 0; i < record.length; i++) {
ids += record[i]
.get("id")
if (i < record.length - 1) {
ids = ids
+ ",";
}
}
Ext.MessageBox
.show({
title : "所选ID列表",
msg : ids
})
}
}
} ]
},
//添加搜索控件
{
dock : 'top',
xtype : 'toolbar',
items : {
width : 200,
fieldLabel : '搜索姓名',
labelWidth : 70,
xtype : 'searchfield',
store : store
}
},
{
dock : 'bottom',
xtype : 'pagingtoolbar',
store : store,
displayInfo : true,
displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg : '没有数据'
} ],
// 分页功能
// bbar : Ext.create('Ext.PagingToolbar', {
// store : store,
// displayInfo : true,
// displayMsg : '显示{0}-{1}条，共计{2}条',
// emptyMsg : "没有数据"
// })
})
//添加窗口
var userForm = new Ext.FormPanel({
// collapsible : true,// 是否可以展开
labelWidth : 75, // label settings here cascade unless overridden
frame : true,
bodyStyle : 'padding:5px 5px 0',
waitMsgTarget : true,
//reader : _jsonFormReader,
// reader:new Ext.data.JsonReader({
// successProperty: 'success',
// root: 'list'
// },
// {name:'id',mapping:'id'},
// {name:'name',mapping:'name'},
// {name:'sex',mapping:'sex'},
// {name:'age',mapping:'age'}
// ),
defaults : {
width : 230
},
defaultType : 'textfield',
items : [ {
fieldLabel : 'id',
name : 'id',
emptyText : 'id',
hidden : true,
hideLabel : true,
allowBlank : true
}, {
fieldLabel : '用户名',
name : 'name',
emptyText : '用户名',
allowBlank : false
}, {
fieldLabel : '年龄',
name : 'age',
emptyText : '年龄',
xtype : 'numberfield',
allowBlank : false
},
new Ext.form.RadioGroup({
fieldLabel : '性别',
name : 'sex',
items : [ {
boxLabel : '男',
name : 'sex',
inputValue : 1
}, {
boxLabel : '女',
name : 'sex',
inputValue : 2
} ]
}) ]
});
store.loadPage(1);
//添加窗口
function addFormWin() {
// create the window on the first click and reuse on subsequent
// clicks 判断此窗口是否已经打开了，防止重复打开
if (!newFormWin) {
newFormWin = new Ext.Window({
// el : 'topic-win',
layout : 'fit',
width : 250,
height : 250,
closeAction : 'hide',
plain : true,
title : '添加用户',
items : userForm,
buttons : [ {
text : '保存',
disabled : false,
handler : function() {
addBtnsHandler();
newFormWin.hide();
}
}, {
text : '取消',
handler : function() {
userForm.form.reset();//清空表单
newFormWin.hide();
}
} ]
});
}
newFormWin.show();//显示此窗口
}
//添加窗口结束
//添加操作按钮
var addBtnsHandler = function() {
if (userForm.form.isValid()) {
userForm.form.submit({
url : 'addUserServlet',
waitMsg : '正在保存数据，稍后...',
success : function(form, action) {
Ext.Msg.alert('保存成功', '添加用户信息成功！');
userForm.form.reset();//清空表单
grid.getStore().load();
newFormWin.hide();
},
failure : function(form, action) {
Ext.Msg.alert('保存失败', '添加人员信息失败！');
}
});
} else {
Ext.Msg.alert('信息', '请填写完成再提交!');
}
};
//修改操作开始==========================================================================================================================
//点击修改按钮加载数据
function edit_btn(){
// var selectedKeys = grid.selModel.selections.keys;//returns array of selected rows ids only
var selectedKeys = grid.getSelectionModel().getSelection();
//判断是否选中一行数据 没有选中提示没有选中，选中加载信息
if(selectedKeys.length != 1){
Ext.MessageBox.alert('提示','请选择一条记录！');
} //加载数据
else{
var EditUserWin = new Ext.Window({
title: '修改员工资料', //题头
layout:'fit',//布局方式
width:280,//宽度
height:200,//高度
plain: true,//渲染
items:userForm,
//按钮
buttons: [{
text:'保存',
handler:function(){
updateHandler(EditUserWin);
}
},{
text: '取消',
handler: function(){
EditUserWin.hide();
}
}]
});
EditUserWin.show();
loadUser();
}
}
//加载数据
function loadUser(){
// var selectedKeys = grid.selModel.selections.keys;//returns array of selected rows ids only
var selectedKeys = grid.getSelectionModel().getSelection();
var userId=selectedKeys[0].get("id");
Ext.Msg.alert(userId);
userForm.form.load({
waitMsg : '正在加载数据请稍后',//提示信息
waitTitle : '提示',//标题
url : 'getUserServlet',
params:{userId:userId},
method:'POST',//请求方式
success:function(form,action){
Ext.Msg.alert('提示','数据加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','数据加载失败');
}
});
}
//修改按钮操作
function updateHandler(w){
if (userForm.form.isValid()) {
userForm.form.submit({
clientValidation:true,//进行客户端验证
waitMsg : '正在提交数据请稍后...',//提示信息
waitTitle : '提示',//标题
url : 'updateUserServlet',//请求的url地址
method:'POST',//请求方式
success:function(form,action){//加载成功的处理函数
w.hide();
userForm.form.reset();//清空表单
grid.getStore().load();
Ext.Msg.alert('提示','修改信息成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','ID不能修改');
Ext.Msg.alert('提示','修改信息失败');
}
});
}else {
Ext.Msg.alert('信息', '请填写完成再提交!');
}
}
//修改操作结束==========================================================================================================================
//删除用户
function deleteUser() {
//得到选中的行
var data = grid.getSelectionModel().getSelection();
Ext.Msg.alert(data);
if (data.length == 0) {
Ext.MessageBox.alert('提示', '请选择您要操作的行！');
} else {
Ext.Msg
.confirm(
'请确认',
'是否真的要删除数据',
function(button, text) {
if (button == "yes") {
//用于存放所要删除的数据
var ids = [];
//遍历并放入ids中
Ext.Array.each(data, function(
record) {
ids.push(record.data);
});
alert(ids.length);
Ext.Ajax
.request(
{
url : 'deleteUserServlet',
params : {
//在后台接收deleteUsers为要删除的对象
deleteUsers : Ext
.encode(ids)
},
method : 'POST',
success : function(
response) {
var success = Ext
.decode(response.responseText).success;
if (success) {
Ext.Array
.each(
data,
function(
record) {
//删除store中的数据，页面效果
store
.remove(record);
store
.load();
}
);
} else {
Ext.MessageBox
.show(
'提示',
'删除失败')
}
}
})
}
});
}
}
})
</script>
</head>
<div id="grid"></div>
<body>
</body>
</html>
DBConnection.java
package com.nuoxin.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DBConnection {
private static Connection connection;
private static Statement statement;
private static ResultSet resultSet;
public static Connection getConnection() {
try {
try {
Class.forName("com.mysql.jdbc.Driver");
System.out.println("加载驱动");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
connection = DriverManager
.getConnection(
"jdbc:mysql://localhost:3306/user",
"root", "root");
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("数据库连接失败");
e.printStackTrace();
}
return connection;
}
public static Statement getStatement() {
try {
statement = getConnection().createStatement();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return statement;
}
public static ResultSet getResultSet(String sql) {
try {
resultSet = getStatement().executeQuery(sql);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return resultSet;
}
public static void close(){
if (resultSet != null) {
try {
resultSet.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if (statement != null) {
try {
statement.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if (connection != null) {
try {
connection.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
public static void main(String[] args) throws SQLException {
ResultSet rs = getResultSet("select * from users");
while (rs.next()) {
try {
System.out.println(rs.getString("name"));
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
UserSerivce.java
package com.iss.service;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import com.nuoxin.pojo.Users;
import com.nuoxin.util.DBConnection;
public class UserService {
// 修改用户
public static void updateUser(Users user) {
String sql = "update users set name='" + user.getName() + "',sex='"
+ user.getSex() + "',age='" + user.getAge() + "' where id="
+ user.getId() + "";
try {
Statement statement = DBConnection.getStatement();
statement.executeUpdate(sql);
DBConnection.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
// 删除用户
public static void deleteUser(Users users) {
String sql = "delete from users where id=" + users.getId() + "";
try {
DBConnection.getStatement().executeUpdate(sql);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
DBConnection.close();
}
// 添加用户
public static void addUser(Users user) {
String sql = "insert into users values(null,'" + user.getName() + "','"
+ user.getSex() + "','" + user.getAge() + "')";
try {
DBConnection.getStatement().executeUpdate(sql);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
DBConnection.close();
}
public static Users getUser(int id) {
String sql = "select * from users where id=" + id;
Users user = null;
ResultSet resultSet = DBConnection.getResultSet(sql);
try {
while (resultSet.next()) {
user = new Users();
user.setId(resultSet.getInt("id"));
user.setName(resultSet.getString("name"));
user.setAge(resultSet.getString("sex"));
user.setSex(resultSet.getString("age"));
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return user;
}
}
几个servlet
getUsersServlet
package com.nuoxin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.naming.LimitExceededException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.nuoxin.util.DBConnection;
public class GetUsersServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
StringBuilder stringBuilder;
String start = request.getParameter("start");
System.out.println("start:" + start);
String limit = request.getParameter("limit");
System.out.println("limit:" + limit);
String query = request.getParameter("query");
System.out.println(query);
// 判断条件
String countSql = "select count(*) from users ";
String selectSql = "select * from users limit " + start + "," + limit
+ "";
if (query != null && !"".equals(query)) {
query = new String(query.getBytes("iso-8859-1"), "utf-8");
System.out.println("query:" + query);
countSql += " where name=‘" + query + "‘;";
System.out.println(countSql);
selectSql = "select * from users where name=‘" + query + "‘ limit "
+ start + "," + limit + "";
System.out.println(selectSql);
}
int total = 0;
ResultSet resultSet = DBConnection.getResultSet(countSql);
// 添加异常快捷键 alt+shift+z
try {
while (resultSet.next()) {
total = resultSet.getInt(1);
System.out.println("total:" + total);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
ResultSet rs = DBConnection.getResultSet(selectSql);
stringBuilder = new StringBuilder();
// 拼接json字符串 jdbc中下标从1开始
stringBuilder.append("{totalCount:" + total + ",bugs:[");
try {
while (rs.next()) {
stringBuilder.append("{");
stringBuilder.append("id:" + "\‘" + rs.getInt(1) + "\‘,");
stringBuilder.append("name:" + "\‘" + rs.getString(2) + "\‘,");
stringBuilder.append("sex:" + "\‘" + rs.getString(3) + "\‘,");
stringBuilder.append("age:" + "\‘" + rs.getString(4) + "\‘");
stringBuilder.append("},");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String json = null;
if (total != 0) {
json = stringBuilder.substring(0, stringBuilder.length() - 1);
}
// json = stringBuilder.substring(0, stringBuilder.length());
// json += "]}";
json = stringBuilder.append("]}").toString();
System.out.println("json:" + json);
out.print(json);
out.flush();
out.close();
}
}
getUserServlet 这个是修改用户时在userForm中加载用户
package com.nuoxin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.iss.service.UserService;
import com.nuoxin.pojo.Users;
import com.nuoxin.util.DBConnection;
public class GetUserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
int userId = Integer.parseInt(request.getParameter("userId"));
System.out.println("userId：" + userId);
Users user = UserService.getUser(userId);
// JSONArray jsonArray = JSONArray.fromObject(user);
System.out.println("{success:true,data:" + user + "}");
out.print("{success:true,data:" + user + "}");
// out.print("{success:true,data:{age:‘22‘,id:46,name:‘22‘,sex:‘22‘}}");
out.flush();
out.close();
}
}
addUserSevlet
package com.nuoxin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.iss.service.UserService;
import com.nuoxin.pojo.Users;
public class AddUserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String age = request.getParameter("age");
Users user=new Users();
user.setName(name);
user.setSex(sex);
user.setAge(age);
System.out.println("name:"+user.getName());
UserService.addUser(user);
out.print("{success:true}");
out.flush();
out.close();
}
}
deleteUserServlet 这里要注意引入解析json的包
package com.nuoxin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
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.iss.service.UserService;
import com.nuoxin.pojo.Users;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class DeleteUserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String deleteUsers = request.getParameter("deleteUsers");
System.out.println("deleteUsers:"+deleteUsers);
JSONArray jsonArray = JSONArray.fromObject(deleteUsers);
for (int i = 0; i < jsonArray.size(); i++) {
JSONObject jsonObject = jsonArray.getJSONObject(i);
UserService.deleteUser((Users) JSONObject.toBean(jsonObject,
Users.class));
}
out.print("{success:true}");
out.flush();
out.close();
}
}
updateUserServlet
package com.nuoxin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.iss.service.UserService;
import com.nuoxin.pojo.Users;
import com.nuoxin.util.DBConnection;
public class UpdateUserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
int id = Integer.parseInt(request.getParameter("id"));
Users user = UserService.getUser(id);
user.setName(request.getParameter("name"));
user.setAge(request.getParameter("age"));
user.setSex(request.getParameter("sex"));
UserService.updateUser(user);
out.print("{success:true}");
out.flush();
out.close();
}
}
点击打开链接这是整个项目链接地址
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
