Flex 之 Datagrid中列加入超链接

转载 2011年01月20日 10:52:00

实现功能:实现在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);

        }

    }

}

 

相关文章推荐

Flex DataGrid 添加超链接

DataGrid的某一列添加超链接,点击超链接触发Onclick函数

本文章是为了实现点击超链接,实现下载文档。传的参数是文档的.txt,下载的文档是zip格式的。 在js中给datagrid的列添加超链接时,因为传的参数是文档名,包括扩展名,导致传输的时候传不过去,...

springMVC 几种页面跳转方式

响应页界面跳转的几种方式
  • jsu_9207
  • jsu_9207
  • 2016年04月29日 13:13
  • 60477

Easyui-datagrid 给标题列加上超链接(MVC3.0应用程序中)

Easyui-datagrid实现超链接列 Easyui-datagrid实现超链接列到controller中 分页查询

当datagrid里面超链接如何获取当行数据

需求:datagrid中有一列是超链接,点击超链接弹出

flex4 AdvancedDataGrid 加超链接

以上例子

POI 实现Excel文件中点击超链接跳转到某sheet页某列某行的功能

转载自:http://blog.csdn.net/u014232091/article/details/23710391(原文为原创) POI 实现Excel文件中点击超链接跳转到某shee...

SQLServer数据库、附加数据库时出错。有关详细信息,请单击“消息”列中的超链接

在SQL Server 数据库中附加数据库时出错:这是由于权限的问题,找到数据库所在文件或文件件:我的数据库文件放到了 “新建文件夹(2)” 中了,所以,我设置下这个文件夹的权限:1、点击右键,选中属...
  • qwdafedv
  • qwdafedv
  • 2015年07月24日 10:26
  • 10464

ABAP ALV里 添加超链接和字段设置为下拉列表

1 插入超链接。 (1). 首先 定义数据内表的时候,添加2个句柄字段, 如:         DATA  BEGIN OF gt_list OCCURS 0.    DATA fld...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex 之 Datagrid中列加入超链接
举报原因:
原因补充:

(最多只允许输入30个字)