`
忧里修斯
  • 浏览: 437059 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Ext用表格显示数据即增、删、改的完整实例

阅读更多
1、页面js

/**
 * 菜单管理
 */
var menuMgr = function() {

	var menuForm;// 菜单表单
	var window;// 窗口
	var gridPanel;// 表格
	var dataStore;// 数据集
	return {

		init : function() {
			var Menu = new Ext.data.Record.create([ {
				name : 'idno'
			}, {
				name : 'name'
			}, {
				name : 'img'
			}, {
				name : 'url'
			}, {
				name : 'parentid'
			}, {
				name : 'sort'
			}, {
				name : 'oper'
			}]);
			// var fields = ['idno', 'name', 'img', 'url', 'parentid',
			// 'sort','oper'];

			// 顶部工具栏
			var topBar = new Ext.Toolbar([ {
				text : '新增菜单',
				iconCls : 'add',
				handler : menuMgr.showAddMenuWindow
			// 注意函数名后不能加()
					}, {
						text : '查看修改',
						iconCls : 'edit',
						handler : menuMgr.showEditMenuWindow
					}, {
						text : '删除菜单',
						iconCls : 'delete',
						handler : menuMgr.delMenu
					}

			]);

			var sm = new Ext.grid.CheckboxSelectionModel();// 定义复选框选择模式
			var columnModel = new Ext.grid.ColumnModel([sm, {
				header : "idno",
				dataIndex : "idno",
				sortable : true
			}, {
				header : "菜单名称",
				dataIndex : "name",
				sortable : true
			}, {
				header : "图片",
				dataIndex : "img",
				width : 40,
				align : 'center',
				// 渲染
					renderer : function(imgUrl) {
						return "<img src='../../images/" + imgUrl + "'/>"
					}
				}, {
					header : "url",
					dataIndex : "url",
					width : 150,
					sortable : false
				}, {
					header : "上级菜单",
					dataIndex : "parentid",
					sortable : true
				}, {
					header : "排序",
					dataIndex : "sort",
					sortable : true
				}, {
					header : "备注",
					dataIndex : "oper"
				}]);

			var storeCfg = {};// 数据集配置对象
			storeCfg['url'] = 'server.jsp';
			storeCfg['recordName'] = "Menu";
			storeCfg['record'] = Menu;

			dataStore = Ext.dream.createStore(storeCfg);

			var gridCfg = {};// 表格配置对象
			// cfg['fields'] = fields;
			gridCfg['dataStore'] = dataStore;
			gridCfg['tbar'] = topBar;
			gridCfg['columnModel'] = columnModel;
			gridCfg['pageSize'] = 4;
			gridCfg['sm'] = sm;
			gridPanel = Ext.dream.createGridPanel(gridCfg);
			Ext.main.createViewPort(gridPanel);
		},

		/**
		 * 创建增加、修改公共菜单
		 */
		createMenuWindow : function() {

			var cfg = {};// 组合框配置
			cfg['fieldLabel'] = '父菜单';
			cfg['url'] = 'comboServer.jsp';
			cfg['recordType'] = 'Menu', cfg['fields'] = ['name', 'idno'];
			cfg['name'] = 'parentid';
			var parentMenu = Ext.combo.createComboBox(cfg);
			window = new Ext.Window( {

				title : '<div align="left">增加菜单</div>',
				x : 150,
				y : 100,
				frame : true,
				modal : true,
				closable : true,
				animCollapse : true,// 可关闭
				// 设置面板可展开收缩
				collapsible : false,
				resizable : false,
				// 配置登录表单
				items : [menuForm = new Ext.form.FormPanel( {
					id : 'menuForm',
					width : 400,
					frame : true,
					border : false,
					labelAlign : 'right',
					items : [new Ext.form.TextField( {
						name : 'idno',
						value : '0',
						inputType : 'hidden'

					}),

					new Ext.form.TextField( {
						fieldLabel : '菜单名称',
						id : 'name',
						name : 'name',
						allowBlank : false,
						blankText : '菜单名称不能为空',
						width : 200,
						msgTarget : 'side'

					}), new Ext.form.TextField( {
						fieldLabel : '图片名称',
						id : 'img',
						name : 'img',
						allowBlank : false,
						blankText : '图片名称不能为空',
						width : 200,
						msgTarget : 'side'

					}), new Ext.form.TextField( {
						fieldLabel : '链接地址',
						id : 'url',
						name : 'url',
						allowBlank : false,
						blankText : '链接地址不能为空',
						width : 200,
						msgTarget : 'side'

					}), parentMenu, new Ext.form.TextField( {
						fieldLabel : '排序',
						id : 'sort',
						name : 'sort',
						allowBlank : true,
						width : 200,
						msgTarget : 'side'

					}), new Ext.form.TextField( {
						fieldLabel : '备注',
						id : 'oper',
						name : 'oper',
						allowBlank : true,
						width : 200,
						msgTarget : 'side'

					})]

				})]
				,// 表单设置结束

			});// window结束
		},

		/**
		 * 显示增加菜单窗口
		 */
		showAddMenuWindow : function() {
			menuMgr.createMenuWindow();
			window.addButton(new Ext.Button( {
				text : '提交',
				// 点击提交执行的函数
					handler : menuMgr.addMenu
				}));
			window.show();
		},

		/**
		 * 显示查看修改菜单窗口
		 */
		showEditMenuWindow : function() {
			menuMgr.createMenuWindow();
			window.addButton(new Ext.Button( {
				text : '提交',
				// 点击提交执行修改的函数
					handler : menuMgr.updateMenu
				}));
			if (Ext.validate.noSelected(gridPanel)) {// 未选中任何记录
				return;
			} else {
				if (Ext.validate.selectedMore(gridPanel)) {// 选中多条
					return;
				} else {
					var idno = "";
					idno = Ext.validate.getSelected(gridPanel, 'idno');
					var cfg = {};
					cfg['form'] = menuForm;
					cfg['url'] = 'loadForm.jsp?idno=' + idno;
					Ext.dao.loadFormData(cfg);
					window.show();
				}
			}
		},

		/**
		 * 提交增加菜单表单
		 */
		addMenu : function() {
			var Menu = {};
			Menu = Ext.dao.getObjFromForm(menuForm);
			MenuManager.addMenu(Menu, function(success) {
				window.close();
				if (success) {
					// 重新加载数据
					dataStore.reload(dataStore);
					Ext.MessageBox.alert("提示", "增加菜单成功");
					// Msg.suggest("提示","增加菜单成功");
				} else {
					Ext.MessageBox.alert("提示", "增加菜单失败");
				}
			});
		},

		/**
		 * 更新菜单
		 */
		updateMenu : function() {
			var Menu = {};
			Menu = Ext.dao.getObjFromForm(menuForm);
			MenuManager.updateMenu(Menu, function(success) {
				window.close();
				if (success) {
					// 先清空再重新加载数据
					dataStore.removeAll();
					dataStore.reload();
					Ext.MessageBox.alert("提示", "更新菜单成功");
				} else {
					Ext.MessageBox.alert("提示", "更新菜单失败");
				}
			});
		},

		/**
		 * 删除菜单
		 */
		delMenu : function() {
			if (Ext.validate.noSelected(gridPanel)) {// 未选中任何记录
				return;
			} else {
				Ext.Msg.confirm('<font color="red">提示</font>', '你确定要删除选中的菜单吗?',
						menuMgr.deleteOrNot);
			};
		},

		/**
		 * 是否删除
		 */
		deleteOrNot : function(id) {
			if (id == "yes") {
				var idnos = "";
				idnos = Ext.validate.getSelected(gridPanel, 'idno');
				MenuManager.batchDelMenuByPKs(idnos, function(success) {
					if (success) {
						// 服务器端删除后,客户端同步更新
						// 获取选中的复选框所表示的对象数组
						var records = gridPanel.getSelectionModel()
								.getSelections();
						for (i = 0;i < records.length; i++) {
							dataStore.remove(records[i]);
						}
						Ext.MessageBox.alert("提示", "删除菜单成功");
					} else {
						Ext.MessageBox.alert("提示", "删除菜单失败");
					}
				})
			} else {
				return;
			}
		}

	}
}();
Ext.onReady(menuMgr.init, menuMgr, true);


2、后台处理的MenuMgr.java
package com.dreamoa.dwrservice.menuMgr;

import org.apache.log4j.Logger;

import com.dreamoa.domain.Menu;
import com.dreamoa.sys.BaseDAO;
import com.dreamoa.util.RandomUtil;
import com.dreamoa.util.StringUtil;

/**
 * 实现菜单的增、删、改操作
 * @author 忧里修斯
 */
public class MenuMgr extends BaseDAO<Menu>{
	
	Logger log = Logger.getLogger(MenuMgr.class);
	
	/**
	 * 增加菜单
	 * @param menu
	 */
	public boolean addMenu(Menu menu){
		try {
			menu.setIdno(RandomUtil.GenPrimaryKey());
			beginTransaction();
			save(menu);
			commit();
			return true;
		} catch (RuntimeException e) {
			log.error("MenuMgr.java:addMenu(),增加菜单失败");
			e.printStackTrace();
			return false;
		}
	}
	
	/**
	 * 更新菜单
	 * @param menu
	 */
	public boolean updateMenu(Menu menu){
		try {
			beginTransaction();
			update(menu);
			commit();
			return true;
		} catch (RuntimeException e) {
			log.error("MenuMgr.java:updateMenu(),更新菜单失败");
			e.printStackTrace();
			return false;
		}
	}
	
	/**
	 * 根据主键删除菜单
	 * @param idno
	 * @return
	 */
	public boolean delMenuByPK(String idno){
		try {
			beginTransaction();
			deleteById("idno", idno);
			commit();
			return true;
		} catch (RuntimeException e) {
			log.error("MenuMgr.java:delMenuByPK(),删除菜单失败");
			e.printStackTrace();
			return false;
		}
	}
	
	/**
	 * 批量删除菜单
	 * @param idnos
	 * @return
	 */
	public boolean batchDelMenuByPKs(String idnos){
		beginTransaction();
		try {
			String[] idnoArr = StringUtil.split(idnos, ",");
			for (int i = 0; i < idnoArr.length; i++) {
				String idno = idnoArr[i];
				deleteById("idno", idno);
			}
		} catch (RuntimeException e) {
			log.error("MenuMgr.java:batchDelMenuByPKs(),批量删除菜单失败");
			rollback();
			e.printStackTrace();
			return false;
		}
		commit();
		return true;
	}
}

分享到:
评论

相关推荐

    Ext表格中增删改查实例

    在"增删改查"实例中,我们将利用`Ext.grid.Panel`的配置项和事件来实现对表格数据的操作。 1. **创建表格(Create)** 创建数据通常涉及到在表格中添加新行。在Ext JS中,我们可以使用`store`对象的`add()`方法来...

    EXT 增删改查的一个例子

    在"EXT 增删改查的一个例子"中,我们主要关注的是EXT在数据管理和用户交互方面的应用。增删改查(CRUD)是任何数据驱动应用的基础操作,包括创建(Create)、读取(Read)、更新(Update)和删除(Delete)。EXT提供...

    Spring MVC+EXT JS开发简单的增删改查入门实例

    **Spring MVC + EXT JS 开发简单的增删改查入门实例** 在Web开发中,Spring MVC作为Spring框架的一部分,被广泛用于构建后端服务,而EXT JS则是一款强大的前端JavaScript库,用于创建美观、交互丰富的用户界面。将...

    ext增删查改demo

    在这个"ext增删查改demo"中,我们可以看到是EXTJS在数据管理方面的应用,涉及到的主要知识点包括EXTJS的基础组件、数据模型、数据存储以及数据绑定。 1. EXTJS版本:此示例提及了EXTJS 3.1和2.2两个版本。EXTJS 3.x...

    基于EXT2.0.2表格间数据拖拽

    总结来说,EXT2.0.2的表格间数据拖拽涉及到EXT Grid、DataStore、DragDrop和DropTarget的使用,通过这些组件和接口的组合,开发者可以创建出高度交互、功能丰富的Web应用。实现这一功能需要对EXT的API有深入的理解,...

    ext简单的增删改查

    - Grid Panel:用于显示表格数据,支持排序、分页、筛选等功能。 - Form Panel:用于创建表单,进行数据输入和编辑。 2. 增(Add): 在EXTJS中,通常通过Form Panel来收集用户输入,然后将这些数据提交给后台...

    一个Struts2+Ext实现增删改查的实例

    在实现增删改查功能时,通常会使用ExtJS的Grid组件来显示数据列表,Form组件来进行数据的添加和编辑,而Store负责数据的加载、保存和同步。 在这个"StudentCRUD"实例中,我们可以预期以下几个关键部分: 1. **模型...

    EXTJS4+STRUTS2+JAVA增删改查

    在本示例中,EXTJS4将负责前端的用户界面展示,包括表格显示数据、表单进行数据输入以及操作按钮(增、删、改、查)的交互逻辑。 STRUTS2是一个基于MVC设计模式的Java Web框架,它简化了模型与视图、控制器的交互,...

    ext s2sh整合实例 增删改查

    在IT行业中,Web开发是一个重要的领域,而"ext s2sh整合实例 增删改查"这个项目就是基于这种技术栈的一个实践案例。它涵盖了EXTJS、Struts2、Spring和Hibernate四大核心技术,旨在实现一个完整的CRUD(创建、读取、...

    ext增删改查

    本文将深入探讨如何使用Ext JS来实现基本的数据增删改查(CRUD)操作,特别关注代码示例中的Store和GridPanel组件。 #### Store组件 在Ext JS中,`Store`是负责从服务器获取数据并存储这些数据的核心组件。通过...

    ext2 grid 封装 (包含增删改查 导入导出等操作)

    标题 "ext2 grid 封装 (包含增删改查 导入导出等操作)" 暗示了这是一个关于ExtJS 2.x版本中Grid组件的封装实践,该封装集成了基本的数据操作功能,如添加(Add)、删除(Delete)、修改(Modify)和查询(Query)...

    ext后台经典实例

    4. **Grid**:EXT Grid是展示表格数据的组件,常用于数据查看和编辑。用户可以通过Grid进行选择、排序、过滤和编辑数据。在"EXT后台经典实例"中,Grid通常与Store结合,动态显示从服务器获取的数据。 5. **控制器...

    ext4 表格分页实例代码

    这个简单的EXT4表格分页实例,展示了EXT JS如何优雅地处理大数据量的展示问题,使得用户界面保持流畅,提高了用户体验。同时,EXT JS提供了丰富的API和自定义选项,可以根据实际需求进行扩展和调整,满足各种复杂的...

    ExtJs增删改查实例,献给初学者(佳家记账)

    这个"ExtJs增删改查实例,献给初学者(佳家记账)"的项目是专门为初学者设计的,旨在帮助他们理解如何使用ExtJS进行基本的数据操作,如添加、删除、修改和查询。在Web开发中,这些功能通常被称为CRUD(Create, Read, ...

    Ext表格获取后台数据

    ExtJS框架表格组件实例获取后台数据 ExtJS是一款基于JavaScript的RIA(Rich Internet Application,富互联网应用)框架,它提供了许多强大的功能和组件,其中之一就是表格组件Ext.grid.GridPanel。 Ext.grid....

    extjs 增删改查

    在这个“extjs 增删改查”的主题中,我们将深入探讨如何利用ExtJS框架、JSON数据格式以及JDBC(Java Database Connectivity)来实现数据的增删改查功能,并带有分页显示。 首先,让我们了解ExtJS中的基础组件。`Ext...

    基于Struts的Ext增删改查应用范例

    **基于Struts的Ext增删改查应用范例详解** 在Web开发中,Struts框架与ExtJS库的结合常用于构建高效的用户界面和后台数据交互。本应用范例是针对初学者的一个宝贵资源,它提供了清晰的注释和全面的功能,使开发者...

    extjs完成用户增删改查

    综上所述,实现"extjs完成用户增删改查"需要理解并熟练运用ExtJS 4.0的模型、存储、代理、表单、表格等相关组件和机制,同时,后端需要提供稳定、安全的数据接口。通过前后端协同工作,可以构建出高效、功能完善的...

    ext 双层表格 grid(附带图片)

    在EXT JS框架中,双层表格,也称为嵌套表格或多级表格,是一种用于展示层次数据的强大工具。EXT JS的Grid组件是实现这一功能的主要组件,它允许开发者以清晰、交互的方式展示复杂的数据结构。以下是对EXT JS双层表格...

    ext grid 显示数据

    "ext grid 显示数据"这一主题,是深入理解EXT JS开发的关键知识点之一,特别是在处理表格和列表展示时。在"LearningExtJS 第五章节的翻译"中,我们可以期待找到关于EXT JS Grid的详细讲解和实例应用。 EXT JS的Grid...

Global site tag (gtag.js) - Google Analytics