![利用ExtJS实现:年级班级增删改查 利用ExtJS实现:年级班级增删改查](https://i-blog.csdnimg.cn/blog_migrate/d549c10a350f92f261b6387bad0f8746.jpeg)
上图:增删改查界面
-----------------------------------------------------------
下图:添加界面
![利用ExtJS实现:年级班级增删改查 利用ExtJS实现:年级班级增删改查](https://i-blog.csdnimg.cn/blog_migrate/7f66d6daed03e47e4ee7a40213455380.jpeg)
-----------------------------------------------------------
1.前台脚本:gradeClass.js
有可编辑的面板:包含【添加按钮】,【删除按钮】,【查询按钮】,两个文本域;含有编辑的监听事件(当编辑后通过AJAX修改数据)。其中,【添加按钮】对应一个【添加窗体】:含有两个输入框,和监听事件(当点击提交时候,数据转到后台处理)
2.后台处理:GradeClassAction。对年级班级对象的增删改查,多数是AJAX形式的,通常返回是否成功的标识符(success)以及提示信息(message)
----------------------------------------------
1.前台脚本:gradeClass.js
//映射关系
var GradeClass = Ext.data.Record.create([{
name : 'gradeClassId',mapping : 'gradeClassId',type : 'string'},
{name : 'grade',mapping : 'grade',type : 'string'},
{name : 'className',mapping : 'className',type : 'string'}]);
var cm_GradeClass = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : '年级',
width : 200,
dataIndex : 'grade',
editor : new Ext.form.TextField({
allowBlank : false,
maxLength : 20
})
}, {
header : '班级',
id : 'className',
dataIndex : 'className',
editor : new Ext.form.TextField({
allowBlank : false,
maxLength : 20
})
}]);
var ds_GradeClass = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'findAllGradeClass.action'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, GradeClass)
});
cm_GradeClass.defaultSortable = false;
//3 添加窗体:含有两个输入框,和监听事件(当点击提交时候,数据转到后台处理)
var window_add_GradeClass = new Ext.Window({
title : '添加班级',
width : 350,
height : 440,
resizable : false,
autoHeight : true,
modal : true,
bodyStyle:'padding-right:20px',
closeAction : 'hide',
listeners : {
'hide' : function() {
this.setTitle('添加班级');
Ext.getCmp('addGradeClassForm').form.reset();
}
},
items : [new Ext.FormPanel({
labelWidth : 70,
id: 'addGradeClassForm',
labelAlign : 'right',
url : 'saveGradeClass.action',
border : false,
baseCls : 'x-plain',
bodyStyle : 'padding:5px 5px 0',
anchor : '100%',
defaults : {
width : 233,
msgTarget : 'side' // 验证信息显示右边
},
defaultType : 'textfield',
items : [{
fieldLabel : '年级',
id : 'gradeClass.grade',
name : 'gradeClass.grade',
allowBlank : false,
maxLength : 20
}, {
fieldLabel : '班级',
id : 'gradeClass.className',
name : 'gradeClass.className',
allowBlank : false,
maxLength : 20
}],
buttonAlign : 'right',
minButtonWidth : 60,
buttons : [{
text : '添加',
handler : function(btn) {
var frm = this.ownerCt.ownerCt.form;
if (frm.isValid()) {
btn.disable();
var gradeField = frm.findField('gradeClass.grade'); // 获得年级名称输入框
var classField = frm.findField('gradeClass.className');// 获得班级名称输入框
frm.submit({
waitTitle : '请稍候',
waitMsg : '正在提交表单数据,请稍候...',
success : function(form, action) {
if(action.result.success==true){
var store = grid_GradeClass.getStore();
if (store.data.length <= 20) {
var gradeClass = new GradeClass({
gradeClassId : action.result.message,
grade : gradeField.getValue(),
className : classField.getValue()
});
store.insert(0, [gradeClass]);
if (store.data.length > 20) {
store.remove(store.getAt(store.data.length - 1));
}
}
window_add_GradeClass.setTitle('[ ' + gradeField.getValue()+'-'+classField.getValue()+ ' ] 添加成功!!');
}else{//add
window_add_GradeClass.setTitle('添加未成功,请检查是否输入重复值!');
}
frm.reset();
btn.enable();
},
failure : function(form, action) {
Ext.Msg.show({
title : '错误提示',
msg :action.result.message,
buttons : Ext.Msg.OK,
fn : function() {
btn.enable();
},
icon : Ext.Msg.ERROR
});
}
});
}
}
}, {
text : '重置',
handler : function() {
this.ownerCt.ownerCt.form.reset();
}
}, {
text : '取消',
handler : function() {
this.ownerCt.ownerCt.ownerCt.hide();
}
}]
})]
});
//2.1 添加按钮
var btn_add_GradeClass = new Ext.Button({
text : '添加班级',
iconCls : 'icon-add',
handler : function() {
window_add_GradeClass.show();
}
});
var btn_del_GradeClass = new Ext.Button({
text : '删除班级',
iconCls : 'icon-del',
handler : function() {
var record = grid_GradeClass.getSelectionModel().getSelected();
if (record) {
Ext.Msg.confirm('确认删除', '你确定删除该条记录?', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : 'deleteGradeClass.action',
params : {
gradeClassId : record.data.gradeClassId
},
success : function(form, action) {
var respText = Ext.util.JSON.decode(form.responseText);
var message=respText.message;
var success=respText.success;
if(success==false){
Ext.Msg.show({title : '错误提示',msg : message,buttons : Ext.Msg.OK,icon : Ext.Msg.ERROR});
return;
}else{
grid_GradeClass.getStore().remove(record);
}
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '无法删除,该班级存在业务数据!',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
});
}
}
});
var text_search_Grade = new Ext.form.TextField({
width : 100,
emptyText: '输入年级',
listeners : {
'specialkey' : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
searchGradeClass();
}
}
}
});
var text_search_Class = new Ext.form.TextField({
width : 100,
emptyText: '输入班级',
listeners : {
'specialkey' : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
searchGradeClass();
}
}
}
});
// grid的查找方法
var searchGradeClass = function() {
// 传参数一定要用这种方式,否则翻页的时候不会根据这些参数查询
ds_GradeClass.baseParams.grade = text_search_Grade.getValue();
ds_GradeClass.baseParams.className = text_search_Class.getValue();
ds_GradeClass.load();
}
var btn_search_GradeClass = new Ext.Button({
text : '查询',
iconCls : 'icon-search',
handler : searchGradeClass
});
//2 可编辑的面板:包含添加按钮,删除按钮,查询按钮,两个文本域;含有编辑的监听事件(当编辑后通过AJAX修改数据)
var grid_GradeClass = new Ext.grid.EditorGridPanel({
title : '',
iconCls : 'icon-grid',
loadMask : {msg : '数据加载中...'},
region : 'center',
cm : cm_GradeClass,
ds : ds_GradeClass,
sm : new Ext.grid.RowSelectionModel({singleSelect : true}),
enableColumnMove : false,
trackMouseOver : false,
frame : false,
autoExpandColumn : 'className',
clicksToEdit : 1,
tbar : [btn_add_GradeClass, btn_del_GradeClass, text_search_Grade, text_search_Class, btn_search_GradeClass],
listeners : {
'afteredit' : function(e) {//编辑后,利用AJAX执行updateGradeClass.action操作。成功或失败时,给出提示。
Ext.Ajax.request({
url : 'updateGradeClass.action',
params : {
fieldName : e.field,
fieldValue : e.value,
gradeClassId : e.record.data.gradeClassId
},
success : function(form, action) {//add form, action
// alert("数据修改成功!");
var respText = Ext.util.JSON.decode(form.responseText);
var success=respText.success;
if(!success){
Ext.Msg.show({
title : '错误提示',
msg : '年级、班级信息不能重复,操作将被回滚!',
fn : function() {
e.record.set(e.field, e.originalValue);
},
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '修改数据发生错误,操作将被回滚!',
fn : function() {
e.record.set(e.field, e.originalValue);
},
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
}
});
//1页面载入时
Ext.onReady(function() {
var p_GradeClass = new Ext.Viewport({
id : 'gradeClass-panel',
border : false,
layout : 'border',
items : [grid_GradeClass]
});
});
---------------------------------------------------------
2.后台处理:GradeClassAction。对年级班级对象的增删改查,多数是AJAX形式的,通常返回是否成功的标识符(success)以及提示信息(message)
//年级班级ACTION
@Controller
@Scope("prototype")
@ParentPackage("rlkj")
public class GradeClassAction extends BaseAction {
private static final long serialVersionUID = 1L;
static Logger logger = Logger.getLogger(GradeClassAction.class.getName());
@Resource
private IGradeClassService gradeClassService;
private List<GradeClass> gradeClasslist;
private GradeClass gradeClass;
private boolean success;
private String message;
private Page page;
//查询所有年级班级并返回json字符串
@Action(value = "findAllGradeClass", results = { @Result(type = "json", params = {
"root", "page", "excludeProperties", "limit,start,objCondition" }) })
public String findAllGradeClass() {
GradeClass searchObj = new GradeClass();
String grade = getRequest().getParameter("grade");
if (!MyUtils.isBlank(grade)) {
searchObj.setGrade(grade);
}
String className = getRequest().getParameter("className");
if (!MyUtils.isBlank(className)) {
searchObj.setClassName(className);
}
List<GradeClass> gradeClasslist = gradeClassService
.findAllGradeClass(searchObj);
page = new Page();
page.setRoot(gradeClasslist);
page.setTotalProperty(gradeClasslist.size());
page.setSuccess(true);
return SUCCESS;
}
//添加班级
@Action(value = "saveGradeClass", results = { @Result(type = "json", params = {
"includeProperties", "success,message" }) })
public String saveGradeClass() {
String gradeClassId = gradeClassService.saveGradeClass(gradeClass);
if (gradeClassId != null) {
gradeClass.setGradeClassId(gradeClassId);
message = gradeClassId;
success = true;
} else {
success = false;
message="添加未成功!";
}
return SUCCESS;
}
//删除
@Action(value = "deleteGradeClass", results = { @Result(type = "json", params = {
"includeProperties", "success,message" }) })
public String deleteGradeClass() {
String gradeClassId = getRequest().getParameter("gradeClassId");
if (!MyUtils.isBlank(gradeClassId)) {
// 通过gradeClassId去Users表中查询,是否有数据
boolean isExistsUser = gradeClassService
.findUsersByGradeClassId(gradeClassId);
if (isExistsUser) {
message = "无法删除,该年级班级下存在用户!";
success = false;
} else {
success = gradeClassService.deleteGradeClass(gradeClassId);
message = "删除成功!";
success = true;
}
}
return SUCCESS;
}
//更新
@Action(value = "updateGradeClass", results = { @Result(type = "json", params = {
"includeProperties", "success" }) })
public String updateGradeClass() throws Exception {
String fieldName = getRequest().getParameter("fieldName");
String fieldValue = getRequest().getParameter("fieldValue");
String gradeClassId = getRequest().getParameter("gradeClassId");
if (!MyUtils.isBlank(gradeClassId)) {
GradeClass c = new GradeClass();
c.setGradeClassId(gradeClassId);
MyUtils.invokeSetMethod(fieldName, c, new Object[] { fieldValue });
success = gradeClassService.updateGradeClass(c);
}
return SUCCESS;
}
public List<GradeClass> getGradeClasslist() {
return gradeClasslist;
}
public void setGradeClasslist(List<GradeClass> gradeClasslist) {
this.gradeClasslist = gradeClasslist;
}
public GradeClass getGradeClass() {
return gradeClass;
}
public void setGradeClass(GradeClass gradeClass) {
this.gradeClass = gradeClass;
}
public Page getPage() {
return page;
}
public void setPage(Page page) {
this.page = page;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}