flex 4 s:datagird下的checkbox实现全选

最新推荐文章于 2019-07-18 02:17:00 发布

原创最新推荐文章于 2019-07-18 02:17:00 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #s:DataGrid

flex 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Flex DataGrid中实现Checkbox全选功能的方法，仅需定义HeadRenderer和ItemRenderer，能与grid的selectedItems特性良好结合，提供了一个实用的示例代码。

网上也有不少datagrid下的chexkbox全选功能的实现，但多数都要创建额外的自定义类，经过摸索此DEMO中只需定义HeadRenderer和ItemRenderer即可，而且可以很好的与grid本身的selectedItems相结合，通用性较高，代码如下：

CheckBoxHeaderRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		
		<![CDATA[
			import mx.collections.IList;
			import mx.controls.Alert;
			
			import spark.skins.spark.DefaultGridHeaderRenderer;
			protected function chkAllChangeHandler():void
			{
				if(!chkAll.selected){
					grid.selectedIndex=-1;
				}else{
					var n:int = grid.dataProvider.length;
					var arr:Array = [];
					for (var i:int = i; i < n; i++)
						arr.push(i);
					grid.selectedIndices = Vector.<int>(arr);
				}
			}
			override public function prepare(hasBeenRecycled:Boolean):void
			{
				var items:Vector.<Object> = grid.selectedItems;
				var numItems:int = items ? items.length : 0;
				chkAll.selected = grid.dataProvider.length == numItems;
				grid.addEventListener("selectionChange", selectionChangeHandler);
				grid.addEventListener("valueCommit", selectionChangeHandler);
			}
			
			override public function discard(willBeRecycled:Boolean):void
			{
				grid.removeEventListener("selectionChange", selectionChangeHandler);											
				grid.removeEventListener("valueCommit", selectionChangeHandler);											
			}
			private function selectionChangeHandler(event:Event):void
			{
				var items:Vector.<Object> = grid.selectedItems;
				var numItems:int = items ? items.length : 0;
				chkAll.selected = grid.dataProvider.length == numItems;
			}
		]]>
	</fx:Script>
	<s:CheckBox id="chkAll" horizontalCenter="0"
				verticalCenter="0" change="chkAllChangeHandler()"/>
</s:GridItemRenderer>

CheckBoxItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true" xmlns:local="*">
	
	<fx:Script>
		<![CDATA[
			private var bool:Boolean=false;
			override public function prepare(hasBeenRecycled:Boolean):void
			{
				chk.selected = grid.selectionContainsIndex(rowIndex);
			}
			
			protected function chkMouseUpHandler(event:MouseEvent):void
			{
				if(bool){
					grid.addSelectedIndex(rowIndex);
				}else{
					grid.removeSelectedIndex(rowIndex);
				}
			}
			
			protected function chkMouseDownHandler(event:MouseEvent):void
			{
				bool=!chk.selected;
				event.stopImmediatePropagation();
			}
			
		]]>
	</fx:Script>
	<s:CheckBox id="chk" horizontalCenter="0" verticalCenter="0" mouseUp="chkMouseUpHandler(event)" mouseDown="chkMouseDownHandler(event)"/>
</s:GridItemRenderer>

test

<?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:DataGrid x="0" y="0" width="100%" height="100%" requestedRowCount="4" selectionMode="multipleRows">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn width="30" dataField="dataField1"
							  headerRenderer="CheckBoxHeaderRenderer"
							  itemRenderer="CheckBoxItemRenderer" resizable="false" sortable="false"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="列 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="列 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="示例数据" dataField2="示例数据" dataField3="示例数据"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="数据1" dataField2="数据1" dataField3="数据1"></fx:Object>
			<fx:Object dataField1="数据2" dataField2="数据2" dataField3="数据2"></fx:Object>
			<fx:Object dataField1="数据3" dataField2="数据3" dataField3="数据3"></fx:Object>
			<fx:Object dataField1="数据4" dataField2="数据4" dataField3="数据4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
</s:Application>