Extjs中EditorGridPanel修改并获取数据的两种方式
有时候我们会使用Extjs的EditorGridPanel组件来实现必要的功能,然而当我们修改可编辑单元格值之后,我们怎么获取修改的数据呢?
例如:当需要修改EditorGridPanel组建中部分数据,并获取修改内容提交保存。实现方法有两种,一种是动态保存,一种是修改后批量保存。简单说明如下:
动态获取更新数据:
动态保存修改内容,可用监听实现,可到底怎样才能在单元格修改后触发呢?这里做简单说明。我们可以直接在EditorGridPanel组件对象中添加afteredit监听(也有beforeedit监听,若需要,也可使用),它的参数为当前修改,可在此监听中获取相应数据并通过ajax完成修改。可通过其参数获取如下数据:
e.row;//修改过的行从0开始
e.column;//修改列索引
e.originalValue;//原始值
e.value;//当前值
e.grid;//当前修改的grid
e.field;//正在被编辑的字段名
e.record;//正在被编辑的行数据
用例代码如下:
//...
new Ext.grid.EditorGridPanel({clicksToEdit:1,forceValidation:true,frame : true,stripeRows:true,border:false,ds:ds,//配置数据源Storecm:cm,//配置列模型ColumnModelbbar:new Ext.PagingToolbar({pageSize:page,//页面大小参数pagestore:ds,displayInfo: true,afterPageText: '/ {0}',beforePageText: '页',firstText : "第一页",prevText : "上一页",nextText : "下一页",lastText : "最后页",refreshText : "刷新",displayMsg: '显示第 <em>{0}</em> 条到 <em>{1}</em> 条记录,一共 <em>{2}</em> 条',emptyMsg: "没有记录"}),loadMask:{msg:'数据加载中...'},listeners:{afteredit:function(e){//修改方法update(e.record.get("id"),e.field,e.value);}}
})
//...
批量获取更新数据:
批量获取修改数据,可通过Ext.data.Store对象的getModifiedRecords()方法得到当前已修改的所有行数据的数组,可循环获取其中所需数据,重新组装成我们想要的数据,再作为ajaxc参数进行提交,实现操作。
//...
var arr = [];//声明空数组
var records = ds.getModifiedRecords();
Ext.each(records,function(record){//遍历行数据数组arr.push(record.data);
});
//...
Extjs中EditorGridPanel修改并获取数据的两种方式相关推荐
- node 创建静态web服务器(下)(处理异步获取数据的两种方式)
接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...
- Servlet获取Excel中数据的两种方式
Servlet解析Excel文件的两种方式 简单分享一下Servlet通过解析Excel文件得到其中数据的两种方式 第一种:前端获取 思路:通过layui的第三方插件 layui.excel 解析ex ...
- html中获取modelandview中的json数据_从Bitmap中获取YUV数据的两种方式
从Bitmap中我们能获取到的是RGB颜色分量,当需要获取YUV数据的时候,则需要先提取R,G,B分量的值,然后将RGB转化为YUV(根据具体的YUV的排列格式做相应的Y,U,V分量的排列) 所以这篇 ...
- form表单、控制器中接收表单提交数据的4种方式
Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...
- Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式
Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以从代码中简单理解成Receiver方式是通过zookeeper来连接kafka队列,Direct方 ...
- iOS 通过URL网络获取XML数据的两种方式
下面简单介绍如何通过url获取xml的两种方式. 第一种方式相对简单,使用NSData的构造函数dataWithContentsOfURL:不多解释,直接上代码咯. NSURL *url = [NSU ...
- 向服务器端提交数据的两种方式
朴素版: ...
- Android中实现SQLite数据库CRUD操作的两种方式
Android中实现SQLite数据库CRUD操作的两种方式 SQLite是一款轻量级的关系型数据库,具有运行速度.占用资源少的特点.通常只需要几百KB的内存就够了,因此特别适合在移动设备上使用.SQ ...
- MyBatis获取参数值的两种方式以及传参情况
MyBatis获取参数值的两种方式 MyBatis获取参数值的两种方式:${}和#{} 传参情况 演示环境 1.单个字面量类型的参数 2.多个字面量类型的参数 3.map集合类型的参数 4.实体类类型 ...
- 微信小程序获取openid的两种方式
这篇文章是关于获取openid的两种方式,自己在学着用微信小程序来写一个小东西玩 首先我们要到小程序官网获取到自己的appid和Appsecret 如图 第一种:直接在微信小程序中获取,不需要通过后台 ...
最新文章
- oracle11g分区表按时间自动创建
- 论文笔记之:Graph Attention Networks
- [Issue Fixed]-Pulse r9.1 embedded browser install failure
- Object C学习笔记19-枚举(转)
- java给qq发消息_QQ发送消息
- cv2.dnn.readNetFromDarknet()在python3上遇到的问题
- python安装you—get_使用Python下载工具you-get下载媒体文件
- mdl文件是c语言,mdl文件扩展名,mdl文件怎么打开?
- 从零开始学习OpenWrt完美教程
- 水经注下载地图,导出arcgis瓦片,然后通过geoserver+geowebcache发布地图
- python卖水果_用Python解决一个简单的水果分类问题
- python自动化测试绕过手机验证码
- dlang语法的简单整理
- 内大计算机学院马学彬,内蒙古大学 计算机学院 2012-2013(一)课程总表.doc
- 分享几个小众又高薪的职业
- 最新Brave情侣主题模板源码+Typecho内核
- Homekit智能家居DIY一智能插座
- 编译原理算符分析器实现 -* c语言代码,C语言实现算符优先文法源代码(编译原理)...
- AP自动注册改标识、AC虚拟配置管理、PC连接WiFi(华为ENSP)
- 相机数据恢复,60%的人都在用的黄金方案
热门文章
- pcs7组态虚拟机中的服务器,用虚拟机做PCS7时,无法设置固定的IP地址-工业支持中心-西门子中国...
- linux 怎么查看谁登过这台服务器,如何查看linux服务器是否被入侵
- 超大文本文件怎么打开(使用Hex Editor)
- mysql函数思维导图
- 计算机维修师高级证书好考吗,本人在考计算机维修工证书,现有诸多典型问题,求答案...
- 调研报告格式种类及相关调研报告的写法
- win7 桌面计算机不显示器,Win7电脑显示器黑屏不显示的解决方案
- RDKit|使用MolDraw2DCairo模块绘制分子
- linux 执行文件命令
- 关于Zxing生成DM二维码变形问题总结