extjs ajaxEDITORGRID 编辑一个单元格后如何同时改变另一个单元格

点击联系发帖人 时间：2012-12-25 06:07

extjs ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&SHUIMOMO 的BLOG
用户名：SHUIMOMO
文章数：138
评论数：27
访问量：357334
注册日期：
阅读量：5863
阅读量：12276
阅读量：298970
阅读量：1019232
51CTO推荐博文
首先技术原理基于狂人论坛的大大yunfengcheng发的帖子《100行代码解决ExtJs4.1合并单元格问题》，表示感谢。如果需要他的代码各位可自行下载，在此不方便贴出（人家可卖30个金钱的呢，虽然有点小贵，呵呵）。好了，进入正题吧。首先使用他的代码后效果如下：650) this.width=650;" src="http://my.csdn.net/uploads//_6970.jpg" style="border:" alt="_6970.jpg" />从这幅图可以看出，该合并的都合并了，不该合并的也合并了，第三列“A单元”，属于不同的地块，不同栋数，常理是不应该合并的，所以引出一个问题，合并列时应该判断前一列的合并情况，属于不同合并区的单元格虽然值相等但不进行合并。效果应该是这样：650) this.width=650;" src="http://my.csdn.net/uploads//_4954.jpg" style="border:" alt="_4954.jpg" />这是优化后的代码效果，下面说说具体方法：如果你看了《100行代码解决ExtJs4.1合并单元格问题》的代码会发现，其中写了很多each语句，而且是嵌套的，在实现上图效果时，已经明显感觉速度有点慢，所以笔者就奇怪搞这么多each干嘛呢？直接用数组多好，参数已经指定合并的列了，用数组直接取不就得啦。代码如下：[javascript]var mergeCells = function(grid,cols){ var arrayTr=document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChild.getElementsByTagName('tr');
var trCount = arrayTr. var arrayTd; var var merge = function(rowspanObj,removeObjs){ if(rowspanObj.rowspan != 1){
arrayTd =arrayTr[rowspanObj.tr].getElementsByTagName("td");
td=arrayTd[rowspanObj.td-1];
td.rowSpan=rowspanObj.
td.vAlign="middle";
Ext.each(removeObjs,function(obj){
arrayTd =arrayTr[obj.tr].getElementsByTagName("td");
arrayTd[obj.td-1].style.display='none';
var rowspanObj = {}; var removeObjs = []; var
Ext.each(cols,function(colIndex){ var rowspan = 1; var divHtml = null;for(var i=1;i&trCi++){
arrayTd = arrayTr[i].getElementsByTagName("td"); var cold=0;
col=colIndex+if(!divHtml){
divHtml = arrayTd[col-1].innerHTML;
rowspanObj = {tr:i,td:col,rowspan:rowspan}
}else{ var cellText = arrayTd[col-1].innerHTML; var addf=function(){
rowspanObj["rowspan"] = rowspanObj["rowspan"]+1;
removeObjs.push({tr:i,td:col}); if(i==trCount-1)
merge(rowspanObj,removeObjs);
}; var mergef=function(){
merge(rowspanObj,removeObjs);
divHtml = cellT
rowspanObj = {tr:i,td:col,rowspan:rowspan}
removeObjs = [];
}; if(cellText == divHtml){ if(colIndex!=cols[0]){
var leftDisplay=arrayTd[col-2].style.if(leftDisplay=='none')
}; 从代码量来说，只有70行左右（本来想把标题也弄成70行代码解决、、、、呵呵，笔者不是标题党）。这里需要特别说一下getElementsByTagName这个东西，原先笔者也以为返回的是一个数组，其实不是，只是类似数组的东东，你可以用array[0]来访问里面的元素，但是却不能用push,pop,shift等操作数组的方法操作它，网上也有资源说定义一个数组把元素全部push过去，再进行删除等操作，笔者未采用，直接找到需要删除的元素下标跳过就可以了，因为getElementsByTagName得到的元素顺序和DOM的实际顺序是一致的。另外：[javascript]if(colIndex!=cols[0]){
var leftDisplay=arrayTd[col-2].style.if(leftDisplay=='none')
colIndex!=cols[0]是跳过第一列（开始合并的第一列），这一列不需要判断前一列的合并情况，这里采用display来做判断条件，因为被合并的都是display=none,没有合并的说明此处是两个合并区的分隔点，当然你也可以自己写另外的判断条件，可以定义一个函数判断一个单元格是否处于一个合并区里面，那么条件就是本单元格的左一个单元格和上左的单元格是否处于同一个合并区，是循环继续，不是则进行合并，方法很多，各位自由发挥，有了新的方法不防大家交流学习一下。代码中注释的部分是可以不用的：[javascript]Ext.each(arrayTd,function(Td){ if(Td.getAttribute("class").indexOf("x-grid-cell-special") != -1)
}); 合并列的参数里直接把RowNumber列和check列算在内就OK了。使用方法：[javascript]Ext.getCmp('grid').getStore().on('load',function(){
mergeCells(Ext.getCmp('grid'),[1,2,3,4,5,6]); }); 当数据加载完成后执行，从第一列开发合并；如果第一列是RowNumberer列，那么就用[2,3,4,5,6]，跳过第一列即可。原文：http://blog.csdn.net/kunoy/article/details/7829395
了这篇文章
类别：┆阅读(0)┆评论(0)随笔- 865&
&&&&&&& 可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可，下面来看一个简单的示例。Ext.onReady(function(){ var data=[{id:1,name:'小王',email:'',sex:'男',bornDate:''},{id:1,name:'小李',email:'',sex:'男',bornDate:''},{id:1,name:'小兰',email:'',sex:'女',bornDate:''} ];var store=new Ext.data.JsonStore({data:data,fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]}); var colM=new Ext.grid.ColumnModel([{header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()}, {header:"性别",dataIndex:"sex"},{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')},{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
//一般的编辑框]);var grid = new Ext.grid.EditorGridPanel({renderTo:"hello",title:"学生基本信息管理",height:200,width:600, cm:colM,store:store,autoExpandColumn:3});});
&&&&&&& 上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个JsonStore，在创建这个store的时候，指定bornDate列的类型为日期 date类型，并使用dateFormat来指定日期信息的格式为"Y-n-j"，Y代表年，n代表月,j代表日期。定义表格列模型的时候，对于“姓名” 及“电子邮件”列我们使用editor来定义该列使用的编辑器，这里是使用Ext.form.TextField，最后使用new Ext.grid.EditorGridPanel(…)来创建一个可编辑的表格。执行上面的程序可以生成一个表格，双击表格中的“姓名”、或“电子邮件 ”单元格中的信息可以触发单元格的编辑，可以在单元格的文本框中直接编辑表格中的内容，修改过的单元格会有特殊的标记，如下图所示：
&&&&&&& 为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑，“ 性别”一列的数据不应该让用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编辑器可以使用boBox组件，下面是实现对性别及出生日期等列信息编辑的代码：var colM=new Ext.grid.ColumnModel([{header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()}, {header:"性别",dataIndex:"sex",editor:new boBox({transform.:"sexList",
//可编辑下拉菜单triggerAction: 'all',lazyRender:true})},{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
//可编辑时间editor:new Ext.form.DateField({format:'Y年m月d日'})},{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}]);var grid = new Ext.grid.EditorGridPanel({renderTo:"hello",title:"学生基本信息管理",height:200,width:600, cm:colM,store:store,autoExpandColumn:3,clicksToEdit:1
//单击可编辑
默认是2 为双击});
&&&&&&& 注意在定义EditorGridPanel的时候，我们增加了一个属性“clicksToEdit:1”，表示点击一次单元格即触发编辑，因为默认情况下该值为2，需要双击单元格才能编辑。为了给ComboBox中填充数据，我们使用设置了该组件的transform配置属性值为 sexList，sexList是一个传统的&select&框，我们需要在html页面中直接定义，代码如下：&select. id="sexList" name="sexList"& &option&男&/option& &option&女&/option& &/select&
&&&&&&& 执行上面的程序，我们可以得到一个能对表格中所有数据进行编辑的表格了。点击上面的“性别”一列的单元格时，会出现一个下拉选择框，点击“出生日期”一列的单元格时，会出现一个日期数据选择框，如图xxxx所示：
(编辑性别列中的数据)
(编辑出生日期列中的数据)
&&&&&&& 那么如何保存编辑后的数据呢？答案是直接使用afteredit事件。当对一个单元格进行编辑完之后，就会触发afteredit事件，可以通过该事件处理函数来处理单元格的信息编辑。比如在这个单用户blog示例中，当我们编辑一个日志目录的时候，需要把编辑后的数据保存到服务器，代码如下：this.grid.on("afteredit",this.afterEdit,this);… afterEdit:function(obj){var r=obj.var id=r.get("id");var name=r.get("name");var c=this.record2obj(r);var tree=this.var node=tree.getSelectionModel().getSelectedNode(); if(node && node.id!="root")c.parentId=node.if(id=="-1" && name!=""){ topicCategoryService.addTopicCategory(c,function(id){ if(id)r.set("id",id);if(!node)node=tree.node.appendChild(new Ext.tree.TreeNode({id:id,text:c.name,leaf:true}));node.getUI().removeClass('x-tree-node-leaf');node.getUI().addClass('x-tree-node-expanded');node.expand();});}else if(name!=""){ topicCategoryService.updateTopicCategory(r.get("id"),c,function(ret){ if(ret)tree.getNodeById(r.get("id")).setText(c.name);});}}
&&&&&&& 关于可编辑表格控件的详细说明，请参考中的VIP文档《ExtJS可编辑表格EditorGridPanel详解》。
阅读(...) 评论()ExtJs表格控件（三）----单元格编辑与提交修改
ExtJs的EditorGrid控件提供了动态修改某个单元格的方法，首先如果要使用编辑插件，首先必须要在需要的列上添加editor属性，只有添加了editor属性的列才可以被编辑，否则无法编辑。同时我们可以在editor中添加一些限制或者约束条件，例如禁止编辑的单元格为空，首先在定义列的时候使用如下方法定义：
var columns = [{
header : '第一列',
dataIndex : 'first',
renderer:datarender,
allowBlank:false
header : '第二列',
dataIndex : 'second',
allowBlank:false
header : '第三列',
dataIndex : 'third',
allowBlank:false
header : '第四列',
dataIndex : 'four',
format:'Y-m-d H:i:s',
width:120,
allowBlank:false
} ];然后在在GraidPanel中启用CellEditing插件即可。
plugins:[Ext.create('Ext.grid.plugin.CellEditing',{
clicksToEdit:2//设置点击几次触发编辑插件，默认次数为2
这样就可以实现双击对应的单元格后实现单元格编辑，当修改完单元格后需要将修改的内容传输到后台进行处理，这里我们为GridPanel中添加一个顶部工具栏，然后有个保存按钮，点击保存按钮将修改数据进行传输。
下面看具体示例：
text:'保存',
handler:function(){
var m = store.getModifiedRecords().slice(0);
var jsonArray = [];
Ext.each(m,function(item){
jsonArray.push(item.data);
Ext.Ajax.request({
method:'POST',
url:"grid_StoreMsg",
success:function(response){
Ext.Msg.alert('提示','成功');
failure:function(){
Ext.Msg.alert('提示','失败');
params:'jsonArray='+encodeURIComponent(Ext.encode(jsonArray))
}]在这里我们先使用store.getModifiedRecords()。获取store中修改过的数据，然后Slice(start,[end])函数的作用是返回一个新的数组，包含原数组从start到end所指定的元素，但不包含end元素，例如有个长度为5的数组a，a.slice(1,4)就是返回数组中的第2、3、4个元素组成的新数组（注意下表从0开始），如果start或者end为负数都给这个负数加上原数组的长度进行计算，例如：a.slice(-2,4)可以当作a.slice(3,4)。上述代码中slice(0)的作用是复制store.getModifiedRecords()中的数据，从而保证原数据不受影响。
Ext.each(array,function)的作用是遍历array数组，并对数组中的每一项调用function函数，如果array不是一个数组，那么就会执行一次。如果数组中某一项调用函数后返回结果是false那么遍历将结束并且退出。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'Extjs教程第六章 Editor Grids(可编辑表格)-五星文库
免费文档下载
Extjs教程第六章 Editor Grids(可编辑表格)
导读：EditorGrids（可编辑表格），在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据，它支持用户对表格进行编辑――我们现在就对这一控件进行学习，允许用户在点击单元格后进行数据的编辑操作，?为用户提供连接到datastore的可编辑表格，?把编辑后的数据发给服务器，我们要看看可以用可编辑表格能够做什么事情，我们能用可
Editor Grids（可编辑表格）
在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑――我们现在就对这一控件进行学习。它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。
在这章里，我们将会学到：
? 为用户提供连接到data store的可编辑表格；
? 把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据；
? 通过编码操控grid并对事件做出相应；
? 教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。但是，首先，我们要看看可以用可编辑表格能够做什么事情。
我们能用可编辑表格做什么？
EditorGridPanel和我们之前使用到的表单（form）很相似。实际上，editor gird使用了和form中完全一样的表单字段。通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。包括输入约束以及数值验证等。把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。
这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。
使用可编辑的表格：
可编辑和不可编辑表格的区别十一个相当简单的开始的过程。复杂的使我们需要处理编辑状态然后传回服务器。但是一旦你学会了如何去做，这部分也就同样变得相当的简单。
让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。修改后的代码如下所示：
var title_edit = new Ext.form.TextField();
var director_edit = new Ext.form.TextField({vtype: 'name'});
var grid = new Ext.grid.EditorGridPanel({
renderTo: document.body, frame:true, title: 'Movie Database', height:200, width:520, clickstoEdit: 1, store: store, columns: [
{header: &Title&, dataIndex: 'title',editor: title_edit}, {header: &Director&, dataIndex: 'director',editor: director_edit}, var tagline_edit = new Ext.form.TextField({ maxLength: 45
{header: &Released&, dataIndex: 'released',renderer:
Ext.util.Format.dateRenderer('m/d/Y')},
为了让grid可编辑，我们需要做四件事情。它们是：
? 表格的定义由Ex.grid.GridPanel转化为Ext.grid.EditorGridPanel；
? 为grid的配置添加clicksToEdit――这个选项不是必须的，默认双击触发编
? 为每列建立一个表单字段用来编辑；
] {header: &Genre&, dataIndex: 'genre',renderer: genre_name}, {header: &Tagline&, dataIndex: 'tagline',editor: tagline_edit}
? 通过editor配置把表单字段传递给column model。
editor可以是ExtJS中的任何表单字段，或者是你自定义的字段。我们先从建立文本字段编辑电影标题开始。
var title_edit = new Ext.form.TextField();
然后，我们利用editor配置向column model添加表单字段：
{header: &Title&, dataIndex: 'title', editor: title_edit}
接下来把GridPanel组件改为EditorGridPanel，然后添加clicksToEditor配置： var grid = new Ext.grid.EditorGridPanel({
通过进行这些改变，静态的表格就变为了可编辑的表格，我们可以通过点击任何建立了editor的字段来进行编辑。 renderTo: document.body, frame:true, title: 'Movie Database', height:200, width:520, clickstoEdit: 1, // removed extra code for clarity
我们看到了有的电影标题发生了改变，把他们变成了音乐剧(musical)。editor（编辑器）只需你单击便可被激活。按下Enter、Tab键或者在该字段外点击鼠标都可以保存改动。按下Esc键可以放弃改动。它和表单字段的工作方式很想象??因为??它本身就是个表单字段。
左上角的红色标记表示这个单元格是“dirty”的，即我们只是做了暂时的改动（还没有被提交）。首先，让我们做一些更复杂的可编辑单元格。
编辑更多单元格中的数据：
对于我们基本的editor grid，我们从使单独的列可编辑开始。为了建立editor（编辑器），我们建立了对表单字段的引用：
var title_edit = new Ext.form.TextField();
然后我们把这个表单字段当做列中的editor使用：
{header: &Title&, dataIndex: 'title', editor: title_edit}
这就是对每个字段的基本要求，现在让我们扩展一下知识。
使用更多的类型的字段进行编辑：
现在我们利用其它的表单字段来建立editor。不同的数据类型有不同的editor与之对应，每一种字段也有着不同的配置。
所有类型的字段都可以被用来充当editor，这里列出一些标准的类型： ?
? TextField NumberField ComboBox DateField TimeField CheckBox
这些editor可以被拓展，从而满足各种编辑需求，但是现在，我们先从编辑电影表格的字段开始――release date（发行日期）列和genre列。
编辑日期数值：
对于release date（发行日期）一列中的单元格我们可以通过使用DateField进行编辑。我们先得建立编辑字段并且提供相应格式字符串：
release_edit = new Ext.form.DateField({
接下来我们可以把这个editor应用到列中，采用的方式仍然是之前提及的renderer：
{header: &Released&, dataIndex: 'released', renderer:
Ext.util.Format.dateRenderer('m/d/Y'), editor: release_edit} format: 'm/d/Y'
包含总结汇报、资格考试、文档下载、word文档、外语学习、党团工作、教学研究、办公文档、专业文献以及Extjs教程第六章 Editor Grids(可编辑表格)等内容。本文共5页
相关内容搜索}

叫阿莫西中心