繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作
- ASP.NET
- Visual Studio.Net 内幕(7)
- .Net 2.0 原汁原味读取注册表
- ASP.NET 2.0中预设的cookie
- ASP.NET：一段比较经典的多线程学习代码
- ASP.NET2.0服务器控件之自定义状态管理
- Asp.net给站点某目录增加Aspnet用户
- ASP.NET技巧：请求网址并解析返回的html
- 在Asp.net用C#建立动态Excel
- ASP.NET2.0:页面中链入的CSS、js文件带中文时需注意
- ASP.NET技巧：数据岛出到Excel最为简易的方法
- 第一次用.net2.0 LOGIN登陆控件的困惑和解决方法
- 在ASP.net中保存/取出图片入/从SQL数据库
- ASP.NET技巧：做个DataList可分页的数据源
- 在.NET中利用委托实现窗体间通信
- 在.NET2.0中使用自定义事务操作
- 解决 ASP.NET中目录访问权限的问题
- ASP.Net防止刷新自动触发事件的解决方案
- 白刃之战：PHP vs. ASP.NET（节选）－架构比较
- C#中使用SendMessage
- 提取HTML代码中文字的C#函数
ASP.NET 中的 使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 195 ::
收藏到网摘: n/a
这两天在用Flex DataGrid做点东西，走了不少弯路，现将心得分享一下。 如果仅仅只是简单的显示数据，或者对显示数据做一些格式化操作，基本的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"/>
评论 (0) All
