版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在上个博客中介绍了extjs6.2连库操作中的查询，今天在查询的基础继续给大家带来增删改的操作。
添加和修改都采用日期的格式。
其中添加，运行了右浮动的操作，用按钮来显示窗口事件。
删除则是直接通过提示按钮来给后台传递数据。
修改的改我采用的是双击事件来显示修改窗口。
所以的字段格式（除id外）都采用的是string的格式。也并没有加判定这也是之后要加的。
先给大家看下查询的效果图
这里的话我的添加按钮采用有边浮动，默认为左边可以选择性修改。接下来是添加的界面
这里的话大家就可以清楚的看见这个日期格式的好处。接下来是双击的修改界面
这就是这个项目中的效果图接下来是代码展示。
首先还是js的代码块。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all.css" />
<link rel="stylesheet" type="text/css"
href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all-debug.css" />
<script src="extjs6/build/ext-all.js"></script>
<script src="extjs6/build/ext-debug.js"></script>
<script src="extjs6/build/classic/locale/locale-zh_CN.js"></script>
<script src="extjs6/ext-bootstrap.js"></script>
<script type="text/javascript " src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var data;
//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'sex', type: 'string' },
{ name: 'bornDate', type: 'string' },
]
});
$.ajax({
url : "${pageContext.request.contextPath}/StudentServlet?method=select",
async : false, //将ajax的异步改为同步就可以将 局部变量保存下来
success : function(res) {
data=res;
}
});
//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
data:data
});
//3.创建grid
var viewport = Ext.create("Ext.container.Viewport", {
layout: "fit",
autoExpandColumn:3, //自动扩展 下标为3的表格
items: {
xtype: "grid",
model: "MyApp.model.User",
store: store,
tbar:[
"->", //让下边的 添加按钮向右边浮动
{
xtype:"button",
text:"添加",
handler:function(){
var win1= new Ext.Window({
title:"添加学生",
width:300,
height:220,
layout: "fit",
items: {
xtype: "form",
name:"f2",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "id", fieldLabel: "id" ,hideLabel:true,hidden:true},
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "textfield", name: "sex", fieldLabel: "性别" },
{ xtype: "textfield", name: "email", fieldLabel: "email" },
{ xtype: "datefield", name: "bornDate", fieldLabel: "生日" },
]
},
buttons:[{
text: "保存", handler: function () {
var name= win1.down("form").getForm().findField("name").getValue();
var sex= win1.down("form").getForm().findField("sex").getValue();
var email= win1.down("form").getForm().findField("email").getValue();
var bornDate= win1.down("form").getForm().findField("bornDate").getValue();
console.log(name+sex+email+bornDate)
$.ajax({
url:"${pageContext.request.contextPath}/StudentServlet?method=insert",
data:{
"name":name,
"sex":sex,
"email":email,
"bornDate":bornDate
},
success:function(res){
win1.close();
Ext.Msg.alert("添加","添加成功");
window.location.href="index.jsp";
}
})
},
}]
}).show();
}
}],
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '性别', dataIndex: 'sex' },
{ text: 'email', dataIndex: 'email',width:150 },
{ text: '出生日期', dataIndex: 'bornDate', xtype: 'datecolumn', format:'Y年m月d日',width:200},
{ renderer: function(value, cellmeta, record) {
var display='<input type="button" class="remove" value="删除" />';
return display;
}
}
],
listeners:{
cellClick : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var remove = e.getTarget('.remove');
if (remove) {
var flightdataNum = grid.getHeaderAtIndex(0).dataIndex;//当前行的第一列列名
var record = grid.getStore().getAt(rowIndex); //获取当前行
var data = record.get(flightdataNum); //获取当前行第一列的值
var id=record.id; //直接获取你想要的获取的当前行的值
Ext.Msg.confirm("删除","你确认要删除这条信息吗",function(op){
if(op=='yes')
$.ajax({
url : "${pageContext.request.contextPath}/StudentServlet?method=delete",
data:{
"id":id,
},
success : function(res) {
window.location.href="index.jsp";
}
});
})
}
}
}
}
});
//4.添加双击编辑
var grid = viewport.down("grid");
grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
//5.创建编辑表单
var win = Ext.create("Ext.window.Window", {
title: "编辑用户",
width: 300,
height: 220,
layout: "fit",
items: {
xtype: "form",
name:"f",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "id", fieldLabel: "id" ,hideLabel:true,hidden:true},
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "textfield", name: "sex", fieldLabel: "性别" },
{ xtype: "textfield", name: "email", fieldLabel: "email" },
{ xtype: "datefield", name: "bornDate", fieldLabel: "生日" },
]
},
buttons: [
{
text: "保存", handler: function () {
var id= win.down("form").getForm().findField("id").getValue();
var name= win.down("form").getForm().findField("name").getValue();
var sex= win.down("form").getForm().findField("sex").getValue();
var email= win.down("form").getForm().findField("email").getValue();
var Date= win.down("form").getForm().findField("bornDate").getValue();
if((Date.getMonth() + 1)<10&&Date.getDate()<10){
var bornDate=Date.getFullYear() + '-0' + (Date.getMonth() + 1) + '-0' + Date.getDate();
}else if(Date.getDate()<10){
var bornDate=Date.getFullYear() + '-' + (Date.getMonth() + 1) + '-0' + Date.getDate()
}else if((Date.getMonth() + 1)<10){
var bornDate=Date.getFullYear() + '-0' + (Date.getMonth() + 1) + '-' + Date.getDate()
}
//给后台传递参数
$.ajax({
url : "${pageContext.request.contextPath}/StudentServlet?method=update",
async : false, //将ajax的异步改为同步就可以将 局部变量保存下来
data:{
"id":id,
"name":name,
"sex":sex,
"email":email,
"bornDate":bornDate
},
success : function(res) {
win.down("form").updateRecord();
record.commit();
win.close();
Ext.Msg.alert("修改","修改信息成功")
}
});
}
}
]
});
win.down("form").loadRecord(record);
win.show();
});
});
</script>
</head>
<body>
</body>
</html>
dao层
/**
* @param shopp
* 修改信息
*/
public void upadte(Student student) {
String sql="update student set name=?,sex=?,email=?,bornDate=? where id=?";
connection=JdbcUtil.getConnection();
Object[] param= {student.getName(),student.getSex(),student.getEmail(),student.getBornDate()
, student.getId()};
try {
qr.update(connection, sql, param);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
JdbcUtil.closeConnection(connection);
}
}
/**
* @param shopp
* 删除信息
*/
public void delete(Integer id) {
String sql="delete from student where id=?";
connection=JdbcUtil.getConnection();
try {
qr.update(connection, sql, id);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
JdbcUtil.closeConnection(connection);
}
}
/**
* @param shopp
* 添加信息
*/
public void insert(Student student) {
String sql="insert into student (name,sex,email,bornDate)values(?,?,?,?) ";
connection=JdbcUtil.getConnection();
Object[] param= {student.getName(),student.getSex(),student.getEmail(),student.getBornDate()
};
try {
qr.update(connection, sql, param);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
JdbcUtil.closeConnection(connection);
}
}
最后是servlet层
/**
* @param request
* @param response
* @return 修改学生信息
* @throws Exception
*/
public String update(HttpServletRequest request,HttpServletResponse response) throws Exception {
System.out.println("修改信息开始");
String cid=request.getParameter("id");
Integer id=Integer.parseInt(cid);
String name=request.getParameter("name");
String email=request.getParameter("email");
String sex=request.getParameter("sex");
String bornDate=request.getParameter("bornDate");
Student student=new Student(id, name, email, sex, bornDate);
new StudentDao().upadte(student);
response.setContentType("application/json;charset=UTF-8");
response.getWriter().println(true);
System.out.println("修改成功完成");
return null;
}
/**
* @param request
* @param response
* @return 学生信息删除
* @throws Exception
*/
public String delete(HttpServletRequest request,HttpServletResponse response) throws Exception {
System.out.println("删除信息开始");
String cid=request.getParameter("id");
Integer id= Integer.parseInt(cid);
new StudentDao().delete(id);
response.setContentType("application/json;charset=UTF-8");
response.getWriter().println(true);
System.out.println("删除信息完成");
return null;
}
/**
* @param request
* @param response
* @return 学生信息添加
* @throws Exception
*/
public String insert(HttpServletRequest request,HttpServletResponse response) throws Exception {
System.out.println("添加信息开始");
String name=request.getParameter("name");
String email=request.getParameter("email");
String sex=request.getParameter("sex");
String bornDate=request.getParameter("bornDate");
Student student=new Student(0, name, email, sex, bornDate);
new StudentDao().insert(student);
response.setContentType("application/json;charset=UTF-8");
response.getWriter().println(true);
System.out.println("添加信息完成");
return null;
}
总结：需要注意的几点：
1、往后台传日期格式的时候需要进行判定否则双击编辑的日期将不会显示；
2、我这里才用的是普通的ajax提交方式，也可以采用表单的ajax方式提交；
3、在上一个博客中说到，如果需要将ajax中的局部变量保存下来将异步改为同步即可；
4、浮动可以选择性取消。