在显示完DataGrid组件的数据之后,有时候列的标题是数据库中已经定义好的列名 称,对于用户来说,不容易读懂,需要重新定义,那就需要自定义DataGrid组件的标题了。自定义标题要用到的类是 HeaderRenderer,HeaderRenderer类在类dataGridClasses中。下面就利用HeaderRenderer类来实现 自定义标题的功能。
代码的作用是把第一行的标题改成“姓名”,第二行的标题改为“电话”,第三行的标题改为“软件名称”。再次编译运行,最终效果如图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",Software:"Flash"});
??? dp.addItem({Name:"Kelly",Software:"Flex"});
??? dp.addItem({Name:"Jim",Software:"Java"});
??? dp.addItem({Name:"Sam",Software:"Dreamweaver"});
??? dp.addItem({Name:"Kaiven",Software:"Photoshop"});
??? dp.addItem({Name:"Gray",Software:"Fireworks"});
??? dp.addItem({Name:"Luar",Software:"DAEMON Tools"});
??? dp.addItem({Name:"Kite",Software:"FlashDevelop"});
dp.addItem({Name:"Polar",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","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",Software:"Flash"});
??? dp.addItem({Name:"Kelly",Sex:"female",Software:"Flex"});
??? dp.addItem({Name:"Jim",Software:"Java"});
??? dp.addItem({Name:"Sam",Software:"Dreamweaver"});
??? dp.addItem({Name:"Kaiven",Software:"Photoshop"});
??? dp.addItem({Name:"Gray",Software:"Fireworks"});
??? dp.addItem({Name:"Luar",Software:"DAEMON Tools"});
??? dp.addItem({Name:"Kite",Software:"FlashDevelop"});
??? dp.addItem({Name:"Polar",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所示。