flex 使用AdvancedDataGrid进行表头列合并，设置每列背景颜色（1）

最新推荐文章于 2022-03-14 14:35:58 发布

cindyhbbl

最新推荐文章于 2022-03-14 14:35:58 发布

阅读量2.2k

点赞数

分类专栏： flex

本文链接：https://blog.youkuaiyun.com/cindyhbbl/article/details/19172363

版权

flex 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Flex的AdvancedDataGrid组件中实现表头列的合并以及设置每列的背景颜色。针对SDK 4.0和3.5的不同，提供了具体的实现方式，包括在sortExpertMode为true时不显示排序按钮的设置，以及不同版本下改变表头文字颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AdvancedDataGrid可以进行表头列合并，但是sdk4.0和3.5设置表头样式时存在差别。主要使用属性为AdvancedDataGridColumnGroup和groupedColumns

（一）表格代码为：sortExpertMode为true时，不显示排序按钮

<mx:AdvancedDataGrid height="100%" fontSize="12"  designViewDataType="flat" sortExpertMode="true"
						 sortableColumns="false" dataProvider="{gridData}" width="100%"
						 styleName="myDataGrid"  horizontalGridLines="true">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn headerText="列1" dataField="indexName" id="nameCol" textAlign="left"/>
			<mx:AdvancedDataGridColumn headerText="列2" dataField="indexName1" id="nameCol1" textAlign="left"/>
			<mx:AdvancedDataGridColumnGroup headerText="列3" id="lastCol">
				<mx:AdvancedDataGridColumn headerText="列3.1" dataField="lastValue" />
				<mx:AdvancedDataGridColumn headerText="列3.2" dataField="lastValueTong"/>
			</mx:AdvancedDataGridColumnGroup>
			
			<mx:AdvancedDataGridColumnGroup headerText="列4" id="utilLastCol">
				<mx:AdvancedDataGridColumn headerText="列4.1" dataField="utilLastValue"/>
				<mx:AdvancedDataGridColumn headerText="列4.2" dataField="utilLastTong"/>
			</mx:AdvancedDataGridColumnGroup> 
			
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>

（二）表格样式：

/* DataGrid表格样式 */
		.myDataGrid
		{
			font-size:12;
			/*selection-color:#6CABE7;*//*鼠标选择行后背景颜色*/
			/*roll-over-color:#BED9ED;*//*鼠标移到行显示的背景颜色*/
			header-colors:#4BACC6,#4BACC6;/*表格表头背景颜色*/
			grid-lines-style-name:"gridLine";
			color:#ffffff;
			text-align:right;
		}
		/*横线颜色*/
		.gridLine
		{
			horizontal-grid-line-color:#ffffff;
		}

1、sdk4.0时要改变表头文字颜色，需要使用渲染器，样式要定义在应用程序或者模块中

mx|AdvancedDataGridHeaderRenderer
		{
			color: #FFFFFF;
			fontWeight: bold;
		}

2、sdk3.5时要改变表头文字颜色，只需定义样式

/* DataGrid表头样式 */
		.myHeaderStyle
		{
			font-size:12;
			color:#FFFFFF;
			font-weight:bold;
			text-align:center;
		}