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>
分享到:
相关推荐
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
ExtJS_可编辑Grid进度条,可编辑,随意输入数值,根据进度情况变色的Grid列嵌入式滚动条.
EXTJS页面编辑器,对于使用EXTJS作为项目界面技术支持的人,可以用该编辑器,可以快速的编辑生成你所需要的界面。
Extjs代码编辑工具,编辑代码会有提示,内有安装说明
EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段,而是显示的EditorGridPanel中 store的dataindex指定的字段内容。
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
NULL 博文链接:https://zyjustin9.iteye.com/blog/2121799
extjs目录树编辑对目录增删改查学习extjs的工具类
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力.ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架.因此,可以把ExtJS用在.Net、Java、Php等...
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
ext 可编辑treegrid组件 实用
EXTJS IDE编辑环境EXTJS IDE编辑环境ExtDesigner (part 1) (part 1)
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
extjs页面布局,可拖拽也可以根据你个人的需求,实现相关模块的显示和隐藏
HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...