Flex DataGrid組件
|
實際上，DataGrid組件是屬於列表組件的，之所以單獨拿出來講解，主要是因爲 DataGrid組件有着很強大的功能，也有很多擴展的應用是在開發中經常用到的。DataGrid組件是按照行和列的形式顯示數據的。有幾個類是隻有 DataGrid組件才能使用的，包括DataGridCellEditor類、DataGridColumn類和HeaderRenderer類。這三 個類會在使用的時候逐個講解。
15.1 數據網格（DataGrid）組件簡介
DataGrid組件適合顯示包含多個屬性的對象。可以通過內部或者外部的數據源把數 據綁定到DataGrid組件中。DataGrid組件有很多強大的功能，使我們在開發中很容易地實現某些代碼，比如，按照特定的規則排序，在單元格中嵌 入其他組件等。DataGrid組件有很多屬性、方法和事件。常用的屬性如表15.1所示，常用的方法如表15.2所示。
表15.1 DataGrid組件常用的屬性
表15.2 DataGrid組件常用的方法
可以利用這些屬性、方法和事件創建強大的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組件中，代碼如下：// DataProvider
var 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所示。
 圖15.6 編輯DataGrid單元格
|