mx.controls.DataGrid组件SelectedIndex异常

场景:
     1.动态的在ArrayCollection增加5个元素,由于绑定DataGrid会增加5行
     2.选中除了最后一行的任何行,删除该行后,DataGrid的selectedIndex会出现异常(选中最后一行删除,没有异常):
       比如选中第2行删除后,给它的selectedIndex赋值为第二行,但是它不会选中第二行,
       而是第三行
     3.经过测试应该是mx.controls.DataGrid自己bug,相同的代码使用spark.components.DataGrid都正常

示例代码:

     

<?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" creationComplete="init()"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.runqianapp.complex.view.show.*">
	<fx:Declarations>
		<s:RadioButtonGroup id="viewRadionGroup" change="viewRadionGroup_changeHandler(event)">
			
		</s:RadioButtonGroup>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.runqianapp.complex.view.logic.ComplexGuideAS;
			import com.runqianapp.complex.view.show.ComplexGuide;
			import com.runqianapp.ngr.event.ComplexGuideEvent;
			import com.runqianapp.ngr.event.ComplexGuideEventDispatcher;
			
			import controller.ConstLocator;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import mx.managers.PopUpManagerChildList;
		
			[Bindable]
			public var columnDataGridArrayCollection:ArrayCollection = new ArrayCollection();
			
			/** 增加事件*/
			private function addColumnClick(event:MouseEvent):void{
				var obj:Object = new Object();
				obj.id = columnDataGridArrayCollection.length + 1;

				columnDataGridArrayCollection.addItem(obj);
				if(viewStack.selectedIndex==0){
					columnDataGridForMX.selectedIndex = columnDataGridArrayCollection.length - 1;
				}else if(viewStack.selectedIndex==1){
					columnDataGridForSpark.selectedIndex = columnDataGridArrayCollection.length - 1;
				}else{
					columnDataGridForAdvanced.selectedIndex = columnDataGridArrayCollection.length - 1;
				}
				
			}
			
			/** 删除事件*/
			private function removeColumnClick(event:MouseEvent):void{
				var index:int = 0;
				if(viewStack.selectedIndex==0){
					index = columnDataGridForMX.selectedIndex;
				}else if(viewStack.selectedIndex==1){
					index = columnDataGridForSpark.selectedIndex;
				}else{
					index = columnDataGridForAdvanced.selectedIndex;
				}
				
				if(columnDataGridArrayCollection.length>0)
					columnDataGridArrayCollection.removeItemAt(index);
				if(viewStack.selectedIndex==0){
					columnDataGridForMX.selectedIndex = index<columnDataGridArrayCollection.length?index:columnDataGridArrayCollection.length-1;
				}else if(viewStack.selectedIndex==1){
					columnDataGridForSpark.selectedIndex = index<columnDataGridArrayCollection.length?index:columnDataGridArrayCollection.length-1;
				}else{
					columnDataGridForAdvanced.selectedIndex = index<columnDataGridArrayCollection.length?index:columnDataGridArrayCollection.length-1;
				}
			}
			
			protected function viewRadionGroup_changeHandler(event:Event):void
			{
				viewStack.selectedIndex = parseInt(String(viewRadionGroup.selectedValue))
			}
			
		]]>
	</fx:Script>
	<mx:VBox width="100%" horizontalAlign="center" height="100%" verticalAlign="middle">
		<mx:HBox>
			<s:RadioButton value="0" label="MX" groupName="viewRadionGroup" selected="true"></s:RadioButton>
			<s:RadioButton value="1" label="Spark" groupName="viewRadionGroup"></s:RadioButton>
			<s:RadioButton value="2" label="Advanced" groupName="viewRadionGroup"></s:RadioButton>
		</mx:HBox>
		
		<mx:ViewStack id="viewStack">
			<mx:VBox>
				<mx:DataGrid id="columnDataGridForMX" width="200" textAlign="center" dataProvider="{columnDataGridArrayCollection}" editable="true" dragEnabled="false" sortableColumns="false">
					<mx:columns>
						<mx:DataGridColumn headerText="mx序号" dataField="id" width="40" editable="false" textAlign="center"/>
					</mx:columns>
				</mx:DataGrid>
			</mx:VBox>
			<mx:VBox>
				<s:DataGrid id="columnDataGridForSpark" width="100%" textAlign="center" dataProvider="{columnDataGridArrayCollection}" >
					<s:columns>
						<s:ArrayList>
							<s:GridColumn dataField="id" headerText="s序号"/>
						</s:ArrayList>
					</s:columns>
				</s:DataGrid>
			</mx:VBox>
			<mx:VBox>
				<mx:AdvancedDataGrid id="columnDataGridForAdvanced" width="100%" textAlign="center" dataProvider="{columnDataGridArrayCollection}" editable="true" dragEnabled="false" sortableColumns="false" headerSortSeparatorSkin="mx.skins.ProgrammaticSkin">
					<mx:columns>
						<mx:AdvancedDataGridColumn headerText="advanced序号" dataField="id" width="40" editable="false" textAlign="center"/>
					</mx:columns>
				</mx:AdvancedDataGrid>
			</mx:VBox>
		</mx:ViewStack>
		<mx:VBox width="15%" height="100%" paddingTop="17" horizontalAlign="center">
			<s:Button id="addColumn" label="增加" width="45" height="20" click="addColumnClick(event)"/>
			<s:Button id="removeColumn" label="删除" width="45" height="20" click="removeColumnClick(event)"/>
		</mx:VBox>
	</mx:VBox>
	
</s:Application>



建议:
     1.如果使用ArrayCollection作为DataGrid组件的数据源,尽量不要使用mx.controls.DataGrid
     2.改用mx.controls.AdvancedDataGrid将属性设置:headerSortSeparatorSkin="mx.skins.ProgrammaticSkin" 
       sortableColumns="false" 就可以去掉标题中的竖线和排序图标,效果和mx.controls.DataGrid没有区别,但是还是存在bug,不建议使用
     3.如果DataGrid中的列都为简单的列,不存在为列设置ItemRender的情况下,使用spark.components.DataGrid更为简便,
       不需要设置2中的那些属性;但是如果涉及到ItemRender
       就可能会导致flex报Error #1009,由于itemRenderer的类型不符(flex3和4导致),
       具体情况可参考:http://blog.csdn.net/zhengdanwei/article/details/7241622,相当来说比较复杂。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: communitytoolkit.mvvm datagrid 是一种基于MVVM模式的数据表格控件,该控件提供了多种数据绑定的方式,可以快速且简便地展示数据。同时,communitytoolkit.mvvm datagrid 还提供了多种功能,如单元格编辑、分页、排序、筛选等等。这让用户能够方便地处理大量数据。 在使用 communitytoolkit.mvvm datagrid 控件时,需要绑定数据源并提供列的定义,控件会自动将数据填充到表格中。在提供列定义时,可以对不同列的排序方式、列宽、列标题等进行自定义的设置。此外,还可以对每个单元格进行自定义的数据格式化。 与传统的数据表格控件不同的是,communitytoolkit.mvvm datagrid 控件遵循 MVVM 模式的设计,使得数据与 UI 分离,易于维护和扩展。通过将数据、业务逻辑与界面之间的关系明确分离,可以大大提高应用程序的可读性、可扩展性和可维护性。 总的来说,communitytoolkit.mvvm datagrid 是一款功能强大且易于使用的数据表格控件,通过采用 MVVM 模式,可以使数据与 UI 分离,极大地提高应用程序的可读性、可扩展性和可维护性。无论是处理大量数据、展示分页数据、自定义数据格式化等,都是 communitytoolkit.mvvm datagrid 优秀的解决方案。 ### 回答2: CommunityToolkit.Mvvm 是一个帮助开发人员实现 MVVM 模式在 UWP 和 WPF 应用程序中的工具包。这个工具包提供了丰富的控件和类库,使得我们能够更加方便地使用 MVVM 模式来构建应用程序。 其中,DataGrid 控件是 CommunityToolkit.Mvvm 中非常重要的一个控件,它允许我们以表格的形式展示数据,并且支持排序、筛选、列隐藏等基本功能。除此之外,CommunityToolkit.Mvvm 的 DataGrid 还支持分页和自定义单元格样式等高级功能,这些功能都使得我们更加容易构建强大可靠的应用程序。 在使用 CommunityToolkit.Mvvm 的 DataGrid 控件时,我们需要定义一些属性和命令,在 ViewModel 中实现数据的加载、数据的操作等逻辑处理。具体而言,我们需要定义 DataGrid 的 ItemsSource 属性,这个属性绑定到 ViewModel 中的数据集合,然后定义排序、筛选等命令,使得用户点击控件时能够实现相应的逻辑操作。 总之,CommunityToolkit.Mvvm 提供的 DataGrid 控件是一个非常实用的控件,它能够大大简化我们构建 MVVM 应用程序的过程。通过这个控件,我们能够快速轻松地展现数据,同时也能够支持高级功能,使得我们能够更加专注于应用程序的逻辑设计和开发。 ### 回答3: communitytoolkit.mvvm datagrid 是一个开源的工具包,旨在为使用 MVVM 模式的开发人员提供一个易于使用和高度可定制的数据网格。该工具包是由 Microsoft 社区开发的,可以使用 NuGet 包管理器轻松安装和集成到您的应用程序中。 该工具包使用 C# 和 XAML 构建,支持 WPF 和 UWP 平台。它提供了许多有用的功能,如排序、筛选和分页,使用户能够更轻松地浏览和操作数据。此外,它还提供了高度可定制的外观和行为选项,以便开发人员可以使其适应他们的应用程序的视觉设计和用户体验。 与传统的数据网格不同,使用 communitytoolkit.mvvm datagrid 可以使用 MVVM 模式进行数据绑定和操作,将视图逻辑与数据逻辑分离。这使得应用程序更易于维护和扩展,并提高了代码的可重用性和可测试性。此外,它还提供了一个非常灵活的 API,使用户可以轻松地自定义和扩展其功能和行为。 总的来说,communitytoolkit.mvvm datagrid 是一个非常有用的工具包,为开发人员提供了一个高度可定制的数据网格,支持 MVVM 模式,使其更易于使用和维护。如果你正在开发一个需要展示和操作数据的应用程序,那么这个工具包是值得一试的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值