Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能
发布时间:2020-12-15 01:24:43 所属栏目:百科 来源:网络整理
导读:在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感觉还行 附上代码,同时希望大家举一反三 能实现添加其他组件到DataGrid列中 贴出
在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感觉还行 附上代码,同时希望大家举一反三 能实现添加其他组件到DataGrid列中 贴出自己改造过的: CheckBoxHeaderRenderer.as package { import flash.events.Event; import flash.events.MouseEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.CheckBox; import mx.controls.DataGrid; import mx.events.DataGridEvent; public class CheckBoxHeaderRenderer extends CheckBox { private var sele:String; public function CheckBoxHeaderRenderer() { super(); this.addEventListener(Event.CHANGE,clickHandlers); } override public function set data(value:Object):void { DataGrid(listData.owner).addEventListener (DataGridEvent.HEADER_RELEASE,sortEventHandler); this.selected=this.sele=="true"?true:false; } private function sortEventHandler(event:DataGridEvent):void { if (event.itemRenderer == this) event.preventDefault(); } protected function clickHandlers(event:Event):void { sele=(event.currentTarget.selected).toString(); var a:ArrayCollection=DataGrid(listData.owner).dataProvider as ArrayCollection; for(var i:int=0;i<a.length;i++){ (DataGrid(listData.owner).dataProvider as ArrayCollection) .getItemAt(i).selected=(event.currentTarget.selected).toString(); } (DataGrid(listData.owner).dataProvider as ArrayCollection).refresh(); } } } CheckBoxItemDataRenderer.as package { import flash.events.Event; import mx.collections.ArrayCollection; import mx.controls.CheckBox; import mx.controls.DataGrid; public class CheckBoxItemDataRenderer extends CheckBox { private var currentData:Object; //保存当前一行值的对象 public function CheckBoxItemDataRenderer() { super(); this.addEventListener(Event.CHANGE,changeHandler); } override public function set data(value:Object):void { this.currentData= value; this.selected = value.selected == "true"?true:false; } protected function changeHandler(event : Event) : void { currentData.selected = this.selected.toString(); } /*override public function get data():Object{ return currentData; }*/ } }DataGrid_Checkbox.mxml <?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" xmlns:dataGrid="*" minWidth="955" minHeight="600" creationComplete="getaa()"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; [Bindable] private var data_myDataGrid:ArrayCollection=new ArrayCollection(); private function headerClickHandler(event : Event) : void { /* for each(var obj: Object in data_myDataGrid) { obj.selected = String(event.currentTarget.selected); } data_myDataGrid.refresh(); */ } private function getaa():void{ var obj:Object=new Object(); obj.labe="1"; obj.data="a"; obj.selected="false"; var obj2:Object=new Object(); obj2.labe="2"; obj2.data="b"; obj2.selected="false"; var obj3:Object=new Object(); obj3.labe="3"; obj3.data="c"; obj3.selected="false"; var obj4:Object=new Object(); obj4.labe="4"; obj4.data="a"; obj4.selected="false"; var obj5:Object=new Object(); obj5.labe="5"; obj5.data="b"; obj5.selected="false"; var obj6:Object=new Object(); obj6.labe="6"; obj6.data="c"; obj6.selected="false"; var obj7:Object=new Object(); obj7.labe="7"; obj7.data="a"; obj7.selected="false"; var obj8:Object=new Object(); obj8.labe="8"; obj8.data="b"; obj8.selected="false"; var obj9:Object=new Object(); obj9.labe="9"; obj9.data="c"; obj9.selected="false"; data_myDataGrid.addItem(obj); data_myDataGrid.addItem(obj3); data_myDataGrid.addItem(obj2); data_myDataGrid.addItem(obj4); data_myDataGrid.addItem(obj5); data_myDataGrid.addItem(obj6); data_myDataGrid.addItem(obj7); data_myDataGrid.addItem(obj8); data_myDataGrid.addItem(obj9); } protected function button1_clickHandler(event:MouseEvent):void { for(var i:int=0;i<data_myDataGrid.length;i++){ if(data_myDataGrid.getItemAt(i).selected=='true'){ Alert.show(data_myDataGrid.getItemAt(i).labe); } } } ]]> </fx:Script> <mx:DataGrid dataProvider="{data_myDataGrid}" x="10" y="10"> <mx:columns> <mx:DataGridColumn dataField="labe" headerText="Label" /> <mx:DataGridColumn dataField="data" headerText="Data" /> <mx:DataGridColumn dataField="selected" headerText="Select" itemRenderer="CheckBoxItemDataRenderer" headerRenderer="CheckBoxHeaderRenderer" /> </mx:columns> </mx:DataGrid> <mx:Button click="button1_clickHandler(event)"/> </s:Application> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- reactjs – Redux:孩子在父母之前接受道具
- react-native – 仅在某些视图中使用现有iOS应用中的React
- openwrt查看flash、RAM、CPU信息
- c# – 从T4模板中的CodeProperty中检索属性类型
- postgresql – Postgres:如何获取枚举集中的下一项?
- reactjs – 在测试React组件时,Jest AutoMocking是否有效?
- 获取字符串中含有的数字
- 遍历文件夹下所有文件,输出文件名
- ruby-on-rails – 什么是Ruby on Rails的扩展名.html.arb?
- 如何在PostgreSQL中使用SELECT DISTINCT和RANDOM()函数?