datagrid 合并单元格

最新推荐文章于 2025-04-23 14:22:19 发布

最新推荐文章于 2025-04-23 14:22:19 发布 · 245 阅读

文章标签：

#Flex #Google #HTML

Flex 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Flex框架中使用AdvancedDataGrid组件实现带有合并单元格功能的数据表格的方法。作者通过修改开源组件AdvancedDataGrid，实现了类似Excel中合并单元格的功能，并详细展示了配置示例。

flex 中的grid没有合并单元格的问题。google以后找到一个开源组件接近我的要求。

http://code.google.com/p/advanceddatagrid/

参考文章：http://www.flextheworld.com/2009/12/flex-advanceddatagrid-rowspan.html

但我需要的是类似Excle中的合并单元格

故修改上述的版本。1：日期字段不能合并

2：后面的列合并单元格需依赖前一列

增加的一个标志值yfbl,需要和并单元格的列设置yfbl=true即可以

<AdvancedDataGrid:AdvancedDataGrid  alternatingItemColors="[0xEEEEEE,0xFFFFFF]"
				width="100%" height="100%" selectionMode="singleCell" editable="true"  wordWrap="true" variableRowHeight="true"
				dataProvider="{dgds}" id="mydg" horizontalScrollPolicy="on" verticalScrollPolicy="on">
		<AdvancedDataGrid:groupedColumns>
			<mx:AdvancedDataGridColumnGroup headerText="出货单基本信息">
			<SubClasses:AdvancedDataGridColumn headerText="日期" dataField="jhrq" labelFunction="labelFunction" editable="false" width="80"/>
			<SubClasses:AdvancedDataGridColumn headerText="电编" dataField="db" width="80"/>
			<SubClasses:AdvancedDataGridColumn headerText="品名" dataField="bm" width="80" />
			<SubClasses:AdvancedDataGridColumn headerText="出货量" dataField="chl" width="70"/>
			<SubClasses:AdvancedDataGridColumn headerText="售价未" dataField="dj" width="70"/>
			<SubClasses:AdvancedDataGridColumn headerText="总价未" dataField="zj" width="70"/>
			<SubClasses:AdvancedDataGridColumn headerText="客户名称" dataField="khmc"/>
			<SubClasses:AdvancedDataGridColumn headerText="出货单号" dataField="chdh"/>
			</mx:AdvancedDataGridColumnGroup>
			<mx:AdvancedDataGridColumnGroup headerText="发票相关信息">
				<SubClasses:AdvancedDataGridColumn headerText="开票日期" dataField="kprq" yfbl="true" labelFunction="labelFunction"  editable="false" width="90"/>
			<SubClasses:AdvancedDataGridColumn headerText="发票号码" dataField="fphm" yfbl="true"/>
				<SubClasses:AdvancedDataGridColumn headerText="发票金额" dataField="total" yfbl="true"/>
			</mx:AdvancedDataGridColumnGroup>
		</AdvancedDataGrid:groupedColumns>
	</AdvancedDataGrid:AdvancedDataGrid>

截取一张图片效果显示如下