麻球开发者平台,麻球开发者大赛

只看楼主 楼主

艾睿会员有特权,登陆后广告自动屏障。
现在就花5秒钟免费注册!更有好礼相送!

Adobe Flex迷你教程 -- DataGrid,itemrender以及多行多列值的控制

写了一个简单的Demo,目的是帮助大家初步了解itemrender的使用,以及如何对多行数据同时操作。

Demo操作过程。

1. DataGrid为3列,第一列是check box.
2. 点击选中多行的check box.
3. 点击删除选中行,所有被选中的行的第三列的值改变为 Deleted.

GridDemo.mxml

public var selectedItems:Array = new Array(); //保存选中行

  //将数组中的行的status 改为Delete,并且刷新Grid
  private function removeSelectedItems():void{
      for(var i:int = 0; i<selectedItems.length; i++){
              selectedItems[i].status = "Deleted";
       
         }
      idata.refresh()  
}


<mx:DataGrid id="grid" dataProvider="{idata}">
  <mx:columns>
      <mx:DataGridColumn headerText="删除" dataField="action" itemRenderer="{new ClassFactory(iCheckBox)}" />
      <mx:DataGridColumn headerText="姓名" dataField="name" />
      <mx:DataGridColumn headerText="状态" dataField="status" />

  </mx:columns>
</mx:DataGrid>


iCheckBox.as (ItemRender)

override public function set data(value:Object):void{
      if(value.action.toString() == "true"){ //如果action为true,选中check box
          this.selected = true;
          Application.application.selectedItems.push(value) //将选中的数据保存起来
      }else{
          this.selected = false;
      }
      this.currentData = value; //保存整行的引用
  }

  //点击check box时,根据状况向selectedItems array中添加当前行的引用,或者从array中移除
  private function changeHandle(e:Event):void{
      var itemArray:Array = Application.application.selectedItems
      this.currentData.action = this.selected.toString()
      if(this.selected){
          itemArray.push(this.currentData)
      }else{
          for(var i:int = 0; i<itemArray.length; i++){
              if(itemArray[i] == this.currentData){
                  itemArray.splice(i,1)
              }
          }
      }
  }





GirdDemo是上面的例子。

GridDemo1是修改了checkBox为不在dataProvider中的column, tab切换可以Z字跳转。


原文:http://www.flextheworld.com/?p=35
[本帖最后由 kevin.luo.sl 于 2009-01-02 21:06:17 编辑]

(您是游客)您没有权限查看附件

kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 沙发!

版主动作很快呀,基本我问的几个问题都快集成到这个例子中来了。
现在,我有个进一步的问题:
就是这个“删除”,不在 dataProvider 中出现,
如何让DataGrid自己固定的加上这列?
按“删除所选行”的时候,我只看"状态"列就可以了。
也就是说,“删除”对于 数据(dataProvider)来说,是并不关心的东西,只是一个DataGrid的功能性工具而已,
我(dataProvider)只要知道,到时候自会有个工具来帮我给“状态”赋值就OK了

评分

举报 使用道具 TOP

只看该用户 板凳

还有一个弱问题:
如果有2列以上是可编辑的,那么在某一Cell上按回车,光标会跳到一行的同列,到了最后一行就不动了。
如何能让光标按照从左至右,从上至下的 Z 型移动呢??
也就是在某一Cell上按回车,光标跳到本行的向右一个可编辑列,如果已经是本行左右边一个可编辑列了,
就跳到下一行,最左一个可编辑的Cell。而且不受列左右拖拽的影响,永远是从左到右

评分

举报 使用道具 TOP

只看该用户 地板

还有一个弱问题:
如果有2列以上是可编辑的,那么在某一Cell上按回车,光标会跳到一行的同列,到了最后一行就不动了。
如何能让光标按照从左至右,从上至下的 Z 型移动呢??
也就是在某一Cell上按回车,光标跳到本行的向右一个可编辑列,如果已经是本行左右边一个可编辑列了,
就跳到下一行,最左一个可编辑的Cell。而且不受列左右拖拽的影响,永远是从左到右
-- by TonyLian (2008-12-11 11:28:23)

下载gridDemo1.zip
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #4

似乎默认情况下,就支持Tab的Z型转移焦点
我想要的是Enter也这效果


噢,回车,没看清
[本帖最后由 kevin.luo.sl 于 2008-12-11 14:09:50 编辑]

评分

举报 使用道具 TOP

只看该用户 #5

还有一个挺怪的想法:
iCheckBox里监听了click事件,改变了用于保存选中的Object
可我在DataGrid里并不能随时了解到 选中 情况的变化,从而做成相应的反映
比如:
1)把选中的行的底色弄成其他颜色
2)当编辑某一Cell后,本行的"状态"已经变成"changed",然后我有选上了"删除",这时候"状态"变为“deleted”
    当我再次去掉选中的勾时,"状态"应该回到"changed",而不是初始的"OK"
    所以我做了一个private 的 _isChanged:ArrayConllention(Boolean)当编辑后 =true 同时"状态"变成"changed"
    由于,iCheckBox里没法拿到这个_isChanged,所以需要外面能监听到 “click” 事件

评分

举报 使用道具 TOP

只看该用户 #6

Application.application.selectedItems 是单实例调用吗??

如果我的把这个例子作为一个Compenent(甚至改写成AS)放到其他画面中,而且放了2个这样的Grid,那该如何写呢?

我现在就是在iCheckBox里用不了外面的变量;外面有没法监听到iCheckBox里的事件(不知该 谁.addEventLisenter?)。
两者解决一个就能解决问题。
(我的DataGrid是写在AS里的)
[本帖最后由 TonyLian 于 2008-12-11 18:36:39 编辑]

评分

举报 使用道具 TOP

只看该用户 #7

Application.application.selectedItems 是单实例调用吗??

如果我的把这个例子作为一个Compenent(甚至改写成AS)放到其他画面中,而且放了2个这样的Grid,那该如何写呢?

我现在就是在iCheckBox里用不了外面的变量;外面有没法监听到iCheckBox里的事件(不知该 谁.addEventLisenter?)。
两者解决一个就能解决问题。
(我的DataGrid是写在AS里的)
-- by TonyLian (2008-12-11 18:02:13)
Application.application.selectedItems只是在main application下的一个变量而已,Application.application是用来访问flex的 Main Application。

你可以直接在你的自定义Grid里写这么一个selectedItems, 那所有的东西就只和这个Grid有关了。

iCheckBox.parent.parent就是那个Grid.

监听Grid的change事件,它会在checkBox的change事件之后触发。或者你可以自己dispatch一个checkBox的删除事件。

private function changeHandle(e:Event):void{
           var itemArray:Array = Application.application.selectedItems
           this.currentData.action = this.selected.toString()
           if(this.selected){
               itemArray.push(this.currentData)
           }else{
               for(var i:int = 0; i<itemArray.length; i++){
                   if(itemArray[i] == this.currentData){
                       itemArray.splice(i,1)
                   }
               }
           }

      (this.parent.parent as DataGrid).dispatchEvent(new MyChecBoxEvent("checBoxClickHandle",this.selected))
       }
[本帖最后由 kevin.luo.sl 于 2008-12-11 23:04:17 编辑]
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #8

版主的(this.parent.parent as DataGrid)点醒了梦中人!!
昨天我试过this.parent 就是不好使。
我想第一个parent应该是column,第二个才是DataGrid,对吧?

不过我睡了一宿觉,又觉得这样还是不爽。必须要在DataGrid一方,做几个数组还保持“更新”“插入”“删除”
的标志,在翻页和加新行时,都要重新构筑或增加它们的长度,现在还要监听CheckBox里帮DataGrid放出来
的事件,一系列的代码堆起来,有些丑陋了。我想干脆将dataProvider的"状态"弄成int型的,然后
分别已二进制的 001 010 100 来表示“更新”“插入”“删除”,在相应的动作时(“更新”“插入”在DataGrid上;“删除”
在CheckBox上)加上相应的值
取用的时候,通过位与来知道本行的状态。还可以进一步再来个“表示状态”的get函数,通过不同的判定得出最终的结论
如  插入 + 更新 = 插入
    插入 + 删除 = 没动

评分

举报 使用道具 TOP

只看该用户 #9

我修改的checkbox,在查询数据很多,出现滑动条时不会重复push

我修改的checkbox,在查询数据很多,出现滑动条时不会重复push相同的对象,更改array为arraycollection

代码 复制 - 运行

package com.dhcc.views.util
{
	import com.dhcc.views.fxmoney.DiscreditTradeInfo.KyBusinessDetail;
	
	import flash.events.Event;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	
	
	
	public class iCheckBox extends CheckBox
	{
		private var currentData:Object; //保存当前一行值的对象
		
		public function iCheckBox()
		{
			super();
			this.addEventListener(Event.CHANGE,changeHandle)
		}
		override public function set data(value:Object):void{
			if(value.blFlag.toString() == "true"){ //如果action为true,选中check box
				this.selected = true;
				if(!KyBusinessDetail(this.parent.parent.parent.parent.parent.parent.parent).selectedItems.contains(value)){
					KyBusinessDetail(this.parent.parent.parent.parent.parent.parent.parent).selectedItems.addItem(value);
				}
			}else{
				this.selected = false;
			}
			this.currentData = value; //保存整行的引用
		}
		
		//点击check box时,根据状况向selectedItems array中添加当前行的引用,或者从array中移除
		private function changeHandle(e:Event):void{
			var itemArray:ArrayCollection = KyBusinessDetail(this.parent.parent.parent.parent.parent.parent.parent).selectedItems;
			this.currentData.blFlag = this.selected;
			if(this.selected){
				if(!itemArray.contains(currentData)){
					itemArray.addItem(currentData);
				}
			}else{
                for(var i:int = 0; i<itemArray.length; i++){
                    if(itemArray.getItemAt(i) == this.currentData){
                        itemArray.removeItemAt(i);
                    }
                }
			}
		}

	}
}

评分

举报 使用道具 TOP

只看该用户 #10

这一个例子让我学到不少。谢谢楼主

评分

举报 使用道具 TOP

只看该用户 #11

好东西!!!学习了!!!

评分

举报 使用道具 TOP

只看该用户 #12

关注.
zhoubinlai的签名
我这一生只有两件事不会,这也不会,那也不会.

评分

举报 使用道具 TOP

只看该用户 #13

就是需要这样的例子

评分

举报 使用道具 TOP

只看该用户 #14

对DataGrid 的操作  有了很好的了解了

评分

举报 使用道具 TOP

只看该用户 #15

非常不错,感谢

评分

举报 使用道具 TOP

只看该用户 #16

谢谢楼主.楼主辛苦了

评分

举报 使用道具 TOP

只看该用户 #17

感谢分享

评分

举报 使用道具 TOP

只看该用户 #18

新手学习

评分

举报 使用道具 TOP

只看该用户 #19

谢谢楼主~~~~~学习一下

评分

举报 使用道具 TOP
艾睿会员有特权,登陆后广告自动屏障。现在就花5秒钟免费注册!更有好礼相送!