Flex 之 Datagrid中列加入超链接

实现功能：实现在datagrid中的数据列鼠标移到字体变色单击文本弹出窗口。
?? ? ? ? 如网页中文本的超链接一样

实现原理：使用linkButton作为itemRenderer，或者自定义一个itemrender，监听mouSEOver和click事件，点击后弹出窗口。

(注意Flex3和Flex4有区别 在此提供两个DataGridLink.mxml 其中 as文件是通用的 )

代码实例：

(Flex3的文件)DataGridLink.mxml

?

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preinitialize="preinit();" creationComplete="creationComplete();" viewSourceURL="srcview/index.html">

?? ?<mx:XMLList id="employees">

?? ? ? ?<employee>

?? ? ? ? ? ?<name>Christina Coenraets</name>

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

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

?? ? ? ?</employee>

?? ? ? ?<employee>

?? ? ? ? ? ?<name>Joanne Wall</name>

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

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

?? ? ? ?</employee>

?? ? ? ?<employee>

?? ? ? ? ? ?<name>Maurice Smith</name>

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

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

?? ? ? ?</employee>

?? ? ? ?<employee>

?? ? ? ? ? ?<name>Mary Jones</name>

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

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

?? ? ? ?</employee>

?? ?</mx:XMLList>

?? ?<mx:Script>

?? ? ? ?<!--[CDATA[

?? ? ? ? ? ?import mx.collections.ArrayCollection;

?? ? ? ? ? ?import mx.controls.dataGridClasses.DataGridColumn;

?? ? ? ? ? ?import mx.controls.Alert;

?

?? ? ? ? ? ?private var dataGridColumns:Array = new Array();

?

?? ? ? ? ? ?private var queryDataGridColumns:ArrayCollection = new ArrayCollection([

?? ? ? ? ? ? ? ? ? ? ? ? { headerText:"Name",dataField: "name",linkable:true}

?? ? ? ? ? ? ? ? ? ? ? ?,{ headerText:"Phone",dataField: "phone",linkable:false}

?? ? ? ? ? ? ? ? ? ? ? ?,{ headerText:"Email",dataField: "email",linkable:false}

?? ? ? ? ? ? ? ? ? ? ? ?]) ;

?

?? ? ? ? ? ?private function preinit():void {

?? ? ? ? ? ? ? ?for(var i:int = ?0; i< queryDataGridColumns.length; i++) {

?? ? ? ? ? ? ? ? ? ?var dataGridColumn:DataGridColumn = new DataGridColumn();

?? ? ? ? ? ? ? ? ? ?dataGridColumn.headerText = queryDataGridColumns.getItemAt(i).headerText ;

?? ? ? ? ? ? ? ? ? ?dataGridColumn.dataField = queryDataGridColumns.getItemAt(i).dataField ;

?? ? ? ? ? ? ? ? ? ?dataGridColumn.visible = true ;

?

?? ? ? ? ? ? ? ? ? ?if(queryDataGridColumns.getItemAt(i).linkable) {

?? ? ? ? ? ? ? ? ? ? ? ?var urlLinkRenderer:ClassFactory = new ClassFactory(UrlLinkRenderer);

?? ? ? ? ? ? ? ? ? ? ? ? ?urlLinkRenderer.properties = { linkButtonLabel: queryDataGridColumns.getItemAt(i).dataField };

?? ? ? ? ? ? ? ? ? ? ? ?dataGridColumn.itemRenderer = urlLinkRenderer ;

?? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?

?? ? ? ? ? ? ? ? ? ?dataGridColumns.push(dataGridColumn);

?? ? ? ? ? ? ? ?}

?? ? ? ? ? ?}

?

?? ? ? ? ? ?private function creationComplete():void {

?? ? ? ? ? ? ? ?createDataGrid();

?? ? ? ? ? ? ? ?this.addEventListener("DataGridLinkButtonClickEvent",linkButtonClickHandler);

?? ? ? ? ? ?}

?

?? ? ? ? ? ?private function createDataGrid():void {

?? ? ? ? ? ? ? ?queryDataGrid.columns = dataGridColumns ;

?? ? ? ? ? ? ? ?//BindingUtils.bindProperty(queryDataGrid,"dataProvider",this,"_queryDataGridProvider");

?? ? ? ? ? ? ? ?this.addChild(queryDataGrid);

?? ? ? ? ? ?}

?

?? ? ? ? ? ?private function linkButtonClickHandler(event:LinkButtonDynamicEvent):void {

?? ? ? ? ? ? ? ?Alert.show(event.rowObject.name );//输出内容

?? ? ? ? ? ?}

?? ? ? ?]]-->

?? ?</mx:Script>

?? ?<mx:DataGrid top="5" left="5" right="5" bottom="5" dataProvider="{employees}" id="queryDataGrid">

?? ?</mx:DataGrid>

?

</mx:Application>

?

(Flex4的文件)DataGridLink.mxml

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" preinitialize="preinit();" creationComplete="creationComplete()" ><fx:Declarations><fx:XMLList id="employees"><employee> <name>Christina Coenraets</name> <phone>555-219-2270</phone> <email>ccoenraets@fictitious.com</email> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>jwall@fictitious.com</email> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> </employee> </fx:XMLList></fx:Declarations><s:layout><s:BasicLayout></s:BasicLayout></s:layout><fx:Script><![CDATA[import mx.collections.ArrayCollection; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.Alert; private var dataGridColumns:Array = new Array(); private var queryDataGridColumns:ArrayCollection = new ArrayCollection([ { headerText:"Name",linkable:true},linkable:false},linkable:false} ]) ; private function preinit():void { for(var i:int = 0; i< queryDataGridColumns.length; i++) { var dataGridColumn:DataGridColumn = new DataGridColumn(); dataGridColumn.headerText = queryDataGridColumns.getItemAt(i).headerText ; dataGridColumn.dataField = queryDataGridColumns.getItemAt(i).dataField ; dataGridColumn.visible = true ; if(queryDataGridColumns.getItemAt(i).l

inkable) { var urlLinkRenderer:ClassFactory = new ClassFactory(UrlLinkRenderer); urlLinkRenderer.properties = { linkButtonLabel: queryDataGridColumns.getItemAt(i).dataField }; dataGridColumn.itemRenderer = urlLinkRenderer ; } dataGridColumns.push(dataGridColumn); } } private function creationComplete():void { createDataGrid(); this.addEventListener("DataGridLinkButtonClickEvent",linkButtonClickHandler); } private function createDataGrid():void { queryDataGrid.columns = dataGridColumns ; //BindingUtils.bindProperty(queryDataGrid,"_queryDataGridProvider"); //this.addChild(queryDataGrid); this.addElement(queryDataGrid);} private function linkButtonClickHandler(event:LinkButtonDynamicEvent):void { Alert.show(event.rowObject.name );//输出内容 } ]]></fx:Script><mx:DataGrid top="5" left="5" right="5" bottom="5" dataProvider="{employees}" id="queryDataGrid"> </mx:DataGrid> </s:Application>

?

LinkButtonDynamicEvent.as

?

package

{

?? ?import mx.events.DynamicEvent;

?

?? ?public class LinkButtonDynamicEvent extends DynamicEvent

?? ?{

?? ? ? ?public var rowObject:Object ;

?

?? ? ? ?public function LinkButtonDynamicEvent(type:String,object:Object)

?? ? ? ?{

?? ? ? ? ? ?super(type,true );

?? ? ? ? ? ?this.rowObject = object ;

?? ? ? ?}

?

?? ?}

}

?

?

package

{

?? ?import mx.controls.Label;

?? ?import mx.controls.LinkButton;

?? ? ?import flash.events.MouseEvent;

?? ?import mx.events.DynamicEvent;

?

?? ?public class UrlLinkRenderer extends LinkButton

?? ?{

?? ? ? ?private var newUrlLink:Label;

?? ? ? ?private var orderByFilter:String;

?? ? ? ?[Bindable]

?? ? ? ?private var _linkButtonLabel:String = "" ;

?? ? ? ?[Bindable]

?? ? ? ?private var _rowObject:Object = new Object();

?? ? ? ?public function UrlLinkRenderer()

?? ? ? ?{

?? ? ? ? ? ?super();

?? ? ? ? ? ?this.setStyle("textDecoration","underline");

?? ? ? ? ? ?this.setStyle("textAlign","left");

?? ? ? ? ? ?this.addEventListener(MouseEvent.CLICK,linkButtonClickHandler);

?? ? ? ?}

?

?? ? ? ?/**

?? ? ? ? * Override the set method for the data property. function also sets the data for the

?? ? ? ? * container instance and sets member variables newId,newLabel,and newCheckBox.selected value

?? ? ? ? *?

?? ? ? ? */

?? ? ? ?override public function set data(value:Object):void

?? ? ? ?{

?? ? ? ? ? ?super.data = value;

?

?? ? ? ? ? ?// Make sure there is data

?? ? ? ? ? ?if (value != null) {

?

?? ? ? ? ? ? ? ?//Alert.show("test");

?? ? ? ? ? ? ? ?var str:String = "";

?? ? ? ? ? ? ? ?for (var i:Object in value) {

?? ? ? ? ? ? ? ? ? ?str += i + " || " + value[i] + "/n";

?? ? ? ? ? ? ? ?}

?

?? ? ? ? ? ? ? ?this._rowObject = value ;

?? ? ? ? ? ? ? ?this.label = value[_linkButtonLabel];

?

?? ? ? ? ? ?}

?? ? ? ?}

?

?? ? ? ?public function set linkButtonLabel(value:String):void {

?? ? ? ? ? ?_linkButtonLabel = value ;

?? ? ? ?}

?? ? ? ?public function get linkButtonLabel():String {

?? ? ? ? ? ?return _linkButtonLabel ;

?? ? ? ?}

?

?? ? ? ?private function linkButtonClickHandler(e:MouseEvent):void {

?? ? ? ? ? ?var event:LinkButtonDynamicEvent = new LinkButtonDynamicEvent("DataGridLinkButtonClickEvent",_rowObject);

?? ? ? ? ? ?dispatchEvent(event);

?? ? ? ?}

?? ?}

}