Ext.grid.EditorGridPanel的使用、修改记录的获取及提交

最新推荐文章于 2020-11-11 18:04:25 发布
最新推荐文章于 2020-11-11 18:04:25 发布
阅读量1.3k 收藏
点赞数
文章标签： extjs editorGridPanel 操作
<HTML> 

 
 <HEAD>  
 <TITLE>可编辑表格面板EditorGridPanel</TITLE>  
  <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">  
  <link rel="stylesheet"type="text/css" href="extjs2.0/resources/css/ext-all.css"mce_href="extjs2.0/resources/css/ext-all.css"/>  
  <mce:scripttype="text/javascript" src="extjs2.0/adapter/ext/ext-base.js"mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>  
  <mce:scripttype="text/javascript" src="extjs2.0/ext-all.js"mce_src="extjs2.0/ext-all.js"></mce:script>  
  <mce:scripttype="text/javascript"src="extjs2.0/source/locale/ext-lang-zh_CN.js"mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script>  
  <mce:scripttype="text/javascript"><!--  
 Ext.onReady(function(){  
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';  
 Ext.QuickTips.init();  
  Ext.form.Field.prototype.msgTarget ='qtip';  
 //创建表格数据  
  var data =[  
   [1,'张三','男',newDate(1979,09,13),29,'zhang@abc.com'],  
   [2,'李四','女',newDate(1978,10,01),30,'li@abc.com'],  
   [3,'王五','男',newDate(1981,01,01),27,'wang@abc.com']  
 ];  
 //创建记录类型Person，mapping值为字段值对应数组中数据的索引位置  
  var Person =Ext.data.Record.create([  
   {name:'personId',mapping:0},  
   {name:'personName',mapping:1},  
   {name:'personSex',mapping:2},  
   {name:'personBirthday',mapping:3},  
   {name:'personAge',mapping:4},  
   {name:'personEmail',mapping:5}  
 ]);  
  var dataStore=newExt.data.Store({//配置数据集  
   reader: newExt.data.ArrayReader({id:0},Person),  
   data: data  
  });  
 //创建Grid表格组件  
  var grid = newExt.grid.EditorGridPanel({  
   title :'Ext.grid.EditorGridPanel',  
   applyTo :'grid-div',  
  width:430,  
  height:280,  
  frame:true,  
  clicksToEdit:2,  
   store:dataStore,  
  //方式一：对所有修改结果集中式提交  
  tbar:[{  
   text:'提交修改',  
   handler:function(){  
    varmr=dataStore.getModifiedRecords();//获取所有更新过的记录  
    varrecordCount=dataStore.getCount();//获取数据集中记录的数量  
    if(mr.length==0){  //确认修改记录数量  
      alert("没有修改数据！");  
      returnfalse;  
    }  
       
    varrecordModStr="[";//这里以josn方式保存  
    for(vari=0;i<mr.length;i++){  
     alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生  
                                            //更改可用mr[i].dirty来判断  
     recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:" 
          +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";  
      if(i<mr.length-1)  
               recordModStr+=",";  
    }  
    recordModStr+="]";  
    alert(recordModStr);  
    //向后台提交请求Ext.Ajax.request(requestCofig);//将recordModStr传入  
  }  
  }],  
   columns:[//配置表格列  
   {header: "id", width: 40, dataIndex:'personId'},  
   {header: "姓名", width: 70, dataIndex:'personName',  
    editor:newExt.form.TextField({  
     allowBlank : false 
    })  
   },  
   {header: "性别", width: 40, dataIndex:'personSex',  
    editor:newExt.form.ComboBox({  
     editable :false,  
     displayField:'sex',  
     mode:'local',  
     triggerAction:'all',  
     store:newExt.data.SimpleStore({  
      fields:['sex'],  
      data :[['男'],['女']]  
     })  
    })  
   },  
   {header: "生日", width: 100, dataIndex:'personBirthday',  
    editor:newExt.form.DateField(),  
    renderer:Ext.util.Format.dateRenderer('Y年m月d日')  
   },  
   {header: "年龄", width: 40, dataIndex:'personAge',  
    editor:newExt.form.NumberField(),renderer:isEdit  
   },  
   {header: "电子邮件", width: 120, dataIndex:'personEmail',  
    editor:newExt.form.TextField({  
     vtype:'email' 
    })  
   }  
  ]  
 })  
 //方式二：对修改结果实时提交，这里对年龄实时提交  
  functionisEdit(value,record){  
   //向后台提交请求  
   returnvalue;  
 }  
functionafterEdit(obj){   //每次更改后，触发一次该事件  
         alert("orginalValue:"+obj.originalValue+",value:"+obj.value);  
     }  
    grid.on("afteredit", afterEdit,grid);  
 });  
    
//--></mce:script>  
 </HEAD>  
 <BODY style="margin=10 1010 10;" mce_style="margin=10 10 1010;">  
 <divid='grid-div'></div>  
 </BODY>  
</HTML>

关于Ext.grid.EditorGridPanel使用中遇到的问题
11-12 1213
最近做的一个项目使用到了Ext.grid.EditorGridPanel（使用的ext使用的版本是3.3.1的），根据需求，在做的过程中，遇到了这么几个问题： 1、怎么把grid中的数据通过FormPanel提交，也就是要获取grid中的数据，获取数据前的数据验证问题 2、grid中怎么放入checkColumn 3、grid中满足条件的单元格不可编辑问题 好了，说说这几个问题怎么解决的（
Ext.grid.EditorGridPanel 单元格套用下拉列表ComboBox
ylwyoyo的专栏
10-19 6578
function MentalWithMod(id){ var mentalResultGridStore = new Ext.data.JsonStore({ proxy : new Ext.data.HttpProxy({ url : '获取后台数据URL', method : 'POST', defaultHeaders : {Accept : 'application/json'
可编辑表格Ext.grid.EditorGridPanel
04-17
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码，放到eclipse里面即可运行，显示出效果！
Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法
天天开心
08-19 307
可编辑表格面板EditorGridPanel Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; Ext.QuickTips.init(); Ext.form.Field.pro...
Ext.grid.EditorGridPanel使用方法
xwdreamer的专栏
12-29 8958
首先定义一个EditorGridPanel，var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 创建Grid表格组件 applyTo : 'maintainorderinfo-grid-div',// 设置表格现实位置 frame : true,// 渲染表格面板 tbar : toolbar,// 设置顶端工具栏 stripeRows : true,// 显示斑马线 a
Extjs 之 getRowsValues 在GridPanel提交时的妙用
weixin_30378623的博客
03-31 145
需要将当前GridPanel中的数据传送到后台就需要用到getRowsValues方法. 先看方法原型: getRowsValues : function (selectedOnly, visibleOnly, dirtyOnly, currentPageOnly) { this.stopEditing(false); if (E...
ExtJs学习笔记——Ext.grid.EditorGridPanel的使用
漏气的可乐的博客
08-15 728
ExtJs学习笔记——Ext.grid.EditorGridPanel的使用 可编辑表格是指可以直接在表格的数据进行编辑，ExtJS的可编辑表格由Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一类使用的编辑即可，下面看一个完整的示例。 <!...
将表格升级为可编辑电影信息的Ext.grid.EditorGridPanel
1. **表格定义的转换**：首先，将原本的`Ext.grid.GridPanel`替换为`Ext.grid.EditorGridPanel`。`EditorGridPanel`是Ext JS中用于创建可编辑数据网格的类，它允许用户直接在表格单元格内编辑数据。 2. **创建编辑...
ext.grid.editorGridPanel样式自定义
最新发布
06-08
要自定义`Ext.grid.EditorGridPanel`的样式，可以使用CSS。以下是一些常见的样式类： - `x-grid3`：网格面板的基础样式类。 - `x-grid3-header`：网格头部单元格的样式类。 - `x-grid3-row`：网格行的样式类。 - `x...
ExtJS之EditorGridPanel
zccst的专栏
12-28 354
作者：zccst 之前大多用Ext.grid.GridPanel，现在需要可编辑功能，发现比以前稍复杂一些。 就是需要对指定列进行可编辑设置，并获取编辑后的值，存入数据库。 1，对指定列进行可编辑设置 比如下拉菜单、日历等。 2，获取编辑后的值 可使用afteredit事件，并用panel的on()方法监听。 当然也有beforeedit事件。 不过，也可以直接在可编辑...
Ext, GridPanel加载完数据后进行操作
木易的专栏
06-06 9622
比如load数据之后选定某些行数据:
ExtJs表格控件（三）----单元格编辑与提交修改
翻滚吧小牛
02-13 4650
ExtJs的EditorGrid控件提供了动态修改某个单元格的方法，首先如果要使用编辑插件，首先必须要在需要的列上添加editor属性，只有添加了editor属性的列才可以被编辑，否则无法编辑。同时我们可以在editor中添加一些限制或者约束条件，例如禁止编辑的单元格为空，首先在定义列的时候使用如下方法定义： var columns = [{ header : '第一列', da
在可编辑表格EditorGrid中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中
小马过河
08-08 3568
问题描述：在可编辑表格中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中。   1：我的可编辑表格：   2：选中一行后，点击删除一行按钮： 3：删除成功后：   就是当我点击“提交”按钮时，仍然会插入数据库中两条记录(包括我删除的那一行数据)。 我的删除一行的代码： /* * 1：grid是
【引用】自己封装的Extjs组件GroupGrid的代码（9） DateField TextField NumberField
随风飘絮
02-28 671
和大家分享这篇日志，我的看法是：  原文地址：自己封装的Extjs组件GroupGri    原文作者：chy2z 这三个组件为GroupGrid 实现高级查询服务的，选择数据范围使用。 datefield 代码： Ext.namespace("Ext.tet");Ext.tet.DateField=new Ext.extend(Ext.Panel,{         
关于Ext的EditorGridPanel实时修改数据后保存到数据库
开心阳
04-02 5862
直接上代码： MoneyGridPanel=Ext.extend(Ext.grid.EditorGridPanel,{ queryTypeCmb:null, constructor:function(){ this.queryTypeCmb=new Ext.form.ComboBox({
java 对象转字符串,防止日期变为时间戳
来一杯吧
11-11 353
//防止日期变为时间戳 JSON.toJSONStringWithDateFormat(data,"yyyy-MM-dd HH:mm:ss", SerializerFeature.WriteDateUseDateFormat);
可编辑表格：Ext.grid.EditorGridPanel
程序员的天堂
05-24 602
1、Ext.grid.EditorGridPanel      主要配置项：             clicksToEdit：设置点击单元格进入编辑模式的点击次数，默认为2            autoEncode：是否自动编码/解码HTML内容，默认为false            selModel：默认为Ext.grid.CellSelectionModel        主要方法： ...
Ext.grid.GridPanel 正确显示日期
asnn0208的专栏
07-16 1730
数据库是用的sqlserver2005，时间字段的类型是datetime。 java实体类中此字段对应的类型，我采用了java.util.Date（java.sql.Timestamp应该是最对应sql里的datetime类型的）。 前台采用了Ext.grid.GridPanel 来显示读取的数据，时间显示为long型。 让grid显示的时间为“年月日时分秒”的形式： st
Ext grid中处理时间显示格式
yrandy的专栏
04-01 1015
<br /><br />在new Ext.grid.ColumnModel({列属性中加入该属性：<br />renderer : function(value) {<br />return value ? value.dateFormat('Y-m-d H:i:s') : '';<br />}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值