AdvancedDataGrid动态表头和多表头设计方法

缺乏、安全感 2022-06-09 03:00 260阅读 0赞

这几天在学习Flex4，碰到DataGrid的一些问题，就在这说一下。

首先是使用ActionScript来自定义组件，也可以使用MXML标签来定义组件，这都一样就不多说了。

不多说了，直接上代码，里面有注释：

首先，在MXML中将表定义出来，在actionScript中使用它的id找到它并设计它。这与JSP自定义标签的用法刚好反过来。

<mx:AdvancedDataGrid 
    	id="datagrid" width="100%" height="100%" 
    	designViewDataType="flat" headerStyleName="headerCenterAlign" 
    	horizontalScrollPolicy="on">
    </mx:AdvancedDataGrid>

然后，在初始化方法里将表设计出来。

private function init():void{
    	//定义包含列的表头
    	var headArr:Array=new Array("都匀南通信工区","独山联合通信工区","都匀传输室","都匀北通信工区","都匀车间");
    				
    	//更新对象的属性和布局
    	datagrid.validateNow(); 
    				
    	//进行列分组层次机构
    	datagrid.groupedColumns=new Array();
    				
    	//定义第一列
    	var ahDeviceSort:AdvancedDataGridColumn=new AdvancedDataGridColumn();
    	ahDeviceSort.dataField="name";
    	ahDeviceSort.headerText="设备类别";
    	ahDeviceSort.width=65;
    	ahDeviceSort.headerWordWrap=true;	
    				
    	//定义第二列
    	var ahDeviceName:AdvancedDataGridColumn=new AdvancedDataGridColumn();
    	ahDeviceName.dataField="name";
    	ahDeviceName.headerText="设别或器材名称";
    	ahDeviceName.headerWordWrap=true;
    				
    	//定义第三列
    	var ahSpareName:AdvancedDataGridColumn=new AdvancedDataGridColumn();
    	ahSpareName.dataField="name";
    	ahSpareName.headerText="备用板件名称";
    	ahSpareName.headerWordWrap=true;	
    				
    	//定义第四列
    	var ahType:AdvancedDataGridColumn=new AdvancedDataGridColumn();
    	ahType.dataField="name";
    	ahType.headerText="规格型号";
    	ahType.width=65;
    	ahType.headerWordWrap=true;	
    				
    	//定义第五列
    	var ahUnit:AdvancedDataGridColumn=new AdvancedDataGridColumn();
    	ahUnit.dataField="name";
    	ahUnit.headerText="单位";
    	ahUnit.width=40;
    	ahUnit.headerWordWrap=true;
    				
    	//定义第六列，因为是包含子列的，所以设置为列组
    	var AdvHeardGroup:AdvancedDataGridColumnGroup = new AdvancedDataGridColumnGroup();
    	AdvHeardGroup.headerText="存放地点及数量";
    	//定义列组中的列
    	AdvHeardGroup.children=[];
    	var arrGroup:Array=new Array();
    	for each(var v:* in headArr){
    		//定义一个列，根据循环中数组长度二实例化出多了子列
    		var AdvHeards1:AdvancedDataGridColumn=new AdvancedDataGridColumn();
    		AdvHeards1.dataField=v;
    		AdvHeards1.headerText=v;
    		AdvHeards1.width=60;
    		AdvHeards1.headerWordWrap=true;
    		//将新建的列添加到上面定义的数组中去
    		arrGroup.push(AdvHeards1);
    	}
    	//将装满子列的数组合并到列组中去
    	AdvHeardGroup.children=AdvHeardGroup.children.concat(arrGroup);   
    				
    	//第三列，直接是一列,直接定义即可
    	var ahSubtotal:AdvancedDataGridColumn =new AdvancedDataGridColumn();
    	ahSubtotal.dataField="allMoney";
    	ahSubtotal.headerText="小计";
    	ahSubtotal.setStyle("textAlign","center");
    				
    	//散列都定义完了，现在放入指定的列表中去
    	datagrid.groupedColumns=datagrid.groupedColumns.concat(ahDeviceSort,ahDeviceName,ahSpareName,ahType,ahUnit,AdvHeardGroup,ahSubtotal);
    	datagrid.sortExpertMode=true;
    	datagrid.dragEnabled=false;
    	datagrid.validateNow();
    	}

最后，看看效果图吧。  
![1342573468_8077.jpg][]

[1342573468_8077.jpg]: https://img-my.csdn.net/uploads/201207/18/1342573468_8077.jpg