简单的增删改查的例子。支持查询，多条删除，多条修改和增加：
jsp页面：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查看详细</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--自己引入extjs之类的相关库文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/hrmsStyle.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/pageFlows/postdoc/enter/test.js"></script>
</head>
<div id="QueryEnter" style="width:100%;height:100%;"></div>
</html>Ext.onReady(function() {
var _bodyWidth = Ext.get('QueryEnter').getWidth();// 获取页面定义宽度
var _bodyHeight = Ext.get('QueryEnter').getHeight();// 获取页面定义高度
/***************************************************************************
* 创建grid列表 ---------start---------
**************************************************************************/
// 创建序号
var rowNumber = new Ext.grid.RowNumberer();
// 创建复选框
var sm = new Ext.grid.CheckboxSelectionModel({
handleMouseDown : Ext.emptyFn
});// 重设行处理事件
//创建性别数组
var data = [['1','男'],['2','女']];
var sexStore = new Ext.data.ArrayStore({
fields:['value','text'],
data:data
});
// 创建列模型
var CM = new Ext.grid.ColumnModel([sm, rowNumber,
{
header : '姓名',
name : 'personName',
dataIndex : 'personName',
width : '80',
align : 'center',
editor:new Ext.form.TextField({
allowBlank: true,//表示不允许在textField中有空值
selectOnFocus:true})
}, {
header : '英文名',
name : 'nameEnglish',
dataIndex : 'nameEnglish',
width : '80',
align : 'center',
editor:new Ext.form.TextField({
allowBlank: true,//表示不允许在textField中有空值
selectOnFocus:true})
}, {
header : '<span style=color:blue>性别</span>',
name : 'sex',
dataIndex : 'sex',
width : '80',
align : 'center',
editor:new Ext.form.ComboBox({
allowBlank:false,
store : sexStore,
anchor : '75%',
displayField : 'text',
valueField : 'value',
forceSelection : true,
mode : 'local',
triggerAction : 'all',
selectOnFocus:true}),
renderer : function (value){
if(value == '1'){
return "<span style='color:red:font-weight:bold;'>男</span>"
}else{
return "<span style='color:red:font-weight:bold;'>女</span>"
}
}
}, {
header : '出生年月',
name : 'birthday',
dataIndex : 'birthday',
width : '80',
align : 'center',
editor:new Ext.form.DateField({
emptyText : '请选择',
format : 'Y-m-d',
allowBlank : true,//表示不允许在textField中有空值
selectOnFocus:true}),
renderer : Ext.util.Format.dateRenderer('Y-m-d')
}, {
header : '地址',
name : 'nativePlace',
dataIndex : 'nativePlace',
width : '80',
align : 'center',
editor:new Ext.form.TextField({
allowBlank: true,//表示不允许在textField中有空值
selectOnFocus:true})
}]);
// 创建记录集
var record = new Ext.data.Record.create([{
name : 'personId'
}, {
name : 'personName'
}, {
name : 'nameEnglish'
}, {
name : 'sex'
}, {
name : 'birthday'
}, {
name : 'nativePlace'
}]);
// 创建数据源
var store = new Ext.data.JsonStore({
fields : record,
root : 'rows',
pruneModifiedRecords : true,
idProperty : 'id'
});
// 创建grid列表
var grid = new Ext.grid.EditorGridPanel({
renderTo : 'QueryEnter',// 指定渲染的页面元素是哪个
width : _bodyWidth,
height : _bodyHeight,// 设置宽和高
cm : CM, // 列。。。
sm : sm,
store : store, // 获取数据来源
clicksToEdit : 2,//单击几次开启编辑状态
viewConfig:{
emptyText:'未查询到该年度的指标借调记录!',
enableRowBody : true,
showPreview : true,
getRowClass : this.applyRowClass
},
tbar : [{
xtype : 'label',
style : 'padding:5px 5px 5px 15px;',
text : '性别:',
columnWidth : 0.05
}, {
itemId : 'sex',
xtype : 'combo',
store : sexStore,
displayField : 'text',
valueField : 'value',
forceSelection : true,
mode : 'local',
// triggerAction : 'all',
//style : '',
allowBlank : false,// 待查明
columnWidth : 0.1,
emptyText : '请输入......'
}, {
text : '查询',
xtype : 'button',
iconCls : 'search',
columnWidth : 0.07,
handler : function() {
// 查询方法
query();
}
}]
// bbar : new Ext.PagingToolbar({
// pageSize : 10,
// store : store,
// displayInfo : 'true',//是否显示数据信息
// displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
// emptyMsg : "没有记录"//只有在displayInfo：true时才有效
// })
});
var toolBar2 = new Ext.Toolbar({
renderTo : grid.tbar,
items : [
'-',{
text : '保存',
xtype : 'button',
iconCls : 'save',
columnWidth : 0.07,
handler : function() {
// 查询方法
Save();
}
},'-', {
text : '删除',
xtype : 'button',
iconCls : 'delete',
columnWidth : 0.07,
handler : function() {
// 删除
deleteTest();
}
},'-', {
text : '增加',
xtype : 'button',
iconCls : 'add',
columnWidth : 0.07,
handler : function() {
// 增加
add();
}
}]
});
/***************************************************************************
* //单击事件，事件方法
*/
// 查询
var query = function() {
var sex = grid.getTopToolbar().getComponent('sex').getValue();
var url = pkuhrms.ContextRoot;
// 如果输入框为空，提示
if (Ext.isEmpty(sex)) {
url += '/pageFlows/test/serachAll.do';
} else {
url += '/pageFlows/test/serachBySex.do';
}
// 查询结果出来前显示正在查询提示信息
Ext.Msg.wait("正在查询，请稍后...", '提示');
// Ajax方式调用后台方法
Ext.Ajax.request({
url : url,
params : {
sex : sex
},
success : function(response, options) {
Ext.MessageBox.hide();// 隐藏提示框
var json = Ext.decode(response.responseText);
store.loadData(json);
},
failure : function(response, options) {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "查询失败，请稍后重试！")
}
})
}
query();
// 删除
var deleteTest = function() {
var selections = grid.getSelectionModel().getSelections();
if (Ext.isEmpty(selections)) {
Ext.Msg.alert('提示', '您尚未选中需要删除的记录！');
return;
}
var ids = "";
for (var i = 0; i < selections.length; i++) {
var id = selections[i].get('personId');
if(Ext.isEmpty(id)){
grid.getStore().remove(selections[i]);
grid.getView().refresh();
}else{
ids += ',' + id;
}
};
Ext.Msg.wait("马上成功，不要着急", "正在删除...");
ids = ids.substring(1);//转换成字符串，去掉','符号
Ext.Ajax.request({
url : pkuhrms.ContextRoot + '/pageFlows/test/deleteTest.do',
params : {ids : ids},
method: 'post',
success : function(response, options) {
Ext.MessageBox.hide();
var json = Ext.decode(response.responseText);
Ext.Msg.alert("提示", json.msg,query());
},
failure : function(response, options) {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "删除失败，请稍后重试！")
}
});
};
// 增加
var add = function() {
var addRecord = new record({
personId : '',
personName : '',
nameEnglish : '',
sex : '1',
birthday : '',
nativePlace : ''
});
//关闭表格编辑状态
grid.stopEditing();
store.insert(0,addRecord);
grid.startEditing(0,2);//激活第一行第一列的编辑状态
}
// 保存
var Save = function(){
var saveInfo = grid.getStore().getModifiedRecords();//获取修改后的数据
if(Ext.isEmpty(saveInfo)){
Ext.Msg.alert('提示','您尚未修改任何记录');
return;//停止执行下面语句
}
var saveJson = [];//定义一个空数组，用来存放转换后的json数据
for(var j=0;j < saveInfo.length;j++){
saveJson.push(saveInfo[j].data);
}
Ext.Msg.confirm("信息", "确认保存吗？", function(btn) {
if (btn == "yes") {
Ext.Ajax.request({
url : pkuhrms.ContextRoot + '/pageFlows/test/saveData.do',
params : {saveData : Ext.util.JSON.encode(saveJson)},
method : 'post',
success : function(response, options) {
var json = Ext.decode(response.responseText);
Ext.Msg.alert("提示", json.msg, query);
},
failure : function(response, options) {
Ext.Msg.alert("提示", '保存信息失败，请与数据库管理人员联系！');
}
})
}
})
}
});运行效果图：
说下功能实现思路，因为我用的框架是beehive，老框架一个，跟当前流行的ssh不一样，但是实现思路是一样的。
查询：
感觉这个方法没什么好说的，前台通过ajax把要查询的条件参数传递过来，后台接受后，该怎么办就怎么办吧。。
多条删除：
这个方法么，思路大概是这样的，先在js中获取选择的所有行，然后把其中的id通过循环的方式取出来用‘,’拼接成一个字符串,然后ajax的方式把这一组字符串传递到后台，后台通过一个String数组接收后，用split分割开来，然后循环这个数组，每取出一个id后就调用删除的方法，直到删完为止（当然是传多个id删多少个id）。
多条修改和增加：
这两个方法的思路大概是一样的，只不过是传递的参数不一样而已，好详细说一下，js中用
var saveInfo = grid.getStore().getModifiedRecords();//获取修改后的数据var saveJson = [];//定义一个空数组，用来存放转换后的json数据
for(var j=0;j < saveInfo.length;j++){
saveJson.push(saveInfo[j].data);
} Ext.util.JSON.encode(saveJson)；//转换成json格式好吧，简单的整理到这儿。没有是实现分页功能，等闲下来的时候做好后我在整理到博客，希望对你们有帮助。。。菜鸟简介，不喜勿喷，望指正。。
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
