Extjs可编辑的EditorGridPanel

edit_grid.js

Ext.onReady(function() {
	
	//grid中的复选框
	var sm = new Ext.grid.CheckboxSelectionModel();
	//数据存储器
	var ds = new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
			url : "../zdbnr.action?method=page",
			method : "post"
		}),
		reader : new Ext.data.JsonReader({    //读取json数据 
					root : "newsList",
					totalProperty : 'totalProperty' //总记录数
				}, [{
							name : "id"
						}, {
							name : "dataParamId"
						}, {
							name : "code"
						}, {
							name : "content"
						}, {
							name : "parentCode"
						}])
	});
	//创建列  
	var cm = new Ext.grid.ColumnModel([
			sm,     //复选框   
			{
				header : "编号",
				dataIndex : "id",
				sortable : true
			}, {
				header : "字典表编号",
				dataIndex : "dataParamId",
				width : 100
			}, {
				header : "代码",
				dataIndex : "code",
				width : 110,
				editor:new Ext.form.NumberField({  //设定可编辑的列
					allowBlank : false,
					maxLength : 20
				})
			}, {
				header : "内容",
				dataIndex : "content",
				width : 150,
				editor:new Ext.form.TextField()    //设定可编辑的列
			}, {
				header : "父代码",
				dataIndex : "parentCode",
				width : 110
	}]);
	cm.defaultSortable = true;// 默认可排序
	
	//创建Grid
	var grid = new Ext.grid.EditorGridPanel({
				el : "grid",
				ds : ds, 
				title : "代码列表",
				width : 600,
				height : Ext.get("content").getHeight()/2+20,
				cm : cm,
				loadMask : {
					msg : '正在加载数据，请稍侯……'
				},
				sm : sm,
				clicksToEdit : 1,  //单击编辑
				// 下边
				bbar : new Ext.PagingToolbar({
							pageSize : 10,
							store : ds,
							displayInfo : true,
							displayMsg : ' 显示第 {0} 条到 {1} 条记录，一共 {2} 条',
							emptyMsg : ' 没有记录'
						})
			});
	grid.render(); //组件渲染之后触发
	ds.load({params : {start : 0,limit : 10}}); //加载数据
	
	grid.addListener("afteredit",function(obj){
		var e=obj.record;
		if(e.get("parentCode")==e.get("code")){
			Ext.Msg.alert("验证提示","当前代码不能和父代码相同");
			return false;
		}
		Ext.Ajax.request({
				url : '../zdbnr.action?method=editGridUpdate',
				params : {
					id : e.get("id"),
					content : e.get("content"),
					code : e.get("code")
				},
				success : function() {
					// alert("数据修改成功！");
				},
				failure : function() {
					Ext.Msg.show({
						title : '错误提示',
						msg : '修改数据发生错误,操作将被回滚!',
						buttons : Ext.Msg.OK,
						icon : Ext.Msg.ERROR
					});
				}
			});
	});
	
});

 

/**
	 * 分页读取Grid内容
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping(params = "method=page")
	public ModelAndView page(HttpServletRequest request,
			HttpServletResponse response) {
		int start;
		try {
			start = Integer.parseInt(request.getParameter("start"));
		} catch (NumberFormatException e1) {
			start = 0;
		}
		int limit;
		try {
			limit = Integer.parseInt(request.getParameter("limit"));
		} catch (NumberFormatException e1) {
			limit = 10;
		}
		SysDataParamContent nr = new SysDataParamContent();
		nr.setDataParamId(10200);
		List<SysDataParamContent> list = dataZxZdbnrService.findZdbnrByPage(nr,
				start,limit);
		int totalProperty = dataZxZdbnrService.findByCont(10200);
		JSONArray jsonArray = new JSONArray();
		Iterator ite = list.iterator();
		while (ite.hasNext()) {
			SysDataParamContent s = (SysDataParamContent) ite.next();
			Map map = new HashMap();
			map.put("id", s.getId());
			map.put("dataParamId", s.getDataParamId());
			map.put("code", s.getCode());
			map.put("content", s.getContent());
			map.put("parentCode", s.getParentCode());
			map.put("levels",s.getLevels());
			jsonArray.add(map);
		}
		String jsonStr = jsonArray.toString();
		String jsonString = "{start:" + start + ",limit:" + limit
		+ ",totalProperty:" + totalProperty + ",newsList:" + jsonStr
		+ "}";
		response.setContentType("text/html;charset=utf-8");
		try {
			response.getWriter().write(jsonString);
		} catch (IOException e) {
			e.printStackTrace();
		}

		return null;
	}

@RequestMapping(params = "method=editGridUpdate")
	public ModelAndView editGridUpdate(HttpServletRequest request,
			HttpServletResponse response, String id,String content,String code) throws Exception {
		response.setContentType("text");
		response.setCharacterEncoding("UTF-8");
		SysDataParamContent syscon = new SysDataParamContent();
		syscon.setDataParamId(10200);
		syscon.setContent(content);
		syscon.setId(Integer.parseInt(id));
		syscon.setCode(code);
		String result = "";
		int ret =dataZxZdbnrService.update(syscon);
		if(ret>0){
			result = "{message:'修改成功!',success:true}";
		}
		response.getWriter().write(result);
		return null;
	}

 

<html>
	<head>
		<title>form.html</title>
		<script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../extjs3/ext-all-debug.js"></script>
		<link rel="stylesheet" type="text/css"
			href="../extjs3/resources/css/ext-all.css" />
		<script type="text/javascript" src="js/edit_grid.js"></script>
	</head>
	<body>
		<div id="content" style="width: 100%; height: 100%">
			<div id="grid"></div>
		</div>
	</body>
</html>