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>[email protected]</email>
</employee>
<employee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<email>[email protected]</email>
</employee>
<employee>
<name>Maurice Smith</name>
<phone>555-219-2012</phone>
<email>[email protected]</email>
</employee>
<employee>
<name>Mary Jones</name>
<phone>555-219-2000</phone>
<email>[email protected]</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>[email protected]</email> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>[email protected]</email> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>[email protected]</email> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>[email protected]</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", 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).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,"dataProvider",this,"_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);
}
}
}