- 浏览: 106092 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhongbiqing:
非常感谢楼主的分享!
HSQL -
chym_ouyj:
如果webService返回的是一个类,flex应该怎么处理呢 ...
FLex3基于WebService跟java通信(完整篇) -
JAVA小痴:
我也遇到同样的问题不知道怎么解决
FLex lcds和java之间通讯 容器启动时not found HttpFlexSession -
xanpeng:
我猜 flex 整合 struts 的策略是 flex 的 h ...
Flex中对Struts同时发出多个Httpservices
实际上,DataGrid组件是属于列表组件的,之所以单独拿出来讲解,主要是因为 DataGrid组件有着很强大的功能,也有很多扩展的应用是在开发中经常用到的。DataGrid组件是按照行和列的形式显示数据的。有几个类是只有 DataGrid组件才能使用的,包括DataGridCellEditor类、DataGridColumn类和HeaderRenderer类。这三 个类会在使用的时候逐个讲解。 15.1 数据网格(DataGrid)组件简介DataGrid组件适合显示包含多个属性的对象。可以通过内部或者外部的数据源把数 据绑定到DataGrid组件中。DataGrid组件有很多强大的功能,使我们在开发中很容易地实现某些代码,比如,按照特定的规则排序,在单元格中嵌 入其他组件等。DataGrid组件有很多属性、方法和事件。常用的属性如表15.1所示,常用的方法如表15.2所示。表15.1 DataGrid组件常用的属性属 性 说 明
columns 获取或设置一个DataGridColumn对象数组,每个可以显示的列为一个对象
editable 指示用户能否编辑数据提供者中的项目
editedItemPosition 获取或设置正在编辑的数据提供者项目的项目渲染器的列索引和行索引
editedItemRenderer 获取对当前正在编辑的项目所属的DataGrid组件中项目渲染器的引用
headerHeight 获取或设置DataGrid标题的高度,以像素为单位
horizontalScrollPolicy 获取或设置一个布尔值,指示水平滚动条是否始终打开
imeMode 获取或设置输入法编辑器(IME)的模式
itemEditorInstance 对项目编辑器的当前活动实例(如果有)的引用
labelFunction 获取或设置一个函数,确定各个项目的哪些字段要用作标签文本
minColumnWidth 获取或设置DataGrid组件列的最小宽度,以像素为单位
resizableColumns 指示用户能否更改列的尺寸
rowCount 获取或设置在列表中至少部分可见的行的行数
rowHeight 获取或设置DataGrid组件中每一行的高度以像素为单位
showHeaders 获取或设置一个布尔值,该值指示DataGrid组件是否显示列标题
sortableColumns 指示用户能否通过单击列标题单元格对数据提供者中的项目进行排序
sortDescending 获取当用户单击列标题时列的排序顺序
sortIndex 获取要排序的列的索引
表15.2 DataGrid组件常用的方法方 法 说 明
addColumn 在columns数组的末尾添加列
addColumnAt 在column数组中的指定索引处插入列
createItemEditor 使用itemEditor属性指定的编辑器为位于editedItemPosition属性标识的列索引和行索引处的项目渲染器创建项目编辑器
destroyItemEditor 关闭当前在项目渲染器上打开的项目编辑器
editField 编辑DataGrid组件中的给定字段或属性
getCellRendererAt 获取DataGrid中指定位置的单元格渲染器的实例
getColumnAt 检索位于columns数组中指定索引处的列
getColumnCount 检索DataGrid组件中的列数
getColumnIndex 检索具有指定名称的列的索引;如果未找到匹配项,则为 -1
getStyleDefinition 检索当前组件的默认样式映射
itemToCellRenderer DataGrid组件对任何给定项都有多个单元格,因此itemToCellRenderer方法始终返回null
removeAllColumns 删除DataGrid组件中的所有列
removeColumnAt 删除位于columns数组中指定索引处的列
scrollToIndex 将列表滚动至位于指定索引处的项目
spaceColumnsEqually 将可见列的宽度重置为相同大小
可以利用这些属性、方法和事件创建强大的DataGrid组件应用程序。在接下来的几节,会逐一介绍他们的使用方法。15.2 使用DataGrid组件显示数据列表显示数据列表是DataGrid组件最基本的应用,只有把数据显示出来,才可以实现其 他的功能。数据的来源大概有两种,一种是内部数据,即在程序内部自定义数据,然后绑定到DataGrid组件中;另一种是外部数据,通过读取外部文件或者 是数据库,绑定到DataGrid组件中。接下来,就这两种情况分别做介绍。 15.2.1 将内部数据绑定到DataGrid组件中要在DataGrid组件中显示数据,首先就要建立数据源,建立数据源通常是通过DataProvider API类来实现。下面的示例说明如何在DataGrid组件中显示数据,示例的步骤如下所示。 创建一个ActionScript 3.0文件,命名为DataGrid_ShowData_Example.as,类名为DataGrid_ShowData_Example,导入将用到的类库,代码如下所示:package { import fl.controls.DataGrid; import fl.controls.ScrollPolicy; import fl.data.DataProvider; import flash.display.Sprite;public class DataGrid_ShowData_Example extends Sprite { /***************************************** * 构造函数 * */ public function DataGrid_ShowData_Example() { }}} 创建一个函数GetData1,在内部实现具体的功能。代码如下所示:/********************************** 加载内部数据,绑定DataGrid组件* */private function GetData1():void{} 在函数的内部,利用DataProvider类创建一个数据模型,这个数据模型有4列及10行数据,代码如下所示:// 数据模型var dp1:DataProvider = new DataProvider(); dp1.addItem({Name:"Tom", Phone:23579086, QQ:77788899, Software:"Flash"});dp1.addItem({Name:"Kelly", Phone:33579080, QQ:56788823, Software:"Flex"});dp1.addItem({Name:"Jim", Phone:83579085, QQ:56788882, Software:"Java"});dp1.addItem({Name:"Sam",Phone:73579084,QQ:78988811,Software:"Dreamweaver"});dp1.addItem({Name:"Kaiven",Phone:33576681,QQ:32188897,Software:"Photoshop"});dp1.addItem({Name:"Gray", Phone:23229086, QQ:12388900, Software:"Fireworks"});dp1.addItem({Name:"Luar", Phone:23579087, QQ:24681899, Software:"DAEMON Tools"});dp1.addItem({Name:"Kite", Phone:85579082, QQ:68080894, Software:"FlashDevelop"});dp1.addItem({Name:"Polar", Phone:32579086, QQ:21586899, Software:"Beyond Compare"}); 初始化DataGrid组件,并实例化,然后设置属性,包括位置、宽度、高度、滚动条的样式等。代码如下所示:// 初始化DataGrid组件,并实例化var dg1:DataGrid = new DataGrid();// 设置位置dg1.move(20,20);// 设置宽和高dg1.setSize(350, 150);dg1.verticalScrollPolicy = ScrollPolicy.AUTO; 定义列的标题,然后把数据模型和DataGrid组件绑定在一起,放到舞台上,代码如下所示:// 定义列的标题dg1.columns = ["Name", "Phone", "QQ", "Software"];// 绑定数据源dg1.dataProvider = dp1;addChild(dg1); 编译代码并运行,效果如图15.1所示。 图15.1 读取内部数据,在DataGrid中显示 15.2.2 将外部数据绑定到DataGrid组件中外部数据通常指的是数据库、文本本件和XML文件。在实际开发中,与数据层传入数据大多是通过XML格式传输的。所以,下面就创建一个读取外部XML文件的数据,然后在DataGrid组件中显示的例子。步骤如下。 创建一个XML文件,命名为DataGrid_Data.xml,内容结构如下所示:<?xml version="1.0" encoding="UTF-8"?><root> <node label="Flash"> <Name>Flash</Name> <Company>Adobe</Company> <Version>9.0</Version> </node> <node label="Java"> <Name>Java</Name> <Company>Sun</Company> <Version>6.0</Version> </node> <node label=".Net"> <Name>.Net</Name> <Company>Microsoft</Company> <Version>2.0</Version> </node> <node label="Flex"> <Name>Flex</Name> <Company>Adobe</Company> <Version>2.0</Version> </node> <node label="OICQ"> <Name>OICQ</Name> <Company>腾讯</Company> <Version>2007</Version> </node></root> 继续使用15.2.1节的文件,在DataGrid_ShowData_Example.as文件中,创建一个名为GetData2的函数,在函数中读取刚才创建的XML文件,代码如下所示:/********************************** 加载外部XML数据* */private function GetData2():void{ // 加载外部XML文件 data_xml = new XML(); myXMLURL = new URLRequest("DataGrid_Data.xml"); myLoader = new URLLoader(myXMLURL);} 在类的外部,引入刚才使用的命名空间,包括URLRequest和URLLoader,代码如下:import flash.net.URLRequest;import flash.net.URLLoader; 创建上面的全局变量,data_xml、myXMLURL和myLoader。代码如下所示:private var data_xml:XML;private var myXMLURL:URLRequest;private var myLoader:URLLoader; 创建XML对象的加载文件事件,并且在GetData2函数中添加侦听事件的语句,添加的侦听语句代码如下:myLoader.addEventListener("complete", xmlLoaded);XML对象的加载文件事件函数代码如下:/********************************** 绑定DataGrid组件* */function xmlLoaded(event:Event):void{ data_xml = XML(myLoader.data); //trace(data_xml.elements("node").toXMLString());} 在侦听事件函数中,把从外部读取的数据文件绑定到DataGrid组件中,代码如下:// DataProvidervar dp:DataProvider = new DataProvider(data_xml); // 初始化DataGrid组件,并实例化var dg2:DataGrid = new DataGrid();// 设置宽和高dg2.setSize(200, 300);// 定义列的标题dg2.columns = ["Name", "Company", "Version"];// 绑定数据源dg2.dataProvider = dp;addChild(dg2);最后,在构造函数中,调用GetData2函数,代码如下:/****************************************** 构造函数* */public function DataGrid_ShowData_Example(){ GetData2();}编译代码并运行,效果如图15.2所示。图15.2 读取外部数据绑定DataGrid组件15.3 定义DataGrid组件样式外观在实际程序开发中,有时候需要对DataGrid组件可视化的外观进行修改,以满足功能需要。例如,修改数据显示格式、修改DataGrid的样式和外观、自定义单元格等。 15.3.1 修改数据显示格式当DataGrid组件显示出数据后,有些数据格式可能不是我们所需要的。这个时候,就要修改数据格式,把数据修改成有意义的,可以使读者更容易读懂的格式。比如货币格式前面要加美元符号或者人民币符号,有时候从数据库中读出的是0或1的布尔值,再比如电话号码等。下面就以15.2.1节的实例为例,把Phone列修改成前面有区号的电话号码,步骤如下。修改GetData1函数,在绑定数据源的语句之后,增加格式化语句,增加的代码如下所示:// 格式化数据dg1.getColumnAt(1).labelFunction = phoneFormatter;phoneFormatter是格式化数据的函数,把电话号码前面加上区号“0755”,代码如下所示:/********************************** 格式化电话号码* */private function phoneFormatter(item:Object):String{ return "0755-" + item.Phone;}再次编译代码并运行,效果如图15.3所示。图15.3 格式化电话号码 15.3.2 自定义DataGrid组件的标题在显示完DataGrid组件的数据之后,有时候列的标题是数据库中已经定义好的列名 称,对于用户来说,不容易读懂,需要重新定义,那就需要自定义DataGrid组件的标题了。自定义标题要用到的类是 HeaderRenderer,HeaderRenderer类在类dataGridClasses中。下面就利用HeaderRenderer类来实现 自定义标题的功能。还是以15.2.1节的实例为基础,加一些代码。在GetData1函数中加入如下代码:// 自定义标题var dgc0:DataGridColumn = dg1.getColumnAt(0);dgc0.headerText = "姓名";var dgc1:DataGridColumn = dg1.getColumnAt(1);dgc1.headerText = "电话";var dgc3:DataGridColumn = dg1.getColumnAt(3);dgc3.headerText = "软件名称";代码的作用是把第一行的标题改成“姓名”,第二行的标题改为“电话”,第三行的标题改为“软件名称”。再次编译运行,最终效果如图15.4所示。图15.4 自定义DataGrid组件标题15.4 DataGrid组件的分页与排序当DataGrid组件中的数据显示很多行的时候,使用者需要不停地下拉滚动条。这对 于用户的体验极为不便,分页显示数据的方式就可以很好地解决这个问题。在应用软件开发中,分页也是常用的操作。排序的作用是为了用户可以更好地按照自己的 方式排列数据,更加方便地阅读数据信息。 15.4.1 DataGrid组件的分页在很多语言中,分页技术都是很常见的。每种技术都有自己的优势和特点,但是基本思路都 差不多。基本思路是,把全部数据一次性读到一个数据集中,然后,再与DataGrid组件关联,分页的读取显示。另外一种思路是,先从数据库中读取一页的 数据,在DataGrid组件中显示出来,然后再读取,再显示。下面,用第一种思路设计一个分页的程序,数据集采用数组的形式,利用数组的slice()方法,读取一部分数据,然后分页显示。步骤如下。创建一个ActionScript 3.0文件,命名为DataGridPageExample,类名为DataGridPage- Example,继承自Sprite类,导入用到的类库。代码如下:package { import fl.controls.Button; import fl.controls.DataGrid; import fl.controls.ScrollPolicy; import fl.data.DataProvider; import flash.display.Sprite; import flash.events.MouseEvent; public class DataGridPageExample extends Sprite { }}创建构造函数。代码如下所示:/************************* 构造函数* **********************/public function DataGridPageExample(){ CreateDataModel(); CreateDataGrid(); CreatePageButton();}创建数据模型。实际开发中,是从外部数据库或者文件读取数据的,这里只是模拟数据源,便于讲解。在这里,插入了9条数据,然后传递到数组中,代码如下所示:private var dp:DataProvider;private var array:Array;/************************* 创建数据模型* **********************/private function CreateDataModel():void{ // 数据模型 dp = new DataProvider(); // 插入9条数据 dp.addItem({Name:"Tom", Phone:23579086, QQ:77788899, Software:"Flash"}); dp.addItem({Name:"Kelly", Phone:33579080, QQ:56788823, Software:"Flex"}); dp.addItem({Name:"Jim", Phone:83579085, QQ:56788882, Software:"Java"}); dp.addItem({Name:"Sam", Phone:73579084, QQ:78988811, Software:"Dreamweaver"}); dp.addItem({Name:"Kaiven", Phone:33576681, QQ:32188897, Software:"Photoshop"}); dp.addItem({Name:"Gray", Phone:23229086, QQ:12388900, Software:"Fireworks"}); dp.addItem({Name:"Luar",Phone:23579087,QQ:24681899, Software:"DAEMON Tools"}); dp.addItem({Name:"Kite", Phone:85579082, QQ:68080894, Software:"FlashDevelop"});dp.addItem({Name:"Polar",Phone:32579086,QQ:21586899,Software:"BeyondCompare"}); array = dp.toArray();}创建DataGrid组件,封装在函数CreateDataGrid中,代码如下所示:private var dg:DataGrid;// 数据副本private var array_page:Array;/************************* 创建DataGrid组件* **********************/private function CreateDataGrid():void{ // 初始化DataGrid组件,并实例化 dg = new DataGrid(); // 设置位置 dg.move(20,20); // 设置宽和高 dg.setSize(350, 125); dg.verticalScrollPolicy = ScrollPolicy.AUTO; // 定义列的标题 dg.columns = ["Name", "Phone", "QQ", "Software"]; // 初始化数据 array_page = array.slice(0, 5); // 绑定DataGrid组件 BingDataGrid(array_page); addChild(dg);}绑定数据源,先是移除DataGrid组件中的所有数据,然后遍历参数数组中的数据,增加到DataGrid组件中。最后封装在函数BingDataGrid中,便于分页时重复调用。代码如下所示:/************************* 绑定数据源* **********************/private function BingDataGrid(array:Array):void{ // 绑定数据源 dg.removeAll(); var i:uint = 0; for(i=0; i<array.length; i++) { dg.addItem(array[i]); }} 创建“上一页”和”下一页“按钮,封装在函数CreatePageButton中,代码如下:/************************* 创建“上一页”和”下一页“按钮* **********************/private function CreatePageButton():void{ var btnPre:Button = new Button(); var btnNext:Button = new Button(); btnPre.move(30, 170); btnNext.move(240, 170); btnPre.label = "上一页"; btnNext.label = "下一页"; btnPre.addEventListener(MouseEvent.CLICK, btnPreClick); btnNext.addEventListener(MouseEvent.CLICK, btnNextClick); addChild(btnPre); addChild(btnNext);}创建“上一页”按钮的单击事件的函数,读取前5条数据,命名为btnPreClick,代码如下:/************************* “上一页”按钮的单击事件* **********************/public function btnPreClick(e:MouseEvent){ array_page = array.slice(0, 5); BingDataGrid(array_page);}创建“下一页”按钮的单击事件的函数,读取后面的4条数据,命名为btnNextClick,代码如下:/************************* “下一页”按钮的单击事件* **********************/public function btnNextClick(e:MouseEvent){ array_page = array.slice(5, 10); BingDataGrid(array_page);}把三个创建组件的函数增加到构造函数中,代码如下所示:/************************* 构造函数* **********************/public function DataGridPageExample(){ CreateDataModel(); CreateDataGrid(); CreatePageButton();}最后编译运行,效果如图15.5所示。图15.5 DataGrid组件分页15.2 自定义DataGrid组件的单元格DataGrid组件显示完数据之后,有些数据是需要用户自己定义或者修改的。这个时候就需要把需要用户修改的单元格变成可编辑的,以便于用户自己编辑。 15.5.1 编辑DataGrid组件的单元格本节主要介绍如何定义一个单元格的编辑状态,下面的例子跟15.2.1节的例子差不多,但不同的是,应用了DataGridColumn类定义每个列的基本属性,然后再添加到DataGrid组件中。具体步骤如下。 创建一个ActionScript 3.0文件,命名为DataGridCellEditorExample,类名为DataGridCellEditorExample,继承自Sprite类,并导入用到的类库。代码如下所示:package { import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridCellEditor; import fl.controls.TextInput; import fl.data.DataProvider; import flash.display.Sprite; import flash.text.TextFormat; import fl.controls.dataGridClasses.DataGridColumn; import fl.controls.ComboBox; public class DataGridCellEditorExample extends Sprite { }}创建构造函数。代码如下所示:/************************* 构造函数* **********************/public function DataGridCellEditorExample(){}创建DataGrid组件,封装在函数CreateDataGrid中。首先在函数中创建数据模型,代码如下所示:/************************* 创建DataGrid组件* **********************/private function CreateDataGrid():void{dg = new DataGrid(); // 设置大小 dg.setSize(350,300); // 设置单元格的编辑状态 dg.editable = true; // 创建数据模型 var dp:DataProvider = new DataProvider(); dp.addItem({Name:"Tom",Sex:"male",Phone:23579086,QQ:77788899,Software:"Flash"}); dp.addItem({Name:"Kelly",Sex:"female",Phone:33579080,QQ:56788823,Software:"Flex"}); dp.addItem({Name:"Jim",Sex:"male",Phone:83579085,QQ:56788882,Software:"Java"}); dp.addItem({Name:"Sam",Sex:"male",Phone:73579084,QQ:78988811,Software:"Dreamweaver"}); dp.addItem({Name:"Kaiven",Sex:"male",Phone:33576681,QQ:32188897,Software:"Photoshop"}); dp.addItem({Name:"Gray",Sex:"male",Phone:23229086,QQ:12388900,Software:"Fireworks"}); dp.addItem({Name:"Luar",Sex:"male",Phone:23579087,QQ:24681899,Software:"DAEMON Tools"}); dp.addItem({Name:"Kite",Sex:"female",Phone:85579082,QQ:68080894,Software:"FlashDevelop"}); dp.addItem({Name:"Polar",Sex:"male",Phone:32579086,QQ:21586899,Software:"Beyond Compare"});在函数中,定义每个列,将性别和电话列的单元格设置成可编辑状态,添加的代码如下所示:// 增加列,定义每个列的属性var cellEditor:DataGridCellEditor = GetCustomEditor();var sexcellEditor:DataGridCellEditor = GetCustomEditor_List(); // 增加定义“名字”列var dgc_name:DataGridColumn = new DataGridColumn();dgc_name.editable = false;dgc_name.dataField = "Name";//dgc_name.itemEditor = CellEditor;dgc_name.sortable = true;dg.addColumn(dgc_name); // 增加定义“性别”列var dgc_sex:DataGridColumn = new DataGridColumn();dgc_sex.editable = true;/dgc_sex.itemEditor = sexcellEditor;dgc_sex.dataField = "Sex";dgc_sex.sortable = true;dgc_sex.width = 90;dg.addColumn(dgc_sex); // 增加定义“电话”列var dgc_phone:DataGridColumn = new DataGridColumn();dgc_phone.editable = true;dgc_phone.dataField = "Phone";dgc_phone.itemEditor = cellEditor;dgc_phone.sortable = true;dg.addColumn(dgc_phone); // 增加定义“QQ”列var dgc_qq:DataGridColumn = new DataGridColumn();dgc_qq.editable = false;dgc_qq.dataField = "QQ";dgc_qq.sortable = true;dg.addColumn(dgc_qq); // 增加定义“软件”列var dgc_soft:DataGridColumn = new DataGridColumn();dgc_soft.editable = false;dgc_soft.dataField = "Software";dgc_soft.sortable = true;dg.addColumn(dgc_soft);dg.dataProvider = dp;把DataGrid组件添加到舞台中,代码如下所示:addChild(dg);使用DataGridCellEditor对象,定义DataGrid组件单元格的样式,代码如下所示:/************************* 定义单元格样式* **********************/private function GetCustomEditor():DataGridCellEditor{var dgce:DataGridCellEditor = new DataGridCellEditor();dgce.textField.background = true;dgce.textField.backgroundColor = 0xCC99FF;dgce.maxChars = 2;dgce.restrict = "1234567890";return dgce;}编译代码并运行,效果如图15.6所示。
columns 获取或设置一个DataGridColumn对象数组,每个可以显示的列为一个对象
editable 指示用户能否编辑数据提供者中的项目
editedItemPosition 获取或设置正在编辑的数据提供者项目的项目渲染器的列索引和行索引
editedItemRenderer 获取对当前正在编辑的项目所属的DataGrid组件中项目渲染器的引用
headerHeight 获取或设置DataGrid标题的高度,以像素为单位
horizontalScrollPolicy 获取或设置一个布尔值,指示水平滚动条是否始终打开
imeMode 获取或设置输入法编辑器(IME)的模式
itemEditorInstance 对项目编辑器的当前活动实例(如果有)的引用
labelFunction 获取或设置一个函数,确定各个项目的哪些字段要用作标签文本
minColumnWidth 获取或设置DataGrid组件列的最小宽度,以像素为单位
resizableColumns 指示用户能否更改列的尺寸
rowCount 获取或设置在列表中至少部分可见的行的行数
rowHeight 获取或设置DataGrid组件中每一行的高度以像素为单位
showHeaders 获取或设置一个布尔值,该值指示DataGrid组件是否显示列标题
sortableColumns 指示用户能否通过单击列标题单元格对数据提供者中的项目进行排序
sortDescending 获取当用户单击列标题时列的排序顺序
sortIndex 获取要排序的列的索引
表15.2 DataGrid组件常用的方法方 法 说 明
addColumn 在columns数组的末尾添加列
addColumnAt 在column数组中的指定索引处插入列
createItemEditor 使用itemEditor属性指定的编辑器为位于editedItemPosition属性标识的列索引和行索引处的项目渲染器创建项目编辑器
destroyItemEditor 关闭当前在项目渲染器上打开的项目编辑器
editField 编辑DataGrid组件中的给定字段或属性
getCellRendererAt 获取DataGrid中指定位置的单元格渲染器的实例
getColumnAt 检索位于columns数组中指定索引处的列
getColumnCount 检索DataGrid组件中的列数
getColumnIndex 检索具有指定名称的列的索引;如果未找到匹配项,则为 -1
getStyleDefinition 检索当前组件的默认样式映射
itemToCellRenderer DataGrid组件对任何给定项都有多个单元格,因此itemToCellRenderer方法始终返回null
removeAllColumns 删除DataGrid组件中的所有列
removeColumnAt 删除位于columns数组中指定索引处的列
scrollToIndex 将列表滚动至位于指定索引处的项目
spaceColumnsEqually 将可见列的宽度重置为相同大小
可以利用这些属性、方法和事件创建强大的DataGrid组件应用程序。在接下来的几节,会逐一介绍他们的使用方法。15.2 使用DataGrid组件显示数据列表显示数据列表是DataGrid组件最基本的应用,只有把数据显示出来,才可以实现其 他的功能。数据的来源大概有两种,一种是内部数据,即在程序内部自定义数据,然后绑定到DataGrid组件中;另一种是外部数据,通过读取外部文件或者 是数据库,绑定到DataGrid组件中。接下来,就这两种情况分别做介绍。 15.2.1 将内部数据绑定到DataGrid组件中要在DataGrid组件中显示数据,首先就要建立数据源,建立数据源通常是通过DataProvider API类来实现。下面的示例说明如何在DataGrid组件中显示数据,示例的步骤如下所示。 创建一个ActionScript 3.0文件,命名为DataGrid_ShowData_Example.as,类名为DataGrid_ShowData_Example,导入将用到的类库,代码如下所示:package { import fl.controls.DataGrid; import fl.controls.ScrollPolicy; import fl.data.DataProvider; import flash.display.Sprite;public class DataGrid_ShowData_Example extends Sprite { /***************************************** * 构造函数 * */ public function DataGrid_ShowData_Example() { }}} 创建一个函数GetData1,在内部实现具体的功能。代码如下所示:/********************************** 加载内部数据,绑定DataGrid组件* */private function GetData1():void{} 在函数的内部,利用DataProvider类创建一个数据模型,这个数据模型有4列及10行数据,代码如下所示:// 数据模型var dp1:DataProvider = new DataProvider(); dp1.addItem({Name:"Tom", Phone:23579086, QQ:77788899, Software:"Flash"});dp1.addItem({Name:"Kelly", Phone:33579080, QQ:56788823, Software:"Flex"});dp1.addItem({Name:"Jim", Phone:83579085, QQ:56788882, Software:"Java"});dp1.addItem({Name:"Sam",Phone:73579084,QQ:78988811,Software:"Dreamweaver"});dp1.addItem({Name:"Kaiven",Phone:33576681,QQ:32188897,Software:"Photoshop"});dp1.addItem({Name:"Gray", Phone:23229086, QQ:12388900, Software:"Fireworks"});dp1.addItem({Name:"Luar", Phone:23579087, QQ:24681899, Software:"DAEMON Tools"});dp1.addItem({Name:"Kite", Phone:85579082, QQ:68080894, Software:"FlashDevelop"});dp1.addItem({Name:"Polar", Phone:32579086, QQ:21586899, Software:"Beyond Compare"}); 初始化DataGrid组件,并实例化,然后设置属性,包括位置、宽度、高度、滚动条的样式等。代码如下所示:// 初始化DataGrid组件,并实例化var dg1:DataGrid = new DataGrid();// 设置位置dg1.move(20,20);// 设置宽和高dg1.setSize(350, 150);dg1.verticalScrollPolicy = ScrollPolicy.AUTO; 定义列的标题,然后把数据模型和DataGrid组件绑定在一起,放到舞台上,代码如下所示:// 定义列的标题dg1.columns = ["Name", "Phone", "QQ", "Software"];// 绑定数据源dg1.dataProvider = dp1;addChild(dg1); 编译代码并运行,效果如图15.1所示。 图15.1 读取内部数据,在DataGrid中显示 15.2.2 将外部数据绑定到DataGrid组件中外部数据通常指的是数据库、文本本件和XML文件。在实际开发中,与数据层传入数据大多是通过XML格式传输的。所以,下面就创建一个读取外部XML文件的数据,然后在DataGrid组件中显示的例子。步骤如下。 创建一个XML文件,命名为DataGrid_Data.xml,内容结构如下所示:<?xml version="1.0" encoding="UTF-8"?><root> <node label="Flash"> <Name>Flash</Name> <Company>Adobe</Company> <Version>9.0</Version> </node> <node label="Java"> <Name>Java</Name> <Company>Sun</Company> <Version>6.0</Version> </node> <node label=".Net"> <Name>.Net</Name> <Company>Microsoft</Company> <Version>2.0</Version> </node> <node label="Flex"> <Name>Flex</Name> <Company>Adobe</Company> <Version>2.0</Version> </node> <node label="OICQ"> <Name>OICQ</Name> <Company>腾讯</Company> <Version>2007</Version> </node></root> 继续使用15.2.1节的文件,在DataGrid_ShowData_Example.as文件中,创建一个名为GetData2的函数,在函数中读取刚才创建的XML文件,代码如下所示:/********************************** 加载外部XML数据* */private function GetData2():void{ // 加载外部XML文件 data_xml = new XML(); myXMLURL = new URLRequest("DataGrid_Data.xml"); myLoader = new URLLoader(myXMLURL);} 在类的外部,引入刚才使用的命名空间,包括URLRequest和URLLoader,代码如下:import flash.net.URLRequest;import flash.net.URLLoader; 创建上面的全局变量,data_xml、myXMLURL和myLoader。代码如下所示:private var data_xml:XML;private var myXMLURL:URLRequest;private var myLoader:URLLoader; 创建XML对象的加载文件事件,并且在GetData2函数中添加侦听事件的语句,添加的侦听语句代码如下:myLoader.addEventListener("complete", xmlLoaded);XML对象的加载文件事件函数代码如下:/********************************** 绑定DataGrid组件* */function xmlLoaded(event:Event):void{ data_xml = XML(myLoader.data); //trace(data_xml.elements("node").toXMLString());} 在侦听事件函数中,把从外部读取的数据文件绑定到DataGrid组件中,代码如下:// DataProvidervar dp:DataProvider = new DataProvider(data_xml); // 初始化DataGrid组件,并实例化var dg2:DataGrid = new DataGrid();// 设置宽和高dg2.setSize(200, 300);// 定义列的标题dg2.columns = ["Name", "Company", "Version"];// 绑定数据源dg2.dataProvider = dp;addChild(dg2);最后,在构造函数中,调用GetData2函数,代码如下:/****************************************** 构造函数* */public function DataGrid_ShowData_Example(){ GetData2();}编译代码并运行,效果如图15.2所示。图15.2 读取外部数据绑定DataGrid组件15.3 定义DataGrid组件样式外观在实际程序开发中,有时候需要对DataGrid组件可视化的外观进行修改,以满足功能需要。例如,修改数据显示格式、修改DataGrid的样式和外观、自定义单元格等。 15.3.1 修改数据显示格式当DataGrid组件显示出数据后,有些数据格式可能不是我们所需要的。这个时候,就要修改数据格式,把数据修改成有意义的,可以使读者更容易读懂的格式。比如货币格式前面要加美元符号或者人民币符号,有时候从数据库中读出的是0或1的布尔值,再比如电话号码等。下面就以15.2.1节的实例为例,把Phone列修改成前面有区号的电话号码,步骤如下。修改GetData1函数,在绑定数据源的语句之后,增加格式化语句,增加的代码如下所示:// 格式化数据dg1.getColumnAt(1).labelFunction = phoneFormatter;phoneFormatter是格式化数据的函数,把电话号码前面加上区号“0755”,代码如下所示:/********************************** 格式化电话号码* */private function phoneFormatter(item:Object):String{ return "0755-" + item.Phone;}再次编译代码并运行,效果如图15.3所示。图15.3 格式化电话号码 15.3.2 自定义DataGrid组件的标题在显示完DataGrid组件的数据之后,有时候列的标题是数据库中已经定义好的列名 称,对于用户来说,不容易读懂,需要重新定义,那就需要自定义DataGrid组件的标题了。自定义标题要用到的类是 HeaderRenderer,HeaderRenderer类在类dataGridClasses中。下面就利用HeaderRenderer类来实现 自定义标题的功能。还是以15.2.1节的实例为基础,加一些代码。在GetData1函数中加入如下代码:// 自定义标题var dgc0:DataGridColumn = dg1.getColumnAt(0);dgc0.headerText = "姓名";var dgc1:DataGridColumn = dg1.getColumnAt(1);dgc1.headerText = "电话";var dgc3:DataGridColumn = dg1.getColumnAt(3);dgc3.headerText = "软件名称";代码的作用是把第一行的标题改成“姓名”,第二行的标题改为“电话”,第三行的标题改为“软件名称”。再次编译运行,最终效果如图15.4所示。图15.4 自定义DataGrid组件标题15.4 DataGrid组件的分页与排序当DataGrid组件中的数据显示很多行的时候,使用者需要不停地下拉滚动条。这对 于用户的体验极为不便,分页显示数据的方式就可以很好地解决这个问题。在应用软件开发中,分页也是常用的操作。排序的作用是为了用户可以更好地按照自己的 方式排列数据,更加方便地阅读数据信息。 15.4.1 DataGrid组件的分页在很多语言中,分页技术都是很常见的。每种技术都有自己的优势和特点,但是基本思路都 差不多。基本思路是,把全部数据一次性读到一个数据集中,然后,再与DataGrid组件关联,分页的读取显示。另外一种思路是,先从数据库中读取一页的 数据,在DataGrid组件中显示出来,然后再读取,再显示。下面,用第一种思路设计一个分页的程序,数据集采用数组的形式,利用数组的slice()方法,读取一部分数据,然后分页显示。步骤如下。创建一个ActionScript 3.0文件,命名为DataGridPageExample,类名为DataGridPage- Example,继承自Sprite类,导入用到的类库。代码如下:package { import fl.controls.Button; import fl.controls.DataGrid; import fl.controls.ScrollPolicy; import fl.data.DataProvider; import flash.display.Sprite; import flash.events.MouseEvent; public class DataGridPageExample extends Sprite { }}创建构造函数。代码如下所示:/************************* 构造函数* **********************/public function DataGridPageExample(){ CreateDataModel(); CreateDataGrid(); CreatePageButton();}创建数据模型。实际开发中,是从外部数据库或者文件读取数据的,这里只是模拟数据源,便于讲解。在这里,插入了9条数据,然后传递到数组中,代码如下所示:private var dp:DataProvider;private var array:Array;/************************* 创建数据模型* **********************/private function CreateDataModel():void{ // 数据模型 dp = new DataProvider(); // 插入9条数据 dp.addItem({Name:"Tom", Phone:23579086, QQ:77788899, Software:"Flash"}); dp.addItem({Name:"Kelly", Phone:33579080, QQ:56788823, Software:"Flex"}); dp.addItem({Name:"Jim", Phone:83579085, QQ:56788882, Software:"Java"}); dp.addItem({Name:"Sam", Phone:73579084, QQ:78988811, Software:"Dreamweaver"}); dp.addItem({Name:"Kaiven", Phone:33576681, QQ:32188897, Software:"Photoshop"}); dp.addItem({Name:"Gray", Phone:23229086, QQ:12388900, Software:"Fireworks"}); dp.addItem({Name:"Luar",Phone:23579087,QQ:24681899, Software:"DAEMON Tools"}); dp.addItem({Name:"Kite", Phone:85579082, QQ:68080894, Software:"FlashDevelop"});dp.addItem({Name:"Polar",Phone:32579086,QQ:21586899,Software:"BeyondCompare"}); array = dp.toArray();}创建DataGrid组件,封装在函数CreateDataGrid中,代码如下所示:private var dg:DataGrid;// 数据副本private var array_page:Array;/************************* 创建DataGrid组件* **********************/private function CreateDataGrid():void{ // 初始化DataGrid组件,并实例化 dg = new DataGrid(); // 设置位置 dg.move(20,20); // 设置宽和高 dg.setSize(350, 125); dg.verticalScrollPolicy = ScrollPolicy.AUTO; // 定义列的标题 dg.columns = ["Name", "Phone", "QQ", "Software"]; // 初始化数据 array_page = array.slice(0, 5); // 绑定DataGrid组件 BingDataGrid(array_page); addChild(dg);}绑定数据源,先是移除DataGrid组件中的所有数据,然后遍历参数数组中的数据,增加到DataGrid组件中。最后封装在函数BingDataGrid中,便于分页时重复调用。代码如下所示:/************************* 绑定数据源* **********************/private function BingDataGrid(array:Array):void{ // 绑定数据源 dg.removeAll(); var i:uint = 0; for(i=0; i<array.length; i++) { dg.addItem(array[i]); }} 创建“上一页”和”下一页“按钮,封装在函数CreatePageButton中,代码如下:/************************* 创建“上一页”和”下一页“按钮* **********************/private function CreatePageButton():void{ var btnPre:Button = new Button(); var btnNext:Button = new Button(); btnPre.move(30, 170); btnNext.move(240, 170); btnPre.label = "上一页"; btnNext.label = "下一页"; btnPre.addEventListener(MouseEvent.CLICK, btnPreClick); btnNext.addEventListener(MouseEvent.CLICK, btnNextClick); addChild(btnPre); addChild(btnNext);}创建“上一页”按钮的单击事件的函数,读取前5条数据,命名为btnPreClick,代码如下:/************************* “上一页”按钮的单击事件* **********************/public function btnPreClick(e:MouseEvent){ array_page = array.slice(0, 5); BingDataGrid(array_page);}创建“下一页”按钮的单击事件的函数,读取后面的4条数据,命名为btnNextClick,代码如下:/************************* “下一页”按钮的单击事件* **********************/public function btnNextClick(e:MouseEvent){ array_page = array.slice(5, 10); BingDataGrid(array_page);}把三个创建组件的函数增加到构造函数中,代码如下所示:/************************* 构造函数* **********************/public function DataGridPageExample(){ CreateDataModel(); CreateDataGrid(); CreatePageButton();}最后编译运行,效果如图15.5所示。图15.5 DataGrid组件分页15.2 自定义DataGrid组件的单元格DataGrid组件显示完数据之后,有些数据是需要用户自己定义或者修改的。这个时候就需要把需要用户修改的单元格变成可编辑的,以便于用户自己编辑。 15.5.1 编辑DataGrid组件的单元格本节主要介绍如何定义一个单元格的编辑状态,下面的例子跟15.2.1节的例子差不多,但不同的是,应用了DataGridColumn类定义每个列的基本属性,然后再添加到DataGrid组件中。具体步骤如下。 创建一个ActionScript 3.0文件,命名为DataGridCellEditorExample,类名为DataGridCellEditorExample,继承自Sprite类,并导入用到的类库。代码如下所示:package { import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridCellEditor; import fl.controls.TextInput; import fl.data.DataProvider; import flash.display.Sprite; import flash.text.TextFormat; import fl.controls.dataGridClasses.DataGridColumn; import fl.controls.ComboBox; public class DataGridCellEditorExample extends Sprite { }}创建构造函数。代码如下所示:/************************* 构造函数* **********************/public function DataGridCellEditorExample(){}创建DataGrid组件,封装在函数CreateDataGrid中。首先在函数中创建数据模型,代码如下所示:/************************* 创建DataGrid组件* **********************/private function CreateDataGrid():void{dg = new DataGrid(); // 设置大小 dg.setSize(350,300); // 设置单元格的编辑状态 dg.editable = true; // 创建数据模型 var dp:DataProvider = new DataProvider(); dp.addItem({Name:"Tom",Sex:"male",Phone:23579086,QQ:77788899,Software:"Flash"}); dp.addItem({Name:"Kelly",Sex:"female",Phone:33579080,QQ:56788823,Software:"Flex"}); dp.addItem({Name:"Jim",Sex:"male",Phone:83579085,QQ:56788882,Software:"Java"}); dp.addItem({Name:"Sam",Sex:"male",Phone:73579084,QQ:78988811,Software:"Dreamweaver"}); dp.addItem({Name:"Kaiven",Sex:"male",Phone:33576681,QQ:32188897,Software:"Photoshop"}); dp.addItem({Name:"Gray",Sex:"male",Phone:23229086,QQ:12388900,Software:"Fireworks"}); dp.addItem({Name:"Luar",Sex:"male",Phone:23579087,QQ:24681899,Software:"DAEMON Tools"}); dp.addItem({Name:"Kite",Sex:"female",Phone:85579082,QQ:68080894,Software:"FlashDevelop"}); dp.addItem({Name:"Polar",Sex:"male",Phone:32579086,QQ:21586899,Software:"Beyond Compare"});在函数中,定义每个列,将性别和电话列的单元格设置成可编辑状态,添加的代码如下所示:// 增加列,定义每个列的属性var cellEditor:DataGridCellEditor = GetCustomEditor();var sexcellEditor:DataGridCellEditor = GetCustomEditor_List(); // 增加定义“名字”列var dgc_name:DataGridColumn = new DataGridColumn();dgc_name.editable = false;dgc_name.dataField = "Name";//dgc_name.itemEditor = CellEditor;dgc_name.sortable = true;dg.addColumn(dgc_name); // 增加定义“性别”列var dgc_sex:DataGridColumn = new DataGridColumn();dgc_sex.editable = true;/dgc_sex.itemEditor = sexcellEditor;dgc_sex.dataField = "Sex";dgc_sex.sortable = true;dgc_sex.width = 90;dg.addColumn(dgc_sex); // 增加定义“电话”列var dgc_phone:DataGridColumn = new DataGridColumn();dgc_phone.editable = true;dgc_phone.dataField = "Phone";dgc_phone.itemEditor = cellEditor;dgc_phone.sortable = true;dg.addColumn(dgc_phone); // 增加定义“QQ”列var dgc_qq:DataGridColumn = new DataGridColumn();dgc_qq.editable = false;dgc_qq.dataField = "QQ";dgc_qq.sortable = true;dg.addColumn(dgc_qq); // 增加定义“软件”列var dgc_soft:DataGridColumn = new DataGridColumn();dgc_soft.editable = false;dgc_soft.dataField = "Software";dgc_soft.sortable = true;dg.addColumn(dgc_soft);dg.dataProvider = dp;把DataGrid组件添加到舞台中,代码如下所示:addChild(dg);使用DataGridCellEditor对象,定义DataGrid组件单元格的样式,代码如下所示:/************************* 定义单元格样式* **********************/private function GetCustomEditor():DataGridCellEditor{var dgce:DataGridCellEditor = new DataGridCellEditor();dgce.textField.background = true;dgce.textField.backgroundColor = 0xCC99FF;dgce.maxChars = 2;dgce.restrict = "1234567890";return dgce;}编译代码并运行,效果如图15.6所示。
发表评论
-
Flex桌面程序如何打包以及安装
2009-07-25 15:49 2836首先去官网下载并装上AdobeAIRInstaller.exe ... -
TextInput的restrict属性验证控件
2009-07-13 11:30 1135<mx:TextInput id="userN ... -
Tree 默认打开节点
2009-07-10 20:09 1969<mx:Tree x="0" y=& ... -
Flex Timer的用法
2009-07-09 10:59 1756<?xml version="1.0" ... -
Flex DataGrid 列添加控件
2009-07-08 09:01 1925<mx:DataGrid id="showIp ... -
Flex中在弹出TitleWindow中动态刷新父面板
2009-07-02 15:23 3046Flex中在弹出TitleWindow中动态刷新父面板 例如在 ... -
Flex中对Struts同时发出多个Httpservices
2009-07-01 18:13 2149在执行查询时候需要同时发出三个Httpservice请求, ... -
控制IE浏览器中Flex界面的刷新以及后退前进按钮
2009-06-27 14:28 2455Flex页面中当我们按了 IE 上的后退/前进/刷新/关闭时就 ... -
FxStruts简介
2009-06-27 09:32 931Struts是基于JavaServlet、JavaB ... -
Flex动态添加控件 以及注册控件的监听事件(完整版)
2009-06-25 16:04 7621<?xml version="1.0" ... -
Flex HttpService的参数使用
2009-06-25 15:59 1554HttpService <!--提交修改信息--&g ... -
FLex3基于WebService跟java通信(完整篇)
2009-06-09 17:39 2050///////首先创建一个flex3的工程,代码如下///// ... -
Flex3通过HttpService与java通信
2009-06-09 11:13 1257mxml 文件: <mx:HTTPService ... -
Flex3国际化
2009-06-05 15:50 1435flex国际化的应用跟struts国际化差不多。 需要注意的是 ... -
flex3全屏实现
2009-06-03 10:16 1167首先编写一个Test3.mxml应用程序 代码如下 <? ... -
FLex lcds和java之间通讯 容器启动时not found HttpFlexSession
2009-06-02 14:48 2511以前lcds和java tomcat启动还正常 今天就出现一个 ... -
flex application跳转问题
2009-05-29 18:27 1817var url:String = "指定你要跳转的a ...
相关推荐
标题“Flex DataGrid Add RadioButton”涉及的是在Adobe Flex中如何在DataGrid组件中添加单选按钮(RadioButton)的功能。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,它使用MXML和ActionScript编程语言...
flex支持拖拽的DataGrid,如果去查api来置一些属性将会比较麻烦,这个DataGrid可以获取拖拽的内容,这是一个application,可以直接运行
在 Flex 开发中,`DataGrid` 是一个非常重要的组件,用于展示和操作结构化的数据。在本篇文章中,我们将深入探讨如何在 `DataGrid` 中应用编辑功能,包括 `editorDataField`、`itemEditor` 和 `itemRenderer` 的使用...
flex通过httpService读取xml数据到datagird中,通过读取远程URL的XML数据(这里保存到本地),保存到ArrayCollection中,然后在将ArrayCollection绑定到datagird上 环境:flex3.0 可直接运行
在Flex开发中,数据网格(Data Grid)是一种常用的组件,用于显示大量结构化的数据,并提供交互功能,如排序、筛选和编辑。分页是管理大量数据流的关键特性,它允许用户逐页浏览数据,而不是一次性加载所有内容,...
在本文中,我们将深入探讨如何使用EasyUI的DataGird组件实现分页显示数据。EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括DataGird,用于展示表格数据并支持分页、排序、筛选等功能。 首先,...
可用的datagird打印类。记住datagird要添加样式,调用列子如下: DataGridPrintDocument dgp=new DataGridPrintDocument(dataGrid1,"用户列表",16); //string[] uplinestr={"呵呵,hehe","xixi"}; ...
### 数据网格(DataGrid)中如何处理过长的字符串 在数据展示应用中,尤其是在使用`DataGrid`组件时,我们经常会遇到这样的问题:当单元格中的文本长度超过了列的宽度时,显示效果会受到影响,例如文本被截断或换行等...
标题 "easyui datagird增删改分页例子" 提示我们这个压缩包包含一个使用EasyUI DataGrid实现数据操作和分页功能的示例。EasyUI是一个基于jQuery的前端框架,DataGrid是其组件之一,常用于展示表格数据并支持用户交互...
"Datagird增改删例子"这个项目旨在演示如何在C#环境下利用DataGridView实现数据的添加(Add)、修改(Edit)和删除(Delete)操作。在.NET环境中,我们可以结合数据库和ADO.NET技术来完成这些功能。 首先,`dgdemo_...
以下是对“c#.net Data导出DataGird源码”的详细分析。 ### 知识点一:C# .NET环境下数据导出至Excel的基本流程 #### 1. 设置HTTP响应头 在导出数据至Excel文件前,首先需设置HTTP响应头,以便浏览器能够识别该...
在编程领域,尤其是在开发用户界面时,数据展示和交互是一个重要的环节。`Datagrid`控件通常被用于Windows应用程序中,用于显示和操作表格形式的数据。在这个特定的场景中,"让Datagrid支持鼠标滚轮"意味着我们需要...
在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,用于展示和操作数据集。这个示例代码主要围绕四个关键功能展开:分组、过滤、排序和样式设计,这些都是在开发高效、用户友好的数据管理...
### DataGrid绑定详解 在.NET框架中,DataGrid是一个非常重要的控件,它主要用于显示、编辑及导航数据源中的数据。DataGrid控件提供了一种简单有效的方式来展示数据,并允许用户进行排序、筛选等操作。...
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的...
在IT行业中,前端框架EasyUI是一个广泛使用的工具集,它基于jQuery,提供了丰富的组件和便捷的API,用于构建用户界面。在本问题中,我们关注的是`easyui-1.4`版本的`datagrid`组件遇到的一个特定问题:当从后台获取...
动态DataGrid是编程领域中一个常见的话题,尤其是在Web开发中,它允许用户在运行时根据数据源自动生成列和行,极大地增强了用户界面的灵活性。本文将深入探讨动态DataGrid与XML之间的结合,以及如何利用XML数据源来...
资源分类:Python库 所属语言:Python 资源全名:DataGridBWC-0.1.0-py2.6.egg 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
在本文中,我们将深入探讨如何在C# WinForm应用程序中,针对Windows CE(WinCE)平台的PDA设备,利用SQL Server Compact Edition(SQLCE)数据库进行数据操作,而不依赖于DataGrid控件。Visual Studio 2008是我们的...