广

ASP.NET

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作

    2018-05-16 07:53:57 次阅读 稿源:互联网
    广告
    如果仅仅只是简单的显示数据,或者对显示数据做一些格式化操作,基本的DataGrid,加labelFunction支持就可以满足了,但大多我们需要针对不同的数据和对象,进行不同的渲染,比如checkbox啦,下拉选择框,日期等等,再比如自己控制显示复杂视图,比如Gantt图之类。这就必须扩展ItemRenderer和HeaderRenderer。
    (1)有关ItemRenderer的类实现IDataRenderer和IDropInListItemRenderer接口。
    很多flex control类都默认实现了IDataRenderer接口,比如Button、Container、TextArea等等。很多flex control类也实现了IDropInListItemRenderer接口,但可惜Container没有默认实现。而我做的东西,需要绘图,所以直接利用Canvas扩展,就必须自己实现IDropInListItemRenderer接口,来获取ListData对象。
    代码如下:

    private var _listData:BaseListData;
    // Make the listData property bindable.
    [Bindable("dataChange")]
    public function get listData():BaseListData
    {
    return _listData;
    }
    public function set listData(value:BaseListData):void
    {
    _listData = value;
    }
    private var _listData:BaseListData;
    // Make the listData property bindable.
    [Bindable("dataChange")]
    public function get listData():BaseListData
    {
    return _listData;
    }
    public function set listData(value:BaseListData):void
    {
    _listData = value;
    }

    可惜俺刚开始不知道之个,所以耗费了很长时间,花费在寻找如何获取当前Column index问题上。
    这样,我才可以在setData方法中,获取到DataGridColumn对象,如下(我使用的是AdvancedDataGrid对象):
    代码如下:

    var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid;
    //listData就是实现IDropInListItemRenderer接口所可以获取的
    var gdgc:GanttAdvancedDataGridColumn =
    dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn;
    var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid;
    //listData就是实现IDropInListItemRenderer接口所可以获取的
    var gdgc:GanttAdvancedDataGridColumn =
    dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn;

    (2)扩展DataGridColumn对象来增加属性,传递参数。
    有些属性我需要动态从外面传递进来,但有不属于list data数据的部分。而Grid Header需要利用这些数据做一些渲染操作。这时候就需要扩展实现DataGridColumn对象,同时在HeaderRenderer对象中获取此DataGridColumn对象来获取参数。
    如下是扩展的一个AdvanceDataGridColumn使用,在这个扩展中,增加了startDate和lastDate两个属性
    代码如下:

    <gantt:GanttAdvancedDataGridColumn id="ganttColumn" headerText="Gantt" itemRenderer="{ganttItemEditor}" headerRenderer="{ganttHeaderEditor}" minWidth="400"/>
    <gantt:GanttAdvancedDataGridColumn id="ganttColumn" headerText="Gantt" itemRenderer="{ganttItemEditor}" headerRenderer="{ganttHeaderEditor}" minWidth="400"/>

    这样,就可以在application初始化的时候,在外部对此Column进行设置:
    代码如下:

    ganttColumn.startDate = new Date(startTime);
    ganttColumn.lastDate = new Date(lastTime);
    ganttColumn.startDate = new Date(startTime);
    ganttColumn.lastDate = new Date(lastTime);

    在HeaderRenderer中,在setData方法中,可以获取相应的对象和参数
    代码如下:

    override public function set data(value:Object):void{
    super.data = value;
    var advancedDataGridColumn:GanttAdvancedDataGridColumn
    = value as GanttAdvancedDataGridColumn;
    if(advancedDataGridColumn!=null){
    if(advancedDataGridColumn.startDate!=null){
    startDate = advancedDataGridColumn.startDate;
    lastDate = advancedDataGridColumn.lastDate;
    render();
    }
    }
    }
    override public function set data(value:Object):void{
    super.data = value;
    var advancedDataGridColumn:GanttAdvancedDataGridColumn
    = value as GanttAdvancedDataGridColumn;
    if(advancedDataGridColumn!=null){
        if(advancedDataGridColumn.startDate!=null){
            startDate = advancedDataGridColumn.startDate;
            lastDate = advancedDataGridColumn.lastDate;
            render();
        }
    }
    }        

    (3)利用labelFunction进行显示数据格式化
    比如我想对日期数据进行格式化操作,如下所示:
    代码如下:

    private function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {
    var dateFormatter:DateFormatter = new DateFormatter();
    dateFormatter.formatString = "YYYY-MM-DD HH:NN";
    var td:Date = new Date( new Number(item[column.dataField]) );
    return dateFormatter.format( td );
    }
    private function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {    
    var dateFormatter:DateFormatter = new DateFormatter();
    dateFormatter.formatString = "YYYY-MM-DD HH:NN";
    var td:Date = new Date( new Number(item[column.dataField]) );
    return dateFormatter.format( td );
    }

    在mx的datagridcolumn中,就可以引用这个label function
    代码如下:

    <mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/>
    <mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/>

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告