首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex AdvancedDataGrid 动态构建和编者并计算

2012-11-23 
Flex AdvancedDataGrid 动态构建和编辑并计算???  项目实在太紧,多线程模块SIT还没结束,一堆前台的问题也

Flex AdvancedDataGrid 动态构建和编辑并计算

?

??  项目实在太紧,多线程模块SIT还没结束,一堆前台的问题也得亲自上阵,马不停蹄加班加点到这一刻终于收工,趁热记录下遇到过的两个纠结的功能。今天先写第一个: 

???? 关于flex动态AdvancedDataGrid的操作,前台根据后台返回数据构建一个动态的grid不算纠结,就略去,要说的是动态的可以编辑某些单元格,不是所有单元格都能编辑,只是一小部分。一旦单元格编辑完毕,有些依赖的格子就得做相应的计算,改变其值。举个例子吧:

?

Flex AdvancedDataGrid 动态构建和编者并计算
??  如上图是一个Flex的AdvancedDataGrid,后台返回有两批记录,每批记录都构建一列。现在每一列的第三行(也就是Revenue对应的行)的数字是可以改变的,而其他行不能改变,当某一列的第三行数字改变以后,该列所在的其他部分行的值就要相应改变,比如第五行的值=第三行的值 - 第四行的值;第一行的值 = 第三行的值/第六行的值,等等。

?

  貌似很简单,edit功能只要指定editable就可以,计算么可以在修改完之后去根据AdvancedDataGrid 获取指定的单元格然后设置其值就ok,嘿嘿,我开始也是这么想的。可惜,首先AdvancedDataGrid没有cell的概念,所以想要通过AdvancedDataGrid去获得单元格是困难的;其次这个AdvancedDataGrid是动态构建的,而且这个editable属性无法加到特定的格子里,要么整列,要么整个grid。肿么办?

  查了下api,好在AdvancedDataGrid有edit相关的事件onItemEditBegin、onItemEditEnd等。看来可以从这里做文章,对的,可以在onItemEditBegin事件中终止edit事件,这样就可以控制到具体的单元格了。??

这样在edit事件触发的时候,如果是第一列或者不是第三行,事件会被终止:? 

event.preventDefault();

接下来看编辑完以后计算的问题。计算之前必然是先要能够取得user输入的新值,这个容易,在onItemEditEnd事件中通过AdvancedDataGrid对象的itemEditorInstanc属性很容易获取。那如果获取非当前edit的cell的值呢?计算以后的值如何设置给正确的cell呢?

既然无法通过AdvancedDataGrid获取类似cell,那很容易让人想到的通过他的dataProvider属性。没错,AdvancedDataGrid的dataProvider可以通过转化为类型ListCollectionView,从而通过rowIndex获取某一行的值对象,再通过dataField获取对应列的值,这样就能获取任意格子的值了。同理,计算好的值也可以通过他设置给需要的格子。例如:

?

?

没错,这样确实能达到准确获取数据,并计算好准确的设置给grid的dataProvider,按理dataProvider改变了,grid自然就达到显示效果了。但是调式中却发现,值的获取、计算都没问题,计算的新值也确实反映到grid的dataProvider中了,grid的dataProvider的绑定数据集也是正确的,但是页面上的grid显示值就是不改变!悲摧中,发现通过这样赋值是可以改变页面显示的:TextInput(advancedDataGrid.itemEditorInstance).text = initValue;但是这只能修改当前编辑的格子的值,远远不够啊!于是我尝试在onItemEditEnd中做了这样一件事情:当计算出新值后,我重新指定grid的dataProvider对象:?

? var newCol:ArrayCollection = new ArrayCollection(ObjectUtils.copy(advancedDataGrid.dataProvider.source) as Array); do something new to set new values for the newCol; advancedDataGrid.dataProvider = newCol;

调试中发现更悲剧的问题:当在onItemEditEnd事件中执行上面最后一行即重新设置dataProvider对象时,死循环发生了!advancedDataGrid.dataProvider = newCol会使得advancedDataGrid重新执行onItemEditEnd事件,而事件中又设置....! 这个问题有点tricky,在api上也没有相关的说明啊。

一筹莫展,但是相信flex肯定是有方法可以做到的,要不也太恶心而来吧。既然onItemEditEnd中会死循环,设置新值以后页面表格显示也不会刷新,显然不能在这个事件中做这些事情呗!对,编辑完了以后,可以在当前格子失去焦点的时候做这些事情啊!马上测试,在事件onItemFocusOut随便设置了下ListCollectionView(appetiteDataGrid.dataProvider).getItemAt(2)[dataField]=111; 页面生效!有戏啊!下面的工作就顺利多了:在onItemEditEnd中记录当前修改的格子对应的dataField(因为在onItemFocusOut无法获取),并把user新修改的值设置到advancedDataGrid的dataProvider(这在前面悲剧的尝试中发现是可行的),然后在onItemFocusOut事件中可以拿到最新的dataProvider值进行相应的业务计算并赋值给dataProvider相应的值!示例:

?

?

?

?

热点排行