Avatar of aronezhang

by

Flex中使用ItemRenderer实现表格行超链接

四月 10, 2009 in RIA Flex

 

在DataGrid的数据显示中，我们往往希望能够为表格行数据中的某个列添加一个超链接，然后点击超链接的时候显示明细信息或者其它信息。在Flex中实现链接需要使用LinkButton控件，因此实行这样的需求大致是如下的思路：

  1. 扩展LinkButton这个控件，使它显示的时候有超链接一样的下划线，同时需要必须监听鼠标单击事件来响应用户的操作
  2. 扩展一个DynamicEvent事件，实现当用户单击超链接的时候，将选中的表格行数据返回，以备后续处理使用
  3. 创建表格列的使用，实例化上面扩展的LinkButton控件，将它作为数据表格列的ItemRenderer属性

 

下面是显示的效果（可以右键View Source或点击这里察看源代码）

 

选择Name列中的行，弹出选中行Name的值。

 

1，扩展动态事件

LinkButtonDynamicEvent扩展了DynamicEvent，添加了一个关键的变量rowObject，这个变量就是用户选中的一整行

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13

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

 

2，扩展LinkButton控件

UrlLinkRenderer扩展LinkButton，其中设置了文本的样式，并添加了鼠标单击事件(MouseEvent.CLICK)，而在事件的回调函数中分发LinkButtonDynamicEvent事件，同时重载data的setter，将用户选择的整行数据记录下来，下面是主要的两个函数

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

override public function set data(value:Object):void
{
  super.data = value;
 
  // Make sure there is data
  if (value != null) {
    var str:String = "";
    for (var i:Object in value) {
      str += i + " || " + value[i] + "\n";
    }      
    this._rowObject = value ;
    this.label = value[_linkButtonLabel];      
  }
}
 
private function linkButtonClickHandler(e:MouseEvent):void {
  var event:LinkButtonDynamicEvent = 
     new LinkButtonDynamicEvent("DataGridLinkButtonClickEvent",_rowObject);
  dispatchEvent(event);
}

 

3，通过ClassFactory创建UrlLinkRenderer实例，并给DataGridColumn的ItemRenderer属性

表格列的定义信息通过ArrayCollection变量queryDataGridColumns来定义，里面有一个linkable属性，根据这个属性来决定哪列中的数据需要添加超链接

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

 

其它详细的内容请查看源代码。

 

–

相关文章:

  1. MyEclipse7下安装插件
  2. Flex3应用中使用样式

Tags:  

1 response to Flex中使用ItemRenderer实现表格行超链接

  1. sail.sun said on 四月 12, 2009

    大哥，你这个展现太帅了，帅死了！！！！！我也要弄！！！！！！

Leave a reply

You must be logged in to post a comment.