`

Flex DataGrid数据的多种显示方式

    博客分类:
  • Flex
阅读更多

Flex DataGrid单元格显示数据有多种方式。

1.默认的是截取模式,就是对于显示不下的内容进行自动截取,会被下一列所遮盖。看下图:





2. 但是有时候我们需要能够方便的显示所有内容,但又不希望这一列变得很宽。有一个方法就是自动隐藏该单元的内容,对于数据量大的自动在后面加...,当鼠标移动到该单元格上时,能够以ToolTip的形式完全显示该单元的内容,这个我们可以采用将Label作为该列的itemRenderer办法,具体效果如下:


3. 有时候我们需要DataGrid的每行内容能够显示全所有的内容,如果该列的内容比较多,那么我们希望能够自动换行显示在该列中。其实很简单,我们可以利用DataGridColumn的wordWrap属性,设为true之后的效果如下


效果2的代码如下:实际上只要设定itemRenderer="mx.controls.Label"就可以了

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="vertical">  
    <mx:Array id="arr">
        <mx:Object articleName="Finding out a characters Unicode character code" data="15" />
        <mx:Object articleName="Setting an icon in an Alert control" data="14" />
        <mx:Object articleName="Setting an icon in a Button control" data="13" />
        <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
        <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
        <mx:Object articleName="Using the Alert control" data="8" />
        <mx:Object articleName="Formatting data tips in a Slider" data="7" />
        <mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" />
    </mx:Array>
    <mx:ArrayCollection id="arrColl" source="{arr}" />
    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">
        <mx:columns>
            <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" itemRenderer="mx.controls.Label" />
            <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

效果3的代码如下:实际上只要设定wordWrap="true"就可以了
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="vertical">  
    <mx:Array id="arr">
        <mx:Object articleName="Finding out a characters Unicode character code" data="15" />
        <mx:Object articleName="Setting an icon in an Alert control" data="14" />
        <mx:Object articleName="Setting an icon in a Button control" data="13" />
        <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
        <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
        <mx:Object articleName="Using the Alert control" data="8" />
        <mx:Object articleName="Formatting data tips in a Slider" data="7" />
        <mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" />
    </mx:Array>
    <mx:ArrayCollection id="arrColl" source="{arr}" />
    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">
        <mx:columns>
            <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" wordWrap="true" />
            <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

 

分享到:
评论

相关推荐

    Flex Datagrid checkbox实现

    Flex Datagrid 是Adobe Flex框架中用于展示数据集的组件,它允许开发者以表格形式展示数据,并提供多种交互功能。在Flex应用中,Datagrid经常被用于处理和展示大量的结构化数据。在标题“Flex Datagrid checkbox实现...

    flex datagrid

    它以表格形式呈现,非常适合用来显示多列数据,并提供了排序、选择、编辑等多种功能。在这个教程中,我们将深入探讨 DataGrid 的基本使用和一些关键特性。 1. 建立 DataGrid - MXML 方式:在 MXML 文件中,你可以...

    Flex过滤DataGrid显示的数据

    它的功能强大,能够灵活地处理大量数据,并提供了多种方式来定制显示和交互。本文将深入探讨如何过滤DataGrid显示的数据,以便用户可以更有效地查找和管理信息。 首先,我们需要理解过滤的基本概念。在数据展示中,...

    Flex DataGrid组件 使用详解

    Flex DataGrid组件是Adobe Flex框架中的一个重要控件,专门用于以表格形式展示数据。它具有丰富的功能和灵活性,常用于企业级应用中显示多属性对象的列表。DataGrid组件不仅支持基本的表格布局,还提供了排序、编辑...

    java对象在前台flex的datagrid中显示

    DataGrid不仅用于显示数据,还可以进行编辑操作,支持多种类型的列,如文本、数字、日期等,并可以通过样式和模板进行高度定制,以满足各种界面需求。 在"flexJavaTest"这个压缩包文件中,可能包含了以下内容: 1....

    flex 把datagrid的内容导出到Excel

    总的来说,通过使用As3Xls库,Flex开发者可以方便地将Datagrid中的数据导出到Excel文件,满足用户的多种需求。虽然这个过程涉及到一些编码工作,但有了这个工具,你可以在不依赖服务器端的情况下实现客户端直接导出...

    flex 数据绑定 dataGrid.rar

    4. **自定义列显示**:通过设置`itemRenderer`属性,可以自定义单元格的显示方式,以满足复杂的数据格式需求。 5. **排序和过滤**:DataGrid支持内置的排序功能,只需点击列头即可。也可以通过监听`sort`事件来实现...

    flex datagrid checkbox 全选/反选

    Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分,它提供了一个灵活的方式来展示数据列表,并且支持多种功能,如排序、分组、筛选等。在某些场景下,用户可能需要实现对DataGrid中的所有行进行全选或反选的...

    flex动态生成datagrid表头

    在Flex开发中,数据网格(DataGrid)是一种常用的组件,用于显示二维表格数据。它能够灵活地处理大量数据,并提供排序、筛选等多种功能。而动态生成DataGrid表头则是在运行时根据数据源来创建列,这在处理未知数量或...

    Flex DataGrid DataGridColumn数据颜色多样化-类型替换

    在Flex开发中,我们经常需要对数据显示进行定制,特别是在数据网格(DataGrid)中展示数据时。本话题将探讨如何实现Flex DataGrid中的DataGridColumn数据颜色多样化,以及如何通过类型替换来增强数据可视性。 Flex ...

    flex 映射DataGrid,修改DataGridColumn显示值

    在Flex中,我们可以通过多种方式来定制DataGrid中的DataGridColumn的显示内容,例如更改显示的文本或者根据不同的条件显示不同的符号等。下面我们将详细探讨如何实现这些功能。 ### 1. 自定义DataGridColumn显示...

    flex-带checkbox的datagrid

    在Flex中,Datagrid是常用的组件,用于显示和操作数据集。它类似于HTML中的表格,但提供了更多交互功能,如排序、分页、编辑等。 标题"flex-带checkbox的datagrid"指的是在Flex Datagrid组件中集成复选框(checkbox...

    Flex中DataGrid和其它控件使用

    总结来说,Flex中的DataGrid和AdvancedDataGrid是强大且灵活的数据展示工具,它们可以与其他多种控件协同工作,满足各种复杂的数据展示和交互需求。理解和掌握这些知识点,将有助于构建高效、用户友好的Flex应用程序...

    Flex List DataGrid Menu 拖动技术

    为了增强用户体验,Flex提供了多种控件,包括`List`、`DataGrid`和`Menu`等,这些控件支持丰富的用户交互方式,其中就包括了拖拽(drag and drop)功能。本文将详细介绍如何在Flex中实现这些控件的拖拽功能,并探讨...

    flex做的datagrid留言板

    在Flex中,DataGrid组件是用于显示大量结构化数据的常用控件,非常适合用来展示留言板上的条目。 DataGrid组件允许开发者以表格的形式展示数据,并且支持多种自定义,如排序、分页和筛选等。在这个应用中,DataGrid...

    flex实现DataGrid高亮显示数据功能的解决方案

    在Flex框架中实现DataGrid组件高亮显示特定数据行的功能通常需要对原有组件进行扩展或定制,因为原生的DataGrid组件在高亮显示这一特定功能上有限制。为了实现这一需求,可以创建一个新的类,继承自DataGrid,并覆盖...

    flex olap 数据展现

    例如,DataGrid可以用于显示表格数据,而Chart组件则可以用于创建各种统计图表,如柱状图、饼图、线图等,以可视化地呈现数据。 6. **事件处理和用户交互**: 在Flex OLAP应用中,用户与界面的交互至关重要。通过...

    FLEX数据绑定专题

    本文将深入探讨“FLEX数据绑定专题”,包括其多种实现方式以及如何结合Java作为后端来实现数据交换。 首先,数据绑定是Flex中一种强大的工具,它简化了UI组件状态与应用数据之间的同步。在Flex 4中,数据绑定主要...

    Flex DataGrid自动编号示例

    Flex DataGrid组件可以通过自定义列头或者列内容来实现多种数据展示的功能,其中自动编号功能是常见的需求之一。自动编号可以帮助用户快速识别数据项的顺序,特别是在需要引用特定行数据时,这种编号方式尤为重要。 ...

Global site tag (gtag.js) - Google Analytics