`
luhantu
  • 浏览: 203464 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

datagrid 显示全部表头文字(DataGrid show header fullly)

    博客分类:
  • Flex
阅读更多

在项目有可能赋值给datagrid后,发现表头不能够全部显示出来,特别是column比较多的时候,但是又不能初始值就设置好每个column的宽度,怎么办呢?

1.首先拿到每个headerItem的style(字体,颜色,大小等),然后依据这些东西算出标题的宽度。

2.把给个宽度加起来,跟datagrid的宽度相比,如果大于datagrid的宽度,那么就把它赋给datagrid的宽度。

3.遍历每一列,给每一列(AdvancedDataGridColumn)的宽度赋值headerItem的宽度。

4.大功告成!

 

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ICollectionView;
			import mx.controls.Label;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
			import mx.controls.advancedDataGridClasses.SortInfo;
			import mx.core.FlexGlobals;
			import mx.core.UITextField;
			import mx.core.UITextFormat;
			import mx.core.mx_internal;
			
			[Bindable]
			private var dpFlatOne:ArrayCollection = new ArrayCollection([
				{Region:"Southwest1", Territory:"Arizona1",Territory_Rep:"BTerritory_Rep1", Actual:3, Estimate:40000}, 
				{Region:"Southwest2", Territory:"Arizona2",Territory_Rep:"Territory_Rep2", Actual:29885, Estimate:30000},  
				{Region:"Southwest3", Territory:"Central3",Territory_Rep:"Territory_Rep3", Actual:29134, Estimate:30000},  
				{Region:"Southwest4", Territory:"Nevada4",Territory_Rep:"Territory_Rep4", Actual:1, Estimate:45000},  
				{Region:"Southwest5", Territory:"Northern5",Territory_Rep:"Territory_Rep5", Actual:38805, Estimate:40000}, 
				{Region:"Southwest6", Territory:"Northern6",Territory_Rep:"Territory_Rep6", Actual:55498, Estimate:40000},  
				{Region:"Southwest7", Territory:"Southern7",Territory_Rep:"Territory_Rep7", Actual:44985, Estimate:45000}, 
				{Region:"Southwest8", Territory:"Southern8",Territory_Rep:"Territory_Rep8", Actual:1, Estimate:45000}
			]);
			
			protected function AdjustColumnclickHandler(event:MouseEvent):void
			{
				 var maxDataGridLength:Number = 0;
				 for each(var item:Array in firstDatagrid.headerItems)
				{
					for(var i:int = 0;i < item.length ; i++)
					{
						var test1:UITextField = item[i].mx_internal::getLabel();
						var text:String = (firstDatagrid.columns[i] as AdvancedDataGridColumn).headerText; 
						var test:Number = measureTextWidth(text,test1.getStyle("fontSize") as Number,test1.getStyle("fontFamily") as String);
						maxDataGridLength += (test  + 20);
					}
				}
				
				 if (!isNaN(firstDatagrid.width) && maxDataGridLength > firstDatagrid.width)
				{
					firstDatagrid.width = Math.round(maxDataGridLength);
				}
				callLater(resizeColumnWidth);
			}
			
			private function resizeColumnWidth():void
			{
				for each(var item:Array in firstDatagrid.headerItems)
				{
					for(var i:int = 0;i < item.length ; i++)
					{
						var test1:UITextField = item[i].mx_internal::getLabel();
						var text:String = (firstDatagrid.columns[i] as AdvancedDataGridColumn).headerText; 
						var test:Number = measureTextWidth(text,test1.getStyle("fontSize") as Number,test1.getStyle("fontFamily") as String);
						(firstDatagrid.columns[i] as AdvancedDataGridColumn).width = test  + 20;
					}
				}
				firstDatagrid.validateNow();
			}
			
			public static function measureTextWidth( text:String ,fontSize:Number,fontFamily:String):Number 
			{
				var uiTextFormat:UITextFormat = new  UITextFormat(FlexGlobals.topLevelApplication.systemManager);
				uiTextFormat.antiAliasType="advanced"; //这两个参数不设置会抛错
				uiTextFormat.gridFitType="pixel";
				// 不设置字体会计算的不对
				uiTextFormat.font=fontFamily;//默认字体	
				uiTextFormat.size= fontSize;  //可以设置字体大小
				return uiTextFormat.measureText(text).width;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:AdvancedDataGrid id="firstDatagrid"
						 sortableColumns="true"
						 sortExpertMode="true"
						 width="600" height="100%" 
						 dataProvider="{dpFlatOne}">        
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region" itemRenderer="mx.controls.Label"/>
			<mx:AdvancedDataGridColumn dataField="Territory"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
									   showDataTips="true"
									   headerText="Territory_Rep" itemRenderer="mx.controls.Label"/>
			<mx:AdvancedDataGridColumn dataField="Actual" headerText="asdfadsfasdfasafsdf" dataTipField="Actual" showDataTips="true"/>
			<mx:AdvancedDataGridColumn dataField="Estimate" headerText="asdddddddddddddddddddddddf"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<s:Button label="Adjust the column width" click="AdjustColumnclickHandler(event)"/>
</s:Group>
分享到:
评论

相关推荐

    DataGrid固定表头

    在大数据量的情况下,用户需要滚动查看数据,但保持表头固定以便于理解每一列的数据含义,这就需要用到"DataGrid固定表头"的功能。这种功能在前端开发中尤其重要,因为它提供了更好的用户体验,使得用户在滚动浏览长...

    datagrid 多表头及动态生成的实现

    ### datagrid多表头及动态生成的实现 #### 前言 在现代Web开发中,数据展示是非常重要的一环。对于复杂的数据表格而言,如何有效地组织和展示这些数据成为了一个挑战。本篇文章将详细介绍如何使用JQuery EasyUI...

    DataGrid 复杂表头

    本主题将深入探讨如何在WPF中创建和自定义DataGrid的复杂表头,以显示多层次的表头信息。 ### 1. 数据网格概述 WPF的DataGrid控件源自Silverlight,并在.NET Framework 4.0中被引入。它提供了丰富的功能,如排序、...

    DataGrid 实现复杂表头和合并行源码与示例

    一、不需要编写任何样式、只需通过代码添加将 ColumnItem 集合添加到DataGrid列集合,需要引用空间 using System.Windows.Controls ,才能添加扩展函数。 二、支持实现复杂的表头、不限分级层次; 三、复杂表头支持...

    DataGrid表头合并和单元格内容合并-升级版

    这个“DataGrid表头合并和单元格内容合并-升级版”主题主要聚焦于如何在DataGrid中实现复杂的表头和单元格合并功能,以适应多层结构的数据展示需求。 首先,我们要理解在DataGrid中进行表头合并的意义。通常,当...

    wpf DataGrid复合表头

    在WPF(Windows Presentation Foundation)开发中,DataGrid控件是一种常用的数据展示工具,它允许用户以表格形式显示和操作数据。在某些情况下,我们可能需要创建复合表头,即表头包含多个层次,以便更好地组织和...

    修改DataGrid表头样式

    DataGrid由多个部分组成,其中表头(Header)是显示列标题的部分。表头样式包括字体、颜色、背景色、对齐方式、边框等属性。在WPF中,我们可以利用XAML语言来直接定义这些样式;而在Windows Forms中,则通常通过代码...

    Easyui-DataGrid表头拖动效果

    UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;... Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865

    wpf 动态合并datagrid表头单元格

    然而,在某些情况下,我们可能需要动态地合并Datagrid的表头单元格,以达到更清晰、更具有组织性的数据展示效果。这通常发生在数据有层次结构或需要对某一列进行分类时。本篇将详细讲解如何在WPF中实现这个功能。 ...

    flex DataGrid 表头分组

    当数据源是支持分组的ArrayCollection或HierarchicalData时,DataGrid会自动识别并显示分组。 3. **配置`AdvancedDataGrid`组件**:Flex中的`AdvancedDataGrid`相对于基础的`DataGrid`提供了更丰富的功能,包括表头...

    C# DataGrid表头合并和单元格内容合并

    C#中,我们可以利用DataGridColumn.Header属性来设置列的标题,并通过设置HeaderStyle中的GridColumnHeaderStyle.HasSharedHeader属性来指定是否与其他列共享表头。此外,我们还需要调整列的DisplayIndex属性,确保...

    dataGrid复合表头

    复合表头(也称为多级表头)是`dataGrid`的一个高级特性,它允许用户以层次结构的方式组织列标题,提供更清晰、更直观的数据视图。以下将详细讲解`dataGrid`复合表头的实现方法和相关知识。 首先,理解复合表头的...

    WPF多表头技术的实现,支持多行表头

    在Windows Presentation Foundation(WPF)中,多表头(MultiHeader)是一种常见需求,它能够帮助用户更好地组织和展示复杂的数据。WPF多表头技术的实现主要涉及到DataGrid控件的自定义,以实现多级分类和多行表头的...

    wpf datagrid排序列表头文字右边的升降箭头

    在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,常用于显示和操作表格数据。本教程将深入讲解如何实现`DataGrid`的列头排序功能,即点击列表头文字右边的升降箭头进行升序或降序排序。...

    .net datagrid表头合并

    为了让DataGrid根据TreeView的结构显示多级表头,我们需要在数据绑定之前处理表头的层次结构。这通常涉及到调整DataGrid的列结构,根据数据模型的层次关系设置列的`DisplayIndex`和`Header`。对于复杂的情况,可能还...

    Siverlight DataGrid动态表头

    在本项目"Silverlight DataGrid动态表头"中,我们关注的是如何实现DataGrid的表头可以根据需求动态变化,提供更灵活的用户界面。 1. **Silverlight DataGrid**:Silverlight DataGrid控件允许开发者以网格形式展示...

    给DataGrid自定义Header功能

    标题“给DataGrid自定义Header功能”和描述“给DataGrid添加自定义的headerRenderer,实现在Header上自己添加想要的界面功能”正是关于这个主题的说明。下面将详细介绍如何实现DataGrid的自定义Header。 首先,理解...

    固定表头的DataGrid

    在IT领域,尤其是在Web开发中,DataGrid是一种常见的数据展示组件,它允许用户以表格的形式显示大量结构化数据。在处理大数据集时,为了提供更好的用户体验,常常需要实现固定表头的功能,使得用户在滚动浏览内容时...

    鼠标移动DataGrid显示详细信息

    根据提供的标题、描述、标签及部分内容,我们可以了解到这篇文章主要讲述的是如何实现在鼠标移动到 DataGrid 的某一行时,显示出该行的详细信息。DataGrid 是一种常用的 Web 控件,用于展示表格形式的数据。下面我们...

    silverlight DataGrid 复杂表头的实现

    DataGrid由行(Rows)和列(Columns)组成,每列有一个Header来显示列名或信息。在标准的使用中,表头通常是单行的,每个列头对应一列数据。但在复杂的统计场景下,我们可能需要多级表头,比如分组、汇总或交叉表。 ...

Global site tag (gtag.js) - Google Analytics