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 超链接的实现

转:http://hi.baidu.com/qinpanke/blog/item/39745a834df933a50cf4d2fc.html *****************************...
  • foart
  • foart
  • 2010年01月27日 12:53
  • 4791

关于EasyUI在Datagrid里面将某一列设置为超链接并传递当前行的某一参数传递给打开的对话框。

今天在写一个web碰到了要做一个阅读页面的需求,在datagrid里面
  • carlblack1987
  • carlblack1987
  • 2014年08月26日 19:11
  • 2866

Flex 之 Datagrid中列加入超链接

实现功能:实现在datagrid中的数据列鼠标移到字体变色单击文本弹出窗口。          如网页中文本的超链接一样 实现原理:使用linkButton作为itemRenderer,或者自定义...
  • weisljl
  • weisljl
  • 2013年01月09日 17:57
  • 615

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

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

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法

 在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感...
  • u011589095
  • u011589095
  • 2014年08月14日 14:53
  • 1099

Flex中DataGrid中添加一列复选框(CheckBox)

xmlns:s="library://ns.adobe.com/flex/spark"     xmlns:mx="library://ns.adobe.com/flex/mx"     crea...
  • hanxiaoyu1988
  • hanxiaoyu1988
  • 2013年03月12日 11:38
  • 1248

flex之DataGrid增、删、改、查

注:我使用的是Flash Builder 4.6 参考文章:http://blog.csdn.net/ycf330/article/details/3862072 ------------------...
  • friendan
  • friendan
  • 2013年11月28日 23:08
  • 3291

flex:多栏多列弹性布局

可设置的属性有:align-items、flex-direction、align-content、justify-content、flex-wrap、flex、align-self、flex-grow...
  • qq8241994
  • qq8241994
  • 2017年07月26日 13:17
  • 338

display:flex 多栏多列布局

display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的...
  • u012538990
  • u012538990
  • 2016年09月19日 16:53
  • 1067

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

转载自:http://blog.csdn.net/u014232091/article/details/23710391(原文为原创) POI 实现Excel文件中点击超链接跳转到某shee...
  • wangyj1992
  • wangyj1992
  • 2017年04月18日 13:49
  • 1682
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex 之 Datagrid中列加入超链接
举报原因:
原因补充:

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