ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html
----------------------------------------------------------------------------------------------
以上实现的效果就是本节所要做的效果,现在看代码:
/*** Grid* 此js演示了如何设置可编辑表格*/ //表格数据最起码有列、数据、转换原始数据这3项 Ext.onReady(function(){//定义列var columns = [{header:'编号',dataIndex:'id',width:50,editor:{allowBlank:true}}, //sortable:true 可设置是否为该列进行排序{header:'名称',dataIndex:'name',width:80,editor:{allowBlank:true}},{header:'描述',dataIndex:'descn',width:112,editor:{allowBlank:true}}];//定义数据var data =[['1','小王','描述01'],['2','李四','描述02'],['3','张三','描述03'],['4','束洋洋','思考者日记网'],['5','高飞','描述05']];//转换原始数据为EXT可以显示的数据var store = new Ext.data.ArrayStore({data:data,fields:[{name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置{name:'name'},{name:'descn'}]});//加载数据 store.load();//创建表格//原:Ext.grid.GridPanel,但在Extjs4.1(4.2)中都没找到,只有new Ext.grid.Panel,不过效果一致。var grid = new Ext.grid.Panel({renderTo:'grid', //渲染位置width:550,autoHeight:true,store:store,columns:columns, //显示列stripeRows:true, //斑马线效果selType: 'cellmodel',plugins:[Ext.create('Ext.grid.plugin.CellEditing',{clicksToEdit:1 //设置单击单元格编辑(设置为2是双击进行修改) })],tbar:['-',{text:'添加一行',handler:function(){var p ={id:'',name:'',descn:''};store.insert(0,p);}},'-',{text:'删除一行',handler:function(){Ext.Msg.confirm('系统提示','确定要删除?',function(btn){if(btn=='yes'){var sm = grid.getSelectionModel();var record = sm.getSelection()[0];store.remove(record);}});}},'-',{text:'保存',handler:function(){var m = store.getModifiedRecords();//原:store.getModifiedRecords().slice(0);都可以var jsonArray = [];Ext.each(m,function(item){jsonArray.push(item.data);});Ext.Ajax.request({method:'POST',url:'/extjsTest1/EditGridServlet',success:function(response){Ext.Msg.alert('系统提示',response.responseText,function(){store.load();});},failure:function(){Ext.Msg.alert("错误","与后台联系的时候出了问题。");},params:'data='+Ext.encode(jsonArray)//原:encodeURIComponent(Ext.encode(jsonArray))都可以 });}}]}); });
一、上面js代码说明
1.Ext.grid.plugin.CellEditing
plugins:[Ext.create('Ext.grid.plugin.CellEditing',{clicksToEdit:1 //设置单击单元格编辑(设置为2是双击进行修改) })],
这里我们启用了CellEditing插件,其他的部分并没有什么变化。可是看到的结果是,现在可以用TextField的方式随意修改单元格。记得不能让单元格为空,否则无法修改。
默认情况下,需要双击单元格才能激活编辑器,从而进行修改。不过,也可以给表格配置上clicksToEdit:1,这样就可以通过单击单元格激活编辑器,从而进行修改。
TextField不允许输入空值,因为在创建columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。
2.tbar
tbar:['-',{text:'添加一行',handler:function(){var p ={id:'',name:'',descn:''};store.insert(0,p);}},
这是Ext.panel.Panel中的配置属性,在API有这样的介绍:
因为Ext.grid.Panel继承了Ext.panel.Panel,所以继承了它的所有属性,因此可以用这个tbar。
2.1 handler
这是Ext.panel.Tool中的配置选项(Config options)中的一个属性,在API中的描述如下:
3.store.insert
这是Ext.data.ArrayStore中的方法,具体参见API。
二、后台代码
@SuppressWarnings("serial") public class EditGridServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); String data = req.getParameter("data"); System.out.println(data); resp.getWriter().print(data); } }
打印结果:
后记:Extjs模拟java的面向对象的思想(当然和java语言不能等同,毕竟它是用javascript编写的),是一个重量级的前台框架,里面涉及到的类较多,因此查询API是了解其中的类、属性、方法等的重要途径。
转载于:https://www.cnblogs.com/wql025/p/4979653.html
ExtJS4.2学习(七)EditorGrid可编辑表格(转)相关推荐
- Web学习基础应用-可编辑表格
前文 可编辑表格在JavaScript中是比较经典的基础应用,涉及的知识内容就是最普遍的增删改查的设计思路.我在基础学习的过程中学学到的就是拿到你一个作业的时候,先分析需求,构思完结构代码之后再进行消 ...
- ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2
运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的inde ...
- ExtJS4.2学习(14)基于表格的扩展插件(2)
我曾经在第6节里讲到表格分页,还记得之前的分页组件是什么样的吗? 上面只有文字显示,我们来为其制作的更美观点,好吧,不卖关子了,讲本节的内容:进度条分页控件,这是表格扩展组件. 首先我们需要引入扩展组 ...
- 在可编辑表格EditorGrid中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
- wps html编辑表格,手机wps中怎么编辑表格图文教程
我们可以在手机版本的wps中对表格进行编辑,对于新手来说可能不知如何操作,下面就让学习啦小编告诉你如何在手机wps中编辑表格 的方法. 手机wps中编辑表格的方法 首先,下载并安装Android WP ...
- iview可编辑表格组件封装
因为公司需要尝试新的UI框架,因此自己也是学习了iview这个新的框架,之前一直都是用的element-ui,正好公司项目用到可编辑表格这样的组件,但是网上也是搜不到相关的资料,所以自己在参考了ivi ...
- html word 编辑表格,在Word文档中运用编辑表格的7个技巧
来自:脚本之家 链接:http://www.jb51.net/office/word/466465.html 工作中经常用Word来写各类总结.方案.通告等文件,多数情况下都会文本表格并用.如何在Wo ...
- android表格可以编辑,手机wps中如何编辑表格
我们可以在手机版本的wps中对表格进行编辑,但是习惯使用电脑的朋友可能不熟悉手机端wps怎么办?下面就让学习啦小编告诉你如何在手机wps中编辑表格 的方法. 在手机wps中编辑表格的方法 首先,下载并 ...
- android 如何制作可编辑的表格,在手机wps中编辑表格的方法
我们可以在手机版本的wps中对表格进行编辑,对于新手来说可能不知如何操作,下面就让学习啦小编告诉你如何在手机wps中编辑表格的方法,希望对大家有所帮助. 在手机wps中编辑表格的方法 首先,下载并安装 ...
最新文章
- 撩课-Web大前端每天5道面试题-Day12
- 如何在Ruby中获得随机数
- python常用函数表-python-列表常用函数
- 全新 Win 9 概念 界面漂亮极了
- 前端学习(2356):uni基本的插件安装
- 聚数引智,承德大数据产业对接交流会将于2019中国国际数字经济博览会期间召开...
- NO.59 禅道的获奖奖品
- bzoj 1697: [Usaco2007 Feb]Cow Sorting牛排序(置换)
- Mysql基础系列(一)
- apache 设置404 页面_Apache和Nginx解析漏洞
- SubSonic 安装与使用
- 计算机显卡类型有,显卡类型分几种|笔记本显卡类型
- minio更换端口启动
- 【转】大数据【五十八】探索MapReduce过程及分组详解
- Fantastic Blog CMS SQL注入漏洞(CVE-2022-28512)
- 字符串str.format()方法的个人整理
- 纤维水泥板及配件建筑材料英国UKCA认证—EN 492
- vue 中点击叉号,关闭div的方法
- Web 3 大会 | 伍鸣博士发表主题演讲
- android 6g 有必要吗,Android手机6GB内存有必要吗?实测出真知