Flex grid 复杂表头
第一种 最简单的两重表头
code 如下：
<?xml version="1.0"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
private function init()
{
}
]]>
</fx:Script>
<mx:Panel title="AdvancedDataGrid Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{dpFlat}">
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name="Region"/>
<mx:GroupingField name="Territory"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumnGroup id="headerText" headerText="Territory">
<mx:AdvancedDataGridColumn dataField="Territory"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumnGroup id ="Actual" headerText="Actual">
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Panel>
</mx:Application>
第二种 复杂表头
定制ClassFactory。。。重写展现方式
Code
<?xml version="1.0"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
private function init()
{
var classFactory = new ClassFactory(HeaderRenderer);
classFactory.properties = {type: 'region1', defaultExpandCollapseImage: 'region1', headerLevel1: 'region1', headerLevel2: 'region2', headerLevel3:'region3'};
region.headerRenderer = classFactory;
classFactory = new ClassFactory(TestGridHeader);
classFactory.properties = {fullName: 'Test', shortName: 'Test', mouseOverTitle: 'Test Territory', hasAccess: true};
test1.headerRenderer = classFactory;
// programViewGridColumns.push(programHierarchyColumn);
}
]]>
</fx:Script>
<mx:Panel title="AdvancedDataGrid Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:AdvancedDataGrid id="myADG" sortableColumns="false" styleName="datagridsummary" verticalScrollPolicy="auto" resizableColumns="false" draggableColumns="false"
width="100%" height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{dpFlat}">
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name="Region"/>
<mx:GroupingField name="Territory"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn id ='region' dataField="Region" width="300"/>
<mx:AdvancedDataGridColumnGroup id="headerText" headerText="Territory" >
<mx:AdvancedDataGridColumn id="test1" dataField="Territory" width="100" />
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep" width="100"/>
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumnGroup id ="Actual" headerText="Actual">
<mx:AdvancedDataGridColumn dataField="Actual" width="100"/>
<mx:AdvancedDataGridColumn dataField="Estimate" width="100"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Panel>
</mx:Application>
classfactory 如下：
HeaderRenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" horizontalAlign="center" verticalAlign="top" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" verticalGap="0" horizontalGap="0">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="./assets/css/main.css"/>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var type:String;
[Bindable]
public var defaultExpandCollapseImage:String;
[Bindable]
public var headerLevel1:String;
[Bindable]
public var headerLevel2:String;
[Bindable]
public var headerLevel3:String;
]]>
</fx:Script>
<mx:VBox width="100%">
<mx:HBox width="100%" height="100%">
<mx:Image source="{'./assets/images/plus.gif'}" toolTip="'Expand All'" click=""/>
<mx:Label text="{headerLevel1}" styleName="gridHeader" textDecoration="none"/>
</mx:HBox>
<mx:HBox width="100%" height="100%" paddingLeft="20">
<mx:Image source="{'./assets/images/sub_dot.gif'}"/>
<mx:Label text="{headerLevel2}" alpha="0.5" textDecoration="none"/>
</mx:HBox>
<mx:HBox width="100%" height="100%" paddingLeft="20" id="level3Header">
<mx:Image source="{'./assets/images/sub_dot.gif'}" visible="true"/>
<mx:Image source="{'./assets/images/sub_dot.gif'}"/>
<mx:Label text="{headerLevel3}" alpha="0.5" textDecoration="none"/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
TestGridHeader
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import mx.containers.VBox;
import mx.controls.Alert;
import mx.controls.ToolTip;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.FlexGlobals;
import mx.messaging.AbstractConsumer;
public class TestGridHeader extends VBox implements IListItemRenderer {
[Bindable]public var fullName:String;
[Bindable]public var shortName:String;
[Bindable]public var mouseOverTitle:String;
[Bindable]public var hasAccess:Boolean = true;
[Bindable]public var wrapText:Boolean = false;
private var _lbl:TextField;
override protected function createChildren():void {
super.createChildren();
var _txtFormat:TextFormat = new TextFormat();
_txtFormat.font = "myPlainFont";
_txtFormat.size = 11;
_txtFormat.bold = true;
_txtFormat.color = 0x020264;
_txtFormat.align = "left";
_lbl = new TextField();
_lbl.alpha = 1
_lbl.wordWrap = wrapText;
_lbl.autoSize = TextFieldAutoSize.LEFT;
_lbl.embedFonts = true;
_lbl.antiAliasType = AntiAliasType.ADVANCED;
_lbl.defaultTextFormat = _txtFormat;
_lbl.rotation = 270;
_lbl.mouseEnabled = false;
_lbl.width = 60;
_lbl.height = 100;
var sprite:Sprite = new Sprite();
sprite.buttonMode = true;//Mouse Hand Cursor
sprite.addChild(_lbl);
rawChildren.addChild(sprite);
this.toolTip = mouseOverTitle;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(shortName != null && shortName != "") {
_lbl.textColor = 0xffffff;
_lbl.text = shortName;
_lbl.y = 25;
_lbl.x = (width - _lbl.width)/2;
_lbl.textColor = 0x020264;
}
}
}
}
相关推荐
在Flex开发中，有时我们需要将数据展示在复杂的表格中，比如多层表头的AdvanceGrid。这类需求在数据统计、分析或报告展示等场景中非常常见。 AdvanceGrid是一款功能强大的Flex组件，它允许我们创建自定义布局和多层...
Flex Data Grid Exporter 是一个专门用于Flex应用程序的数据网格导出工具。它允许用户将数据网格中的数据导出为常见的文件格式，例如CSV（逗号分隔值），以便于数据分析、存储或进一步处理。这个组件在Flex开发中...
老外做的功能有点复杂，我整理了其中一个简单的效果，在表头上加一个按钮。扩展的话可以实现数据过滤，或者下拉动态隐藏指定列（灵感都来自extjs呵呵）。 也可以在此下载：...
双表头在ExtJS中可以通过`Ext.grid.header.Container`和`Ext.grid.column.Column`组件的组合来实现。首先，创建一个`headerContainer`，然后在这个容器中添加两个或多个`column`，这些`column`可以设置不同的标题和...
表头和表格主体分别作为子元素，表头使用`align-self: flex-start`使其固定在顶部。 3. **CSS Grid**：CSS Grid布局也可以实现类似的效果。创建一个网格容器，将表头和主体视为独立的行，使用`grid-template-rows`...
在`Datagrid`的容器上设置`display: flex`，然后使用`align-items`和`justify-content`属性，可以轻松实现表头和列的水平和垂直对齐。例如，`align-items: center`使内容垂直居中，`justify-content: space-between`...
最后，`datatables`或`floatThead`等插件提供了更强大的功能，如自动计算表头大小、处理复杂数组数据等。它们通过JavaScript库封装了上述逻辑，简化了开发过程。 总结来说，"html行列表头锁定"涉及到HTML表格结构、...
这个是针对与flex 的表格合并，包括表头合并，有好几种呈现方式，上面只是一种。
可以利用这些特性创建一个包含表头和表体的容器，然后通过Flex或Grid布局来实现表头的固定。这种方法在现代浏览器中效果很好，但可能不支持所有老旧浏览器。 4. **第三方库**： 有一些成熟的JavaScript库，如...
在这种情况下，我们可以使用CSS的`display: flex`和`display: grid`属性，配合JavaScript来实现固定表头。这种方式允许更多的定制和兼容性，但实现起来相对复杂。 最后，“js”文件可能包含了处理动态数据加载、...
为了确保兼容性，可能需要使用JavaScript或者更复杂的CSS技巧，如使用`display: flex;`和`display: grid;`来实现类似的效果。 总结，"html table 固定表头和列"是提高用户界面可读性和用户体验的关键技术，主要通过...
在Flex开发中，高级表格（Advanced Data Grid）是Adobe Flex框架提供的一种强大的数据展示组件，它允许开发者以灵活的方式展示复杂的数据集。本教程将深入探讨如何实现表格的标题分组、列锁定以及相关的样式设置。 ...
在Flex开发中，有时我们需要根据应用的需求动态地创建DataGrid组件以及它的表头。这是因为静态地定义所有列可能不适用于所有场景，特别是当数据来源未知或者需要根据用户输入来定制时。以下是一个关于如何在Flex中...
2. CSS Grid：如果表头和表格主体使用了CSS Grid布局，那么可以通过`grid-template-columns`等属性实现自动扩展和收缩。 3. JavaScript/jQuery：对于更复杂的需求，可能需要借助JavaScript或者jQuery来监听窗口的...
使用`flex`属性，可以指定列的相对宽度，使得Grid在不同屏幕尺寸下保持良好的布局。 5. 表头菜单： EXTJS Grid支持自定义表头菜单，用户可以通过右键点击表头来选择排序、隐藏列等操作。开发者可以自定义这个菜单，...
了解这些原理和技巧，你可以在Flex应用程序中创建更复杂的用户界面，以满足不同的数据展示需求。如果使用了像MecGridLib这样的第三方库，记得查看其文档以获取更多特定于库的合并方法和优化建议。
- 对于更复杂的交互或浏览器兼容性问题，可能需要借助JavaScript或jQuery插件如`fixedHeaderTable`、`floatThead`等，它们可以自动处理表头固定的问题。 5. **响应式设计**： - 考虑到不同的设备和屏幕尺寸，表头...
复杂表头（Complex Grid）是数据展示的一个高级形式，尤其适用于处理具有多级分类或多层次关系的数据。在Flex 4.6中，DataGrid组件被用来显示和操作表格数据，但默认功能可能无法满足所有复杂布局的需求。因此，...
随着现代浏览器对CSS Flexbox和Grid布局的支持，也有新的方法来实现固定表头和第一列。这两种布局模式允许更灵活的控制元素的排列和对齐。例如，使用Flexbox，可以在容器上设置`display: flex`，然后对子元素进行...
要实现表头固定不动，我们首先将表头和表体分别放在两个独立的`<div>`中，并为这两个`div`设置不同的CSS样式。描述中的"HTML div"就是指这种用法。 1. **固定表头**： 创建一个`<div>`用于包裹表头部分，将其CSS...