Extjs可编辑的EditorGridPanel

zxf_noimp · 发表于 2013-2-8 00:01:17

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;// 默认可排序//创建Gridvar 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>

		自动登录	找回密码
密码			立即注册