Ext GridPanel Note(SSH简单增删改查)

最新推荐文章于 2025-09-05 15:04:40 发布

转载最新推荐文章于 2025-09-05 15:04:40 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guoxianlong/archive/2013/04/03/2998042.html

文章标签：

#运维 #javascript #java #ViewUI

本文详细介绍如何使用 ExtJS 框架实现一个具备增删改查功能的 GridPanel 示例，包括配置样式文件、引入 JavaScript 文件、创建数据模型、定义列模型、实现编辑窗口等关键步骤。

index.jsp

<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ext-lang-zh_CN.js" charset="utf-8"></script>
<SCRIPT type="text/javascript" src="${pageContext.request.contextPath }/index.js"></SCRIPT>
</head>
<body>
	<div id="topic-grid" align="center"></div>
</body>

index.js

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
	var status;			//区分是update(status=1)还是insert(status=0)  
	
	var reader = new Ext.data.JsonReader({
		root : "list",
		totalProperty : 'totalCount',
		fields : [ 'levelid', 'levelname', 'description']
	});
	
	var proxy = new Ext.data.HttpProxy({
		url :"good!findAll.action"
	});
	
	var store = new Ext.data.Store({
		reader : reader,				// 读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
		proxy : proxy
	});
	
	var renderer_date = function(value) {				//对日期字段进行转换显示,否则将显示[object , object]
		var _value;
		if(Ext.isEmpty(value)) return "";
		else if(Ext.isEmpty(value.time)) _value = new Date(value);
		else _value = new Date(value.time); return _value.format("Y-m-d H:i:s");
	};
	
	var cm = new Ext.grid.ColumnModel([
		    new Ext.grid.RowNumberer({header : "编号",width : 60}),
	        {header : "名称", dataIndex : 'levelname', width : 150, align:"center" ,locked : false},
//	        {header : "日期", dataIndex : 'description',align:"center",width : 400,renderer : renderer_date}
	        {header : "描述", dataIndex : 'description',align:"center",width : 400}
	 ]);
	cm.defaultSortable = true;

	var combobox = new Ext.form.ComboBox({				// 定义一个智能感应的ComboBox,放在tbar里
		id : 'cmbox',
		title : '名称',
		store : store,
		mode : "local",				// 从本地加载数据（智能感应效果）
		displayField : 'levelname',		// 显示字段类似DropDownlist中的DataTextField
		valueField : 'levelname',		// 类似DropDownlist中的DataValueField
		width : 160,
		shadow:"frame",
		allowBlank : false,		// 不允许为空
		emptyText : '输入名称进行搜索',		// 默认值
		blankText : '请输入名称'		// 当为空的时候提示
	});
	
	var grid = new Ext.grid.GridPanel({
		collapsible : true,			// 是否可以展开
		id : 'grid_id',
		renderTo : "topic-grid",
		title : 'GridPanel',
		width : 700,
		height : 500,
		store : store,
		cm : cm,
		loadMask : {
			msg : '加载数据中,请等待......'
		},
		stripeRows:true,//stripeRows : Boolean 是否显示行的分隔符
		tbar : [{
					text : "编辑",
					cls : 'x-btn-text-icon details',
					icon : "./resources/images/default/tree/edit.png",
					handler :editPanel
				},{
					text : "添加",
					cls : 'x-btn-text-icon details',
					icon : "./resources/images/default/tree/add.png",
					handler : function() {
						Edit_Panel.getForm().reset();
						status = 0;
						Edit_Window.setTitle("添加编辑");
						Edit_Window.show();
					}
				},{
					text : "删除",
					cls : 'x-btn-text-icon details',
					icon : "./resources/images/default/tree/remove.png",
					handler : delRecord
				},'-',
				combobox,'-',{				// 定义一个搜索框
				xtype : 'button',
				cls : 'x-btn-text-icon details',
				icon : "./resources/images/default/tree/search.png",
				text : "查找",
				handler : function() {
					// Ext.getCmp("searchfield").getValue()得到Textfield的值
					// 过滤条件为角色名称(RoleName)来搜索匹配的信息,
					// filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,
					// 第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写
					store.filter('levelname',Ext.getCmp("combobox").getValue(), false, false);
				}
			}
		],
		bbar : new Ext.PagingToolbar({// 自带分页工具条
			pageSize : 10,
			store : store,
			displayInfo : true,
			displayMsg : '显示 {0}-{1}条 / 共 {2} 条', 
			emptyMsg : "没有数据"
		})
	});
	
	store.load({params:{start:0,limit:10}});
	
	 function editPanel() {				//var editPanel = function(){}	 此格式亦可,但handler : editPanel 无效,所以写成function editPanel(){}
		Edit_Panel.getForm().reset();				// 重置编辑模板.也就是将form里面的值reset掉,you know?
		rows = Ext.getCmp("grid_id").getSelectionModel().getSelections();
		if (rows.length != 1) {
			Ext.MessageBox.alert("提示", "请你选择一行数据进行操作！");
			return;
		}
		Edit_Window.setTitle("修改编辑");
		status = 1;
		Edit_Window.show();				// 打开窗体
		Edit_Panel.getForm().findField('levelid').setValue(rows[0].get('levelid'));				// 将选中项的信息绑定到TextField中
		Edit_Panel.getForm().findField('levelname').setValue(rows[0].get('levelname'));
		Edit_Panel.getForm().findField('description').setValue(rows[0].get('description'));
	};
	
	grid.on("rowdblclick",function (){					//GirdPanel 双击事件
			editPanel();
	});
	
	var Edit_Panel = new Ext.form.FormPanel({				// 编辑panel，用于添加，修改
		labelWidth : 70,
		labelAlign:"right",
		url : "good!updateLevel.action",				//默认url
		frame : true,
		bodyStyle : 'padding:5px 5px 0',
		width : 380,
		defaults : {
			width : 150
		},
		defaultType : 'textfield',
		items : [ 
		     { fieldLabel : '编号 ', name : 'levelid', xtype : "hidden"},
		     { fieldLabel : '名称 ', name : 'levelname', 
		    	 allowBlank : false,	blankText : "不允许为空",			// 是否允许为空！false不允许 \提示信息
				minLength : 2, minLengthText : "姓名最少2个字符"} ,
			{ fieldLabel : "描述 ", name : "description"}]
	});
	
	var Edit_Window = new Ext.Window({				// 弹出层
		collapsible : true, maximizable : true, height : 200, width : 378, modal : true, closeAction : "hide",
		layout : 'form',			// layout布局方式为form	 所谓布局就是指容器组件中子元素的分布，排列组合方式
		plain : true, bodyStyle : 'padding:5px;', buttonAlign : 'center', items : Edit_Panel,
		buttons : [
				{ text : '保存', handler : function (){
						submitForm();
						Edit_Window.hide();
					}
				}, {
					text : '重置',handler : function() {
						Edit_Panel.getForm().reset();
					}
				},{
					text : "关闭", handler : function() {
						Edit_Window.hide();
					}
				} ]
	});
	
	function submitForm() {
		if(status == 0) {
			Edit_Panel.form.submit({
				method : "post",
				scope : this,
				params : "method=add",
				success : function (form,action) {
					store.reload();
					grid.store.reload();
				},
				failure : function (form,actiion) {
					Ext.MessageBox.alert("提示","输入有误,请重新输入");
				}
			});
		} else {
			Edit_Panel.form.submit({
				method : "post",
				scope : this,
				params : "method=update",
				success : function (form,action) {
					store.reload();
					grid.store.reload();
				},
				failure : function (form,actiion) {
					Ext.MessageBox.alert("提示","输入有误,请重新输入");
				}
			});
		}
	}
	
	function delRecord() {				// 删除方法
		rows = Ext.getCmp("grid_id").getSelectionModel().getSelections();				// 获取ID为grid_id的控件名称得到当前选中项
		if (rows.length == 0) {
			Ext.MessageBox.alert("提示", "请至少选择一行你要删除的数据！");
			return;
		}
		Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?', showResult);
	}
	
	function showResult(btn) {
		if (btn == 'yes') {
			var row = Ext.getCmp("grid_id").getSelectionModel().getSelections();
			var ids = "";
			for ( var i = 0 ; i < row.length; i++) {
				ids = ids+row[i].get("levelid")+",";
			}
			// 将要删除的信息传递到后台处理,然后重新加载grid
			var conn = new Ext.data.Connection();
			conn.request({
				url : "good!deleteLevel.action",
				params : "ids="+ids,
				method : 'post',
				scope : this,
				callback : function(options, success, response) {
					if (success) {
						store.reload();
						grid.store.reload();
					} else {
						Ext.MessageBox.alert("提示", "所选记录删除失败！");
					}
				}
			});
		}
	};
});

struts.xml 就不写了,里面就一个

<action name="good" class="action.Action">
				
</action>

BaseAction.java

Action.java

public class Action extends BaseAction{
	
	private Level level;
	private List levels;

	public void findAll() throws IOException {
		HttpServletResponse resp = ServletActionContext.getResponse();
		resp.setContentType("text/html;charset=utf-8");				//设置编码,防止乱码
		
		PrintWriter out =resp .getWriter();
		IBaseDAO dao = (BaseDAOImpl)getBean("DAO");
		levels = dao.findAll("from Level");
		JSONArray array = JSONArray.fromObject(levels);
		out.println("{success:true,totalCount : " + levels.size() + ", list:" + array.toString() + "}");					//success:true,为了update,add的提交之后的callback
		out.flush();
		out.close();
	}
	
	public void updateLevel() throws Exception{
		HttpServletRequest req = ServletActionContext.getRequest();
		HttpServletResponse resp = ServletActionContext.getResponse();
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		model.Level level = new model.Level();
		IBaseDAO dao = (BaseDAOImpl)getBean("DAO");
		String param = req.getParameter("method");
		System.out.println("method : "+param);
		if("update".equals(param)) {
			level.setLevelid(Long.parseLong( req.getParameter("levelid")));
			level.setLevelname(req.getParameter("levelname"));
			level.setDescription(req.getParameter("description"));
			dao.update(level);
		} else if("add".equals(param)) {
			level.setLevelname(req.getParameter("levelname"));
			level.setDescription(req.getParameter("description"));
			dao.insert(level);
		}
		findAll();
	}
	
	public void deleteLevel() {
		HttpServletRequest req = ServletActionContext.getRequest();
		IBaseDAO dao = (BaseDAOImpl)getBean("DAO");
		String ids = req.getParameter("ids");
		String id[] = ids.split(",");
		for(int i=0;i<id.length;i++) {
			Level l = (Level)dao.searchById(Level.class, Long.parseLong(id[i]));
			dao.delete(l);
		}
	}
	

	public Level getLevel() {
		return level;
	}

	public void setLevel(Level level) {
		this.level = level;
	}
	
	public List getLevels() {
		return levels;
	}

	public void setLevels(List levels) {
		this.levels = levels;
	}
	
}

其实真没啥技术含量,不过刚开始弄的时候有点麻烦。传几张图片吧