源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-12-20 16:36 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作
如果仅仅只是简单的显示数据,或者对显示数据做一些格式化操作,基本的DataGrid,加labelFunction支持就可以满足了,但大多我们需要针对不同的数据和对象,进行不同的渲染,比如checkbox啦,下拉选择框,日期等等,再比如自己控制显示复杂视图,比如Gantt图之类。这就必须扩展ItemRenderer和HeaderRenderer。 [b](1)有关ItemRenderer的类实现IDataRenderer和IDropInListItemRenderer接口。[/b] 很多flex control类都默认实现了IDataRenderer接口,比如Button、Container、TextArea等等。很多flex control类也实现了IDropInListItemRenderer接口,但可惜Container没有默认实现。而我做的东西,需要绘图,所以直接利用Canvas扩展,就必须自己实现IDropInListItemRenderer接口,来获取ListData对象。
[u]复制代码[/u] 代码如下:
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对象):
[u]复制代码[/u] 代码如下:
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;
[b](2)扩展DataGridColumn对象来增加属性,传递参数。 [/b]有些属性我需要动态从外面传递进来,但有不属于list data数据的部分。而Grid Header需要利用这些数据做一些渲染操作。这时候就需要扩展实现DataGridColumn对象,同时在HeaderRenderer对象中获取此DataGridColumn对象来获取参数。 如下是扩展的一个AdvanceDataGridColumn使用,在这个扩展中,增加了startDate和lastDate两个属性
[u]复制代码[/u] 代码如下:
<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进行设置:
[u]复制代码[/u] 代码如下:
ganttColumn.startDate = new Date(startTime); ganttColumn.lastDate = new Date(lastTime); ganttColumn.startDate = new Date(startTime); ganttColumn.lastDate = new Date(lastTime);
在HeaderRenderer中,在setData方法中,可以获取相应的对象和参数
[u]复制代码[/u] 代码如下:
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进行显示数据格式化 比如我想对日期数据进行格式化操作,如下所示:
[u]复制代码[/u] 代码如下:
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
[u]复制代码[/u] 代码如下:
<mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/> <mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部