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>