网上也有不少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>