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", 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 ;

        }

 

    }

}

UrlLinkRenderer.as

 

 

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);

        }

    }

}