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

最新推荐文章于 2020-12-28 20:56:02 发布
最新推荐文章于 2020-12-28 20:56:02 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： ExtJs

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

  (2012-01-18 15:01:24)
转载▼

利用ExtJS实现：年级班级增删改查
上图：增删改查界面

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

下图：添加界面

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

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

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

}

javaPie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Extjs做的一个小项目，实现了增删改查
07-31
用Extjs做的一个小项目，实现了增删改查
ExtJS增删改查
09-26
ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查
使用ExtJS做一个用户的增删改查
weixin_30216561的博客
06-23 149
extjs版本为4.2，用户数据放在静态list中存储　　　 　User.java 1 package com.ext.demo.dao; 2 3 public class User { 4 private int id; 5 private String name; 6 private String loginName; 7...
extjs 增删改查 extjs 增删改查 extjs 增删改查
u012291104的专栏
11-18 1971
package com.tempus.userCenter.service.authority; import java.util.ArrayList; import java.util.Collections; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.directwe
Extjs学习之增删改查
Do、IT的专栏
06-30 1090
简单的增删改查的例子。支持查询，多条删除，多条修改和增加：
extJs 简单的增删改查
04-15
在“简单的增删改查”这个主题中，我们将探讨如何使用ExtJS实现数据管理的基本操作，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。 首先，我们需要了解ExtJS的核心概念，如组件（Components）...
ExtJs实现EditGrid中的增删改查操作（2）
03-26
总之，利用ExtJS的EditGrid实现增删改查操作涉及到多个组件和功能的协同工作，但通过理解其基本原理和API，开发者能够构建出功能强大、用户体验良好的数据管理界面。记得在实际项目中，根据需求进行适当的定制和优化...
ExtJS6.5.0+SSM表格增删改查+分页
10-22
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页，数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全，加载即可运行 5.VX：humingxing可随时交流
SSM+Maven+ExtJs 在eclipse中实现的增删改查例子
12-16
这个例子是一个在Eclipse环境中实现的增删改查（CRUD）应用，它结合了Spring、Spring MVC（Spring Web MVC）、MyBatis（原称SSM）以及前端的ExtJs框架。下面将详细介绍这些知识点： 1. **Spring**：Spring是Java...
springMVC+Extjs4.2实现用户增删改查功能
11-03
该程序是我耗时两周时间，边学边做而成，侧重Extjs方面，springMVC和hibernate只是简单的使用，如有错误，请忽略。 该项目只做大家学习使用，懂得分享，才能学到更多。
使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能！
12-01
使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能！
Extjs和数据库交互，增删改查
11-18
Extjs和数据库交互，增删改查Extjs和数据库交互，增删改查（修改测试通过）
extjs4＋Spring mvc实现简单的增删改查
02-02
本demo是一个简单的java maven项目，数据库名和连接参数都配置在pom.xml中。后台使用了spring mvc，前台是extjs4，并且运用了extjs4的mvc模式。简单实现对一张表的增删改查操作，有不足之处，大家互相交流。
extjs 增删改查
02-02
Ext框架实现简单增删改查（带分页），因为代码是自己写的，以大家能看懂为目的，所以代码简单易懂。
extjs4 数据的增删改查操作 数据的操作
.
08-31 3489
目前只做了增删改的操作，查的部分稍后会写上。 基于mvc模式的增删改操作 增 删 改 （触发事件有两种方式，一个是选择一项后点击修改，一个是双击记录） view层先定义一个视图，增、改时会调用 Ext.define('yang.view.frameAAA.module.FrameAAACenterEditData', { extend : 'Ext.wind
extjs3.4+mysql+servlet的简单增删改查 分页
henry
06-01 1285
模块化简单开发 Startup.js入口jsMainViewPort = Ext.extend(Ext.Viewport, { layout : 'border', constructor : function(cfg) { Ext.apply(this, cfg); this.initUI(); MainViewPort.super
Extjs 4.2 grid增删改查 JSP
樱花园丁
01-08 371
&lt;%@ page language="java" contentType="text/html; charset=utf-8"     pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type"
extjs4mvc增删改查_MVC4中control的增删改查
weixin_33267354的博客
12-28 104
public classTestController : Controller{private LeaveEntities db = newLeaveEntities();////GET: /Test/publicActionResult Index(){returnView(db.termtimes.ToList());}////GET: /Test/Details/5public Action...
ExtJs 基础操作：增删改查代码示例
"这篇资源是关于ExtJS框架中常用的增删改查操作的代码示例，适合初学者参考。作者花慧在2009年12月22日整理了这段代码，目的是帮助理解如何在ExtJS中进行数据操作。" 在Web应用开发中，ExtJS是一个强大的JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值