Flex自定义DataGrid的Header

这里主要介绍如何实现在DataGrid的header即标题栏中加入两行的标题文字。使用到的属性是DataGridColumn类中的headerRenderer属性。即我们可以实现我们自己的headerRenderer.

 

package controls {     import mx.controls.DataGrid;     import mx.controls.dataGridClasses.DataGridColumn;     import mx.core.ClassFactory;          public class MyDataGrid extends DataGrid     {         public function MyDataGrid()         {                      }              override protected function commitProperties():void         {             super.commitProperties();                          draggableColumns = false;             editable = false;             resizableColumns = true;             sortableColumns = true;             var colName:DataGridColumn = new DataGridColumn();             colName.headerRenderer = new ClassFactory(MyDataGridHeader);             colName.headerText = "Name:::Web";             colName.dataField = "name";                          var colLink:DataGridColumn = new DataGridColumn();             colLink.headerRenderer = new ClassFactory(MyDataGridHeader);             colLink.headerText = "Link:::URL";             colLink.dataField = "url";                          columns = [colName, colLink];         }     } }

MyDataGridHeader.mxml:

 

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" paddingLeft="3" verticalGap="5">     <mx:Script>         <![CDATA[                          import mx.controls.dataGridClasses.DataGridColumn;                          [Bindable]             private var text:String;             [Bindable]             private var topText:String;             [Bindable]             private var src:String;                          override public function set data(value:Object):void             {                 var col:DataGridColumn = value as DataGridColumn;                 if (col)                 {                     var arr:Array = col.headerText.split(':::');                     text = arr[0];                     topText = arr[1];                 }             }         ]]>     </mx:Script>     <mx:Label id="topTextLbl" text="{topText}" fontWeight="bold"/>     <mx:Label id="txtLbl" text="{text}" fontWeight="bold"/> </mx:VBox>

主程序：

 

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" paddingLeft="3" verticalGap="5">     <mx:Script>         <![CDATA[                          import mx.controls.dataGridClasses.DataGridColumn;                          [Bindable]             private var text:String;             [Bindable]             private var topText:String;             [Bindable]             private var src:String;                          override public function set data(value:Object):void             {                 var col:DataGridColumn = value as DataGridColumn;                 if (col)                 {                     var arr:Array = col.headerText.split(':::');                     text = arr[0];                     topText = arr[1];                 }             }         ]]>     </mx:Script>     <mx:Label id="topTextLbl" text="{topText}" fontWeight="bold"/>     <mx:Label id="txtLbl" text="{text}" fontWeight="bold"/> </mx:VBox>

查看Demo演示

原创作者： Franto。翻译整理：一路风尘