利用ExtJS实现：年级班级增删改查

最新推荐文章于 2020-12-28 20:56:39 发布

转载最新推荐文章于 2020-12-28 20:56:39 发布 · 1.8k 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文介绍如何使用ExtJS实现年级班级的增删改查功能，包括前端界面设计及后端处理逻辑。通过AJAX交互完成数据提交与更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用ExtJS实现：年级班级增删改查

(2012-01-18 15:01:24)

转载▼

标签：

it

分类： JAVA高级软件工程师

上图：增删改查界面

-----------------------------------------------------------

下图：添加界面

-----------------------------------------------------------

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();
}
});

// 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;
}