`
songzi0206
  • 浏览: 156062 次
  • 性别: Icon_minigender_1
  • 来自: 上海
博客专栏
Group-logo
All are from ...
浏览量:33237
Group-logo
Programming w...
浏览量:19133
社区版块
存档分类
最新评论

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

    博客分类:
  • Flex
阅读更多

 

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

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

 


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

 

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

  查了下api,好在AdvancedDataGridedit相关的事件onItemEditBeginonItemEditEnd等。看来可以从这里做文章,对的,可以在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属性很容易获取。那如果获取非当前editcell的值呢?计算以后的值如何设置给正确的cell呢?

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

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

 

 

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

  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新修改的值设置到advancedDataGriddataProvider(这在前面悲剧的尝试中发现是可行的),然后在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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics