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

阅读更多

 

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

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

 

   　如上图是一个Flex的AdvancedDataGrid，后台返回有两批记录，每批记录都构建一列。现在每一列的第三行(也就是Revenue对应的行)的数字是可以改变的，而其他行不能改变，当某一列的第三行数字改变以后，该列所在的其他部分行的值就要相应改变，比如第五行的值＝第三行的值　－　第四行的值；第一行的值　＝　第三行的值/第六行的值，等等。

 

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

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

private function onItemEditBegin(event:AdvancedDataGridEvent):void{
	if( model.riskAppetitleCol != null && model.riskAppetitleCol.length > 0){
		if( event.columnIndex == 0 )
			event.preventDefault();
		else if(event.rowIndex != 3)
			event.preventDefault();
	}
}

  

  　　这里用event.dataField作为判断依据比较好，因为如果前台需要对grid排序的话，rowIndex会打乱，在这里就图简单直接用rowIndex和columnIndex做依据了。

      

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

event.preventDefault();

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

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

//获取当前编辑格子的的值
ListCollectionView(advancedDataGrid.dataProvider).getItemAt(event.rowIndex)[event.dataField];
//获取第i行，以dataField为列头的格子的值
ListCollectionView(appetiteDataGrid.dataProvider).getItemAt(i)[dataField];
//设置第８行以dataField为列头的格子的值　＝　newCalVal
ListCollectionView(appetiteDataGrid.dataProvider).getItemAt(8)[dataField] = newCalVal;

 

 

没错，这样确实能达到准确获取数据，并计算好准确的设置给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相应的值！示例：

private var dataField:String = null;
public function onItemEditEnd(event:AdvancedDataGridEvent):void{
	//记录当前编辑的列对应dataField
  　　　　　dataField = event.dataField;
  　　var initValue:String = ListCollectionView(advancedDataGrid.dataProvider).getItemAt(event.rowIndex)[event.dataField] as String;
　　　if( event.reason == AdvancedDataGridEventReason.CANCELLED){
	return;
　　　}
　　　var inputStr:String = TextInput(advancedDataGrid.itemEditorInstance).text
　　　var newValue:Number = Number(inputStr);
　　　if(isNaN(newValue)){
		//If the inputed value is not a number
     　　　　TextInput(advancedDataGrid.itemEditorInstance).text = initValue;
    	return;
  　　}else{
    　　　 ListCollectionView(advancedDataGrid.dataProvider).getItemAt(event.rowIndex)[event.dataField] = newValue;
     　　　ListCollectionView(advancedDataGrid.dataProvider).refresh();
    　}
}

private function onItemFocusOut(event:AdvancedDataGridEvent):void{
　if(event.rowIndex == 3){
　　　//获取值
　　　var revenue:Number = ListCollectionView(advancedDataGrid.dataProvider).getItemAt(2)[dataField] as Number;
　　　var expense:Number = ListCollectionView(advancedDataGrid.dataProvider).getItemAt(3)[dataField] as Number;
　　　var otherVal1: Number = ...;
　　　var otherVal2:Number = ...;
　　　.......
 //计算
　　　var newVal1:Number = ...;
　　　var newVal2: Number =...;
　　　........
//将新计算的值设置回dataprovider
　　　ListCollectionView(advancedDataGrid.dataProvider).getItemAt(5)[dataField]= newVal1;
　　　ListCollectionView(advancedDataGrid.dataProvider).getItemAt(6)[dataField]= newVal2;
......
//刷新
　　　ListCollectionView(advancedDataGrid.dataProvider).refresh();
　　}
}

 

 

 

 

• 
• 大小: 33.9 KB

• 查看图片附件