调用DataGrid的InvalidateList和validateNow两个方法来实现动态的刷新视图。如果你使用了数据源绑定操作的话一般来说DataGrid会自动的帮你去更新视图,具体的应该也会去调用这两个方法。所以遇到DataGrid视图方面的问题可以通过这两个方法来试试。
invalidateList()这个函数用来刷新 DataGrid 的每一行,validateNow()这个是在 DataGrid 的属性(大小,位置等)改变时,进行手动刷新的。我们要刷新纪录,就要用 invalidateList() 。
for <s:DataGrid/> ,没有invalidateList(),用invalidateTypicalItem()取而代之;
1、invalidateList例子
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:layout> <s:HorizontalLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; //绑定表格用的数据 [Bindable] private var arr1:ArrayCollection = new ArrayCollection([ {neName:"教工路文一路路口相机_4", neType:"相机" , neAlarmType:"设备告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"2级"}, {neName:"学院路文一路路口相机_3", neType:"相机" , neAlarmType:"环境告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"3级"}, {neName:"文一路莫干山路路口相机_1", neType:"相机" , neAlarmType:"连接通信告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"1级"}, {neName:"文一路莫干山路路口相机_3", neType:"相机" , neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"4级"} ]); [Bindable] private var arr2:ArrayCollection = new ArrayCollection([ {neName:"教工路文一路路口相机_4", neType:"相机" , neAlarmType:"设备告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"2级"}, {neName:"学院路文一路路口相机_3", neType:"相机" , neAlarmType:"环境告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"3级"}, {neName:"文一路莫干山路路口相机_1", neType:"相机" , neAlarmType:"连接通信告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"1级"}, {neName:"文一路莫干山路路口相机_3", neType:"相机" , neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"4级"} ]); //删除告警信息 public function deleteAlarmRecord1():void{ arr1.removeItemAt(alarmGrid1.selectedIndex); } //确认告警信息 public function confirmAlarmInfo1():void{ arr1.getItemAt(alarmGrid1.selectedIndex).confirmStatus = "已确认"; alarmGrid1.invalidateTypicalItem(); } //删除告警信息 public function deleteAlarmRecord2():void{ arr2.removeItemAt(alarmGrid2.selectedIndex); } //确认告警信息 public function confirmAlarmInfo2():void{ arr2.getItemAt(alarmGrid2.selectedIndex).confirmStatus = "已确认"; alarmGrid2.invalidateList(); } ]]> </fx:Script> <s:DataGrid id="alarmGrid1" width="600" height="285" requestedRowCount="4" dataProvider="{arr1}"> <s:columns> <s:ArrayList> <s:GridColumn dataField="neName" headerText="名称"></s:GridColumn> <s:GridColumn dataField="neType" headerText="类型"></s:GridColumn> <s:GridColumn dataField="removeStatus" headerText="清除状态"></s:GridColumn> <s:GridColumn dataField="confirmStatus" headerText="确认状态"></s:GridColumn> <s:GridColumn headerText="操作"> <s:itemRenderer> <fx:Component> <s:GridItemRenderer> <s:HGroup> <mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord1();" textDecoration="underline" color="#2066CF" fontWeight="normal"/> <mx:LinkButton toolTip="确认" label="确认" click="outerDocument.confirmAlarmInfo1()" textDecoration="underline" color="#2066CF" fontWeight="normal"/> </s:HGroup> </s:GridItemRenderer> </fx:Component> </s:itemRenderer> </s:GridColumn> </s:ArrayList> </s:columns> </s:DataGrid> <mx:DataGrid id="alarmGrid2" width="600" height="285" dataProvider="{arr2}"> <mx:columns> <mx:DataGridColumn dataField="neName" headerText="名称"/> <mx:DataGridColumn dataField="neType" headerText="类型"/> <mx:DataGridColumn dataField="removeStatus" headerText="清除状态"/> <mx:DataGridColumn dataField="confirmStatus" headerText="确认状态"/> <mx:DataGridColumn headerText="操作"> <mx:itemRenderer> <fx:Component> <mx:HBox> <mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord2();" textDecoration="underline" color="#2066CF" fontWeight="normal"/> <mx:LinkButton toolTip="确认" label="确认" click="outerDocument.confirmAlarmInfo2()" textDecoration="underline" color="#2066CF" fontWeight="normal"/> </mx:HBox> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </s:Application>
2、
dataGrid1.scroller.verticalScrollBar.value = dataGrid1.scroller.verticalScrollBar.maximum;
dataGrid2.verticalScrollPosition = dataGrid2.maxVerticalScrollPosition;
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <s:ArrayCollection id="arrColl1" collectionChange="arrColl_collectionChange1(event);" /> <s:ArrayCollection id="arrColl2" collectionChange="arrColl_collectionChange2(event);" /> </fx:Declarations> <s:layout> <s:HorizontalLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.events.CollectionEvent; private var timer:Timer; private function init():void { timer = new Timer(500); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); } private function onTimer(evt:TimerEvent):void { var now:String = new Date().toString(); arrColl1.addItem({id:timer.currentCount, time:now}); arrColl2.addItem({id:timer.currentCount, time:now}); } private function arrColl_collectionChange1(evt:CollectionEvent):void { callLater(autoScrollDataGrid1); } private function arrColl_collectionChange2(evt:CollectionEvent):void { callLater(autoScrollDataGrid2); } private function autoScrollDataGrid1():void { if (dataGrid1) { dataGrid1.validateNow(); dataGrid1.scroller.verticalScrollBar.value = dataGrid1.scroller.verticalScrollBar.maximum; } } private function autoScrollDataGrid2():void { if (dataGrid2) { dataGrid2.validateNow(); dataGrid2.verticalScrollPosition = dataGrid2.maxVerticalScrollPosition; } } ]]> </fx:Script> <s:DataGrid id="dataGrid1" dataProvider="{arrColl1}" verticalScrollPolicy="on" width="200" requestedRowCount="15" > <s:columns> <s:ArrayList> <s:GridColumn dataField="id" width="50"/> <s:GridColumn dataField="time"/> </s:ArrayList> </s:columns> </s:DataGrid> <mx:DataGrid id="dataGrid2" dataProvider="{arrColl2}" verticalScrollPolicy="on" width="200" rowCount="8"> <mx:columns> <mx:DataGridColumn dataField="id" width="50" /> <mx:DataGridColumn dataField="time" /> </mx:columns> </mx:DataGrid> </s:Application>