Flex中动态生成表头
发布时间:2020-12-15 04:02:31 所属栏目:百科 来源:网络整理
导读:1、设计思路 (1)使用组件新建一个DataGrid; (2)将表头生成函数放在GridData中,利用另一个组件引用它; (3)在DGridHeader中引用 GridData组件,并在自身中声明几个表头的数据源; (4)在新建应用程序中,引用 DGridHeader 2、设计源码 (1)GridData
1、设计思路 (1)使用组件新建一个DataGrid; (2)将表头生成函数放在GridData中,利用另一个组件引用它; (3)在DGridHeader中引用GridData组件,并在自身中声明几个表头的数据源; (4)在新建应用程序中,引用DGridHeader 2、设计源码 (1)GridData.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="initCompleteHandler(event)"> <mx:Style> .headStyle{ font-size:14; font-weight:bold; } </mx:Style> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.dataGridClasses.DataGridColumn; import mx.events.FlexEvent; //表格表头数据绑定 private var _headerArray:ArrayCollection; //表头名称 private var _headerName:String; /*初始化函数*/ protected function initCompleteHandler(event:FlexEvent):void { generateDataGridHead(_headerArray); } /*生成表格表头函数*/ private function generateDataGridHead(header:ArrayCollection):void { if(header != null && header.length >0) { var column:Array = dataGrid.columns; column.length = 0; var dataGridColumn:DataGridColumn; for each(var obj:Object in header) { dataGridColumn = new DataGridColumn(); dataGridColumn.headerText = obj.headDesc; dataGridColumn.dataField = obj.headCode; dataGridColumn.width = 55; column.push(dataGridColumn); } dataGrid.columns = column; if(column.length > 8) { dataGrid.width = column.length*55; dataGrid.height = column.length*60; }else{ dataGrid.width = 1290; dataGrid.height = 510; } } } /*get方法*/ public function get headerArray():ArrayCollection { return _headerArray; } /*set方法*/ public function set headerArray(value:ArrayCollection):void { _headerArray = value; } /*get方法*/ public function get headerName():String { return _headerName; } /*set方法*/ public function set headerName(value:String):void { _headerName = value; } ]]> </mx:Script> <mx:VBox width="100%" height="100%"> <mx:DataGrid id="dataGrid" width="100%" height="100%" headerStyleName="headStyle" headerColors="[0xD9D9D9,0xD9D9D9]" paddingBottom="10" paddingLeft="20" paddingRight="10" paddingTop="10"> </mx:DataGrid> </mx:VBox> </mx:Canvas>(2)DGridHeader.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:grid="grid.*"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] //教师表格表头数据绑定 private var teacherArray:ArrayCollection = new ArrayCollection([ {headDesc:"教师姓名",headCode:"teacherName"},{headDesc:"教师性别",headCode:"teacherSex"},{headDesc:"教师年龄",headCode:"teacherAge"},{headDesc:"教师工号",headCode:"teacherNumber"},{headDesc:"教师住址",headCode:"teacherAddress"} ]); [Bindable] //学生表格表头数据绑定 private var studentArray:ArrayCollection = new ArrayCollection([ {headDesc:"学生姓名",headCode:"studentName"},{headDesc:"学生性别",headCode:"studentSex"},{headDesc:"学生年龄",headCode:"studentAge"},{headDesc:"学生学号",headCode:"studentNumber"},{headDesc:"学生住址",headCode:"studentAddress"} ]); [Bindable] //课程表格表头数据绑定 private var classArray:ArrayCollection = new ArrayCollection([ {headDesc:"课程名称",headCode:"className"},{headDesc:"教授教师",headCode:"teachTeacher"},{headDesc:"上课人数",headCode:"number"} ]); ]]> </mx:Script> <mx:TabNavigator width="100%" height="100%" fontSize="14"> <mx:Canvas label="教师" width="100%" height="100%"> <grid:GridData headerArray="{teacherArray}" textAlign="center" width="100%" height="100%" headerName="教师"/> </mx:Canvas> <mx:Canvas label="学生" width="100%" height="100%"> <grid:GridData headerArray="{studentArray}" textAlign="center" width="100%" height="100%" headerName="学生"/> </mx:Canvas> <mx:Canvas label="课程" width="100%" height="100%"> <grid:GridData headerArray="{classArray}" textAlign="center" width="100%" height="100%" headerName="课程"/> </mx:Canvas> </mx:TabNavigator> </mx:Canvas>(3)DynamicGrid.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:data="data.*"> <mx:VBox width="100%" height="100%"> <data:DGridHeader width="100%" height="100%"/> </mx:VBox> </mx:Application>3、设计结果 (1)教师 (2)学生 (3)课程
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |