`

DataGrid的一些关键属性

    博客分类:
  • Flex
阅读更多
DataGrid控件提供以下功能:

列可以具有不同宽度或同一固定宽度
用户可以在运行时调整其尺寸的列
用户可以在运行时对其重新排序的列
可选择自定义列标题
对任意列使用自定义项目渲染器以显示除文本之外的数据的功能
支持通过单击列对数据进行排序
    默认大小:如果列为空,则默认宽度为 300 个像素。如果列包含信息但没有定义显式宽度,则每列的默认宽度为 100 个像素。如果可能,调整 DataGrid 宽度的大小以适应所有列的宽度。默认的显示行数为 7 行,其中包括标题;默认情况下,每行的高度为 20 个像素。



1.数据显示

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"

    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">

    <mx:XMLList id="employees">

        <employee>

            <name>Christina Coenraets</name>

            <phone>555-219-2270</phone>

            <email>ccoenraets@fictitious.com</email>

            <active>true</active>

            <image>images/arrow_icon_sm.png</image>

        </employee>

        <employee>

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>jwall@fictitious.com</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>maurice@fictitious.com</email>

            <active>false</active>

        </employee>

        <employee>

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

            <email>mjones@fictitious.com</email>

            <active>true</active>

        </employee>

    </mx:XMLList>

    <mx:Panel title="DataGrid Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"

         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

         <mx:Label width="100%" color="0x323232"

            text="Select a row in the DataGrid control."/>

        <mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </mx:columns>

        </mx:DataGrid>

        <mx:Form color="0x323232" width="100%" height="100%"  paddingTop="0" paddingBottom="0"  >

                <mx:FormItem label="Name" paddingTop="0" paddingBottom="0">

                <mx:Label text="{dg.selectedItem.name}"/>

                </mx:FormItem>

                <mx:FormItem label="Email" paddingTop="0" paddingBottom="0">

                    <mx:Label text="{dg.selectedItem.email}"/>

                </mx:FormItem>

                <mx:FormItem label="Phone" paddingTop="0" paddingBottom="0">

                    <mx:Label text="{dg.selectedItem.phone}"/>

                </mx:FormItem>

        </mx:Form>

    </mx:Panel>

</mx:Application>
注意:如果需要通过点击某行触发事件,则使用ListEvent.ITEM_CLICK,通过他的columnIndex和rowIndex属性可以的到鼠标选中的列号和行号。可以通过DataGrid(evt.currentTarget).selectedItem.name得到具体的字段名,即选择了具体的某行某列的某字段名。还有如editable属性为true时,则列表为看编辑状态。常用渲染器来渲染表格数据,如改变显示格式、字体颜色或在单元格中显示不同的组件,这里有些功能也可以通过labelFunction实现。



2.   通过headerColors样式,设置DataGrid头部颜色

headerColors="[red, blue]" 用于绘制标题背景渐变的两种颜色的数组。第一种颜色是顶层颜色。第二种颜色是底层颜色。 默认值为 [0xFFFFFF, 0xE6E6E6]。

3.通过columns属性,动态的增加DataGrid的一个列

4.通过rollOverColor(用户将鼠标滑过行时的行背景颜色。 默认值为 0xE3FFD6.)和selectionColor(用户选择行中的项目渲染器时的行背景颜色)样式,设置DataGrid中选中栏覆盖颜色。

5.有时候需要显示树的效果,则应该使用AdvancedDataGrid,AdvancedDataGrid 控件的AdvancedDataGridColumn 提供多列排序支持给ArrayCollection 的filterFunction 属性赋值自定义函数引用以执行过滤匹配。(=true则显示)。设置AdvancedDataGrid 的selectionMode 属性为multipleCells 和selectedCells 属性为object数组,该数组包含被选择单元格的rowIndex 和columnIndex。

6.通过 horizontalScrollPolicy、verticalScrollPolicy,设置水平、垂直滚动条,请注意,此策略可能会影响组件的度量大小。如果此策略是 ScrollPolicy.AUTO,则滚动栏将不计入度量大小。这样,可防止显示滚动栏时布局被重新计算。如果您确定用于滚动条的数据足够,则应将此策略设置为 ScrollPolicy.ON。如果不确定,则可能需要在组件中设置显式宽度或高度以允许稍后显示滚动条。
分享到:
评论

相关推荐

    WPF中DataGrid里面的Checkbox实现单选

    WPF中DataGrid里面的Checkbox实现单选关键代码, 文档里面的代码复制粘贴即可实现!本人也是项目需要写的一个功能11行代码实现此功能! 希望可以帮助到你们!

    轻松解决datagrid-export.js的导出excel数字变科学计数法的问题

    本文件只需修改一个属性,直接替换官方文件,引入即可解决导出excel的数字变成科学计数法的...本项目利用的是jquery扩展的datagrid-export.js输出excel,所以,前端输出文件格式的字段类型控制才是解决问题的关键所在。

    jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

    1、首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索引editIndex. 2、撤销用到了rejectChanges(). 3、...

    Silverlight2.0功能展示Demo源码

    8、Silverlight(10) - 2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性 9、Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画 10、Silverlight...

    十天学会ASP.net--我认为ASP.NET比ASP难很多,希望大家做好准备

    我想学习还是靠自己的,外面每一本书也有自己写的不周到的地方,关键还需要自己的实践加上探索。 首先来说一下表单的验证控件,以前我们做表单验证,如果是客户端的JAVASCRIPT,不能做到美观统一,而且还可以通过...

    WPF编程宝典 part1

    22.3 DataGrid控件 621 22.3.1 改变列的尺寸与重新安排列 622 22.3.2 定义列 623 22.3.3 设置列的格式和样式 628 22.3.4 设置行的格式 629 22.3.5 显示行细节 630 22.3.6 冻结列 631 22.3.7 选择 632 22.3.8 排序 ...

    WPF编程宝典 part2

    22.3 DataGrid控件 621 22.3.1 改变列的尺寸与重新安排列 622 22.3.2 定义列 623 22.3.3 设置列的格式和样式 628 22.3.4 设置行的格式 629 22.3.5 显示行细节 630 22.3.6 冻结列 631 22.3.7 选择 632 22.3.8 排序 ...

    《Visual Basic 2008应用程序开发实例精讲》全书所有实例程序源代码

    2.3 控件常用属性47 2.4 api函数的应用49 2.4.1 api简介49 2.4.2 api的声明50 2.4.3 api的应用实例51 2.5 本章 小结52 第2篇 数据库应用开发实例 第3章 家庭理财系统54 3.1 实例功能说明54 3.2 系统设计方案55 3.2.1...

    VB2008应用程序开发实例精讲(光盘文件)

    3.3.4 DataGrid控件的应用64 3.3.5 SaveFileDialog组件65 3.4 程序实现与代码66 3.4.1 家庭理财系统主界面窗体66 3.4.2 查询统计窗体设计78 3.5 实例总结83 第4章 超市管理系统84 4.1 实例功能说明84 4.2 系统设计...

Global site tag (gtag.js) - Google Analytics