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

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

<br>private var _listData:BaseListData; <br>// Make the listData property bindable. <br>[Bindable("dataChange")] <br>public function get listData():BaseListData <br>{ <br>return _listData; <br>} <br>public function set listData(value:BaseListData):void <br>{ <br>_listData = value; <br>} <br>private var _listData:BaseListData; <br>// Make the listData property bindable. <br>[Bindable("dataChange")] <br>public function get listData():BaseListData <br>{ <br>return _listData; <br>} <br>public function set listData(value:BaseListData):void <br>{ <br>_listData = value; <br>} <br> <br>可惜俺刚开始不知道之个，所以耗费了很长时间，花费在寻找如何获取当前Column index问题上。 <br>这样，我才可以在setData方法中，获取到DataGridColumn对象，如下（我使用的是AdvancedDataGrid对象）： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid; <br>//listData就是实现IDropInListItemRenderer接口所可以获取的 <br>var gdgc:GanttAdvancedDataGridColumn = <br>dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn; <br>var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid; <br>//listData就是实现IDropInListItemRenderer接口所可以获取的 <br>var gdgc:GanttAdvancedDataGridColumn = <br>dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn; <br> <br><strong>（2）扩展DataGridColumn对象来增加属性，传递参数。 <br></strong>有些属性我需要动态从外面传递进来，但有不属于list data数据的部分。而Grid Header需要利用这些数据做一些渲染操作。这时候就需要扩展实现DataGridColumn对象，同时在HeaderRenderer对象中获取此DataGridColumn对象来获取参数。 <br>如下是扩展的一个AdvanceDataGridColumn使用，在这个扩展中，增加了startDate和lastDate两个属性 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><gantt:GanttAdvancedDataGridColumn id="ganttColumn" headerText="Gantt" itemRenderer="{ganttItemEditor}" headerRenderer="{ganttHeaderEditor}" minWidth="400"/> <br><gantt:GanttAdvancedDataGridColumn id="ganttColumn" headerText="Gantt" itemRenderer="{ganttItemEditor}" headerRenderer="{ganttHeaderEditor}" minWidth="400"/> <br> <br>这样，就可以在application初始化的时候，在外部对此Column进行设置： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>ganttColumn.startDate = new Date(startTime); <br>ganttColumn.lastDate = new Date(lastTime); <br>ganttColumn.startDate = new Date(startTime); <br>ganttColumn.lastDate = new Date(lastTime); <br> <br>在HeaderRenderer中，在setData方法中，可以获取相应的对象和参数 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>override public function set data(value:Object):void{ <br>super.data = value; <br>var advancedDataGridColumn:GanttAdvancedDataGridColumn <br>= value as GanttAdvancedDataGridColumn; <br>if(advancedDataGridColumn!=null){ <br>if(advancedDataGridColumn.startDate!=null){ <br>startDate = advancedDataGridColumn.startDate; <br>lastDate = advancedDataGridColumn.lastDate; <br>render(); <br>} <br>} <br>} <br>override public function set data(value:Object):void{ <br>super.data = value; <br>var advancedDataGridColumn:GanttAdvancedDataGridColumn <br>= value as GanttAdvancedDataGridColumn; <br>if(advancedDataGridColumn!=null){ <br>    if(advancedDataGridColumn.startDate!=null){ <br>        startDate = advancedDataGridColumn.startDate; <br>        lastDate = advancedDataGridColumn.lastDate; <br>        render(); <br>    } <br>} <br>}         <br> <br>（3）利用labelFunction进行显示数据格式化 <br>比如我想对日期数据进行格式化操作，如下所示： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>private function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String { <br>var dateFormatter:DateFormatter = new DateFormatter(); <br>dateFormatter.formatString = "YYYY-MM-DD HH:NN"; <br>var td:Date = new Date( new Number(item[column.dataField]) ); <br>return dateFormatter.format( td ); <br>} <br>private function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {     <br>var dateFormatter:DateFormatter = new DateFormatter(); <br>dateFormatter.formatString = "YYYY-MM-DD HH:NN"; <br>var td:Date = new Date( new Number(item[column.dataField]) ); <br>return dateFormatter.format( td ); <br>} <br> <br>在mx的datagridcolumn中，就可以引用这个label function <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/> <br><mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/> <br></li><li>            </li><li>                                </li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre>