DataGrid +CheckBox(全选) + 选中DataGrid行‘checkbox’选中
- Java code
<mx:DataGrid dataProvider="{treeArr}" id="dgrid" click="dgrid_click()"><mx:columns><[color=#FF0000]comps[/color]:[color=#FF0000]CheckBoxColumn [/color]id="cbCol" itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}" headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}" /><mx:DataGridColumn dataField="ccode" headerText="编号"/><mx:DataGridColumn dataField="cname" headerText="名称"/><mx:DataGridColumn dataField="fchangerate" headerText="换算率"/><mx:DataGridColumn dataField="bdefault" headerText="是否默认主计量单位"/></mx:columns></mx:DataGrid>以实现 全选 DataGrid 但是现在有难点，选中行的同时 也要 将选中的那一行 的CheckBox也为选中状态 ，
不知道如何搞~~~
[解决办法]
给你一个我重写的DataGird，包含全选
- XML code
<?xml version="1.0" encoding="utf-8"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" fontSize="12"> <mx:DataGrid dragEnabled="false" dragMoveEnabled="false" dropEnabled="false" x="0" width="100%" fontSize="12" dataProvider="{dgdate}" dataTipField="column_name" showDataTips="true" fontWeight="normal" bottom="25" top="0"> <mx:columns> <mx:DataGridColumn draggable="true" headerText="列名" fontSize="12" dataField="column_name" itemRenderer="Component.CustomDBView.mycheckbox" sortable="true"/> <mx:DataGridColumn headerText="类型" fontSize="12" dataField="DATA_TYPE" visible="false"/> </mx:columns> </mx:DataGrid> <mx:Script> <![CDATA[ import Model.Bll.AllSelectEvent; import mx.collections.ArrayCollection; [Bindable] public var dgdate:ArrayCollection=new ArrayCollection();//用于dg的数据源 public var dgid:String; public function AllSelect():void { if(allcheckbox.selected==true) { for(var i:int=0;i<dgdate.source.length;i++) { if(dgdate[i].selstate=="0") dgdate[i].selstate="1"; } } else { for(var j:int=0;j<dgdate.source.length;j++) { if(dgdate[j].selstate=="1") dgdate[j].selstate="0"; } } dgdate.refresh(); this.parentApplication.dispatchEvent(new AllSelectEvent(dgdate)); } ]]> </mx:Script> <mx:CheckBox id="allcheckbox" label="全选" bottom="0" change="AllSelect()" left="0"/></mx:Canvas>
[解决办法]
说白了，其实你的checkbox的状态（是否选中）是根据DataGird中checkbox列的数据而决定的，
- XML code
<?xml version="1.0" encoding="utf-8"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="145" height="24" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:CheckBox label="{data.column_name}" left="0" top="0" id="jcheck" change="addCart()" click="checkclick()" selected="{data.selstate== 1?true :false}"/> <mx:Script> <![CDATA[ import mx.core.Application; import Model.Bll.cartEvent; internal function addCart():void { this.parent.parent.parent.parent.parent.parent.parent.parent.parent.dispatchEvent(new cartEvent(data,jcheck.selected)); // this.parentApplication.dispatchEvent(new cartEvent(data,jcheck.selected)); } internal function checkclick():void { if(data.selstate==1) { data.selstate=0; } else if(data.selstate==0) { data.selstate=1; } } ]]> </mx:Script></mx:Canvas>
[解决办法]
有种简单的方式就是你选中某行，触发事件，将选中行的checkbox该列进行改变值，改为true,则为选中状态
[解决办法]
- HTML code
<?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> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; [Bindable] public var selected:Boolean = false; public var selectedAC = new ArrayCollection(); [Bindable] public var dataAC = new ArrayCollection([ {dataField1:1}, {dataField1:2} ]); protected function button1_clickHandler(event:MouseEvent):void { for(var i:int =0;i<selectedAC.length;i++){ for(var j:int =0;j<dataAC.length;j++){ if(selectedAC[i]==dataAC[j]){ dataAC.removeAllElements(); dataAC.removeItemAt(j); //dataAC.removeElementAt(j); dataAC.refresh(); break; } } } } protected function button2_clickHandler(event:MouseEvent):void { if(this.selected){ btn2.label = "全选"; this.selected = false; selectedAC.removeAll(); }else{ btn2.label = "取消"; this.selected = true; selectedAC.removeAll(); selectedAC.addAll(this.dataAC); } } ]]> </fx:Script> <s:DataGrid id="dg" x="177" y="136" requestedRowCount="4" dataProvider="{dataAC}" selectionMode="multipleRows"> <s:columns> <s:ArrayList> <s:GridColumn dataField="xx" > <s:itemRenderer > <fx:Component> <s:GridItemRenderer > <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.FlexEvent; import spark.components.DataGrid; protected function checkbox_changeHandler1(event:Event):void { //checkBox.selected = false; } override public function set data(value:Object):void { super.data = value; checkBox.selected= false; if(this.parentApplication.selected){ checkBox.selected= true; } } protected function checkbox_changeHandler2(event:Event):void { var checkBox:CheckBox = CheckBox(event.target); var selectedAC :ArrayCollection= ArrayCollection(this.parentApplication.selectedAC) if(checkBox.selected){ selectedAC.addItem(data); var dataGrid:DataGrid = DataGrid (this.parentApplication.dg); for(var i:int =0;i<selectedAC.length;i++){ for(var j:int=0;j<dataGrid.dataProvider.length;j++){ if(dataGrid.dataProvider.getItemAt(j)==selectedAC.getItemAt(i)){ dataGrid.addSelectedIndex(j); } } } }else{ for(var i:int=0;i<selectedAC.length;i++){ if(data==selectedAC.getItemAt(i)){ var dataGrid:DataGrid =DataGrid (this.parentApplication.dg); dataGrid.removeSelectedIndex(rowIndex); selectedAC.removeItemAt(i); break; } } } } ]]> </fx:Script> <s:HGroup> <s:Label width="10"/> <s:CheckBox id="checkBox" selected="{this.parentApplication.selected}" click="checkbox_changeHandler2(event)"/> <s:Label width="10"/> </s:HGroup> </s:GridItemRenderer> </fx:Component> </s:itemRenderer> <s:headerRenderer> <fx:Component> <s:GridItemRenderer > <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; override public function set data(value:Object):void { super.data = value; this.parentApplication.selected = false; //checkBox.selected= false; } protected function data_changeHandler(event:Event){ selectedAll.selected = false; } protected function selectedAll_clickHandler():void { var selectedAC :ArrayCollection= ArrayCollection(this.parentApplication.selectedAC) if(this.parentApplication.selected){ this.parentApplication.selected = false; selectedAC.removeAll(); }else{ this.parentApplication.selected = true; selectedAC.removeAll(); selectedAC.addAll(this.parentApplication.dataAC); } } ]]> </fx:Script> <s:HGroup> <s:Label paddingTop="5" text="全选 "/> <s:CheckBox id="selectedAll" click="selectedAll_clickHandler()"/> <s:Label width="10"/> </s:HGroup> </s:GridItemRenderer> </fx:Component> </s:headerRenderer> </s:GridColumn> <s:GridColumn dataField="dataField1" headerText="列 1"></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:DataGrid> <s:Button x="232" y="308" label="删除" click="button1_clickHandler(event)"/> <s:Button x="242" y="364" id="btn2" label="全选" click="button2_clickHandler(event)"/> </s:Application>