1、新建一个应用文件dataGridTest.mxml,这是主文件
java代码
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
- initialize="init()" width="600" height="600">
- <mx:Script>
- <![CDATA[
- import com.test.StatusIFactory;
- import com.test.CellColorIFactory;
- import mx.rpc.events.ResultEvent;
- import mx.controls.Alert;
- //定义渲染器
- private var itemRender:IFactory = new CellColorIFactory(cellColor);
- private var itemRenderImg:IFactory = new StatusIFactory();
- private var dataXml:XML;
- private function init():void {
- dataXmlService.url = "students.xml";//可改成具体请求方式
- try{
- dataXmlService.send();
- }catch(e:IOError){
- Alert.show("请求出错");
- }
- }
- private function dataXmlToData(evt:ResultEvent):void{
- dataXml = XML(evt.result);
- dataGrid.dataProvider = dataXml.children();
- //使用渲染,使行列显示不同的颜色
- dataGrid.itemRenderer = itemRender;
- grid.dataProvider = dataXml.children();
- //使用渲染,增加显示图片和状态文字
- column.itemRenderer = itemRenderImg;
- }
- //定义渲染器中用到的回调函数
- private function cellColor(dataField:String,data:XML):uint{
- //设置前两页显示颜色
- if((dataField=="col1" || dataField=="col2") && "2107"!=data.@col1.toString()){
- return 0x03f066;
- }
- //设置第八行显示颜色
- if("2107"==data.@col1.toString()){
- return 0x0000FF;
- }
- //设置默认显示颜色
- return 0x000000;
- }
- ]]>
- </mx:Script>
- <mx:HTTPService id="dataXmlService" resultFormat="xml" result="dataXmlToData(event)" />
- <mx:DataGrid id="dataGrid" x="26" y="10" width="543" height="270" fontSize="12" textAlign="center">
- <mx:columns>
- <mx:DataGridColumn headerText="学号" dataField="@col1"/>
- <mx:DataGridColumn headerText="姓名" dataField="@col2"/>
- <mx:DataGridColumn headerText="年龄" dataField="@col3"/>
- <mx:DataGridColumn headerText="爱好" dataField="@col4"/>
- <mx:DataGridColumn headerText="住址" dataField="@col5"/>
- </mx:columns>
- </mx:DataGrid>
- <mx:DataGrid id="grid" x="26" y="288" width="543" height="302" fontSize="12" textAlign="center">
- <mx:columns>
- <mx:DataGridColumn headerText="学号" dataField="@col1" textAlign="left" id="column"/>
- <mx:DataGridColumn headerText="姓名" dataField="@col2"/>
- <mx:DataGridColumn headerText="年龄" dataField="@col3"/>
- <mx:DataGridColumn headerText="爱好" dataField="@col4"/>
- <mx:DataGridColumn headerText="住址" dataField="@col5"/>
- </mx:columns>
- </mx:DataGrid>
- </mx:Application>
2、新建CellColorIFactory.as和CellColorItemRenderer.as文件,这里是通过实现IFactory接口的方式实现,CellColorItemRenderer继承了DataGridItemRenderer,覆写了set data方法,用来设置文本的显示颜色。
- package com.test
- {
- import mx.core.IFactory;
- //必须要实现IFactory接口
- public class CellColorIFactory implements IFactory
- {
- //回调方法
- private var _cellColorFunction:Function ;
- public function CellColorIFactory(f:Function){
- super();
- this._cellColorFunction = f;
- }
- public function newInstance():*{
- //实例化渲染器,实现具体功能
- return new CellColorItemRenderer(_cellColorFunction);
- }
- }
- }
package com.test
{
import mx.core.IFactory;
//必须要实现IFactory接口
public class CellColorIFactory implements IFactory
{
//回调方法
private var _cellColorFunction:Function ;
public function CellColorIFactory(f:Function){
super();
this._cellColorFunction = f;
}
public function newInstance():*{
//实例化渲染器,实现具体功能
return new CellColorItemRenderer(_cellColorFunction);
}
}
}
- package com.test
- {
- import mx.controls.dataGridClasses.DataGridItemRenderer;
- import mx.controls.dataGridClasses.DataGridListData;
- public class CellColorItemRenderer extends DataGridItemRenderer
- {
- //传递回调函数
- private var _cellColorFunction:Function ;
- public function CellColorItemRenderer(f:Function)
- {
- super();
- this._cellColorFunction = f;
- }
- override public function set data(value:Object):void
- {
- if(value != null)
- {
- var data:XML = XML(value);
- super.data = value;
- //调用父类的public function get listData():BaseListData
- var dataField:String = DataGridListData(listData).dataField;
- while(dataField.indexOf("@")!=-1)
- dataField = dataField.replace("@","");
- //改变颜色;两个参数,dataField表示数据列(名称),data表示一行数据
- setStyle("color", this._cellColorFunction.call(this,dataField,data));
- }
- }
- }
- }
package com.test
{
import mx.controls.dataGridClasses.DataGridItemRenderer;
import mx.controls.dataGridClasses.DataGridListData;
public class CellColorItemRenderer extends DataGridItemRenderer
{
//传递回调函数
private var _cellColorFunction:Function ;
public function CellColorItemRenderer(f:Function)
{
super();
this._cellColorFunction = f;
}
override public function set data(value:Object):void
{
if(value != null)
{
var data:XML = XML(value);
super.data = value;
//调用父类的public function get listData():BaseListData
var dataField:String = DataGridListData(listData).dataField;
while(dataField.indexOf("@")!=-1)
dataField = dataField.replace("@","");
//改变颜色;两个参数,dataField表示数据列(名称),data表示一行数据
setStyle("color", this._cellColorFunction.call(this,dataField,data));
}
}
}
}
3、新建StatusIFactory.as和statusItemRenderer.mxml文件,同样是用到了IFactory接口,statusItemRenderer组件重新定义了现实样式,包括添加状态图片和文本。小图片放在工程根目录下的resources文件夹中。
- package com.test
- {
- import mx.core.IFactory;
- //必须要实现IFactory接口
- public class StatusIFactory implements IFactory
- {
- public function StatusIFactory(){
- super();
- }
- public function newInstance():*{
- //实例化渲染器,实现具体功能
- return new statusItemRenderer();
- }
- }
- }
package com.test
{
import mx.core.IFactory;
//必须要实现IFactory接口
public class StatusIFactory implements IFactory
{
public function StatusIFactory(){
super();
}
public function newInstance():*{
//实例化渲染器,实现具体功能
return new statusItemRenderer();
}
}
}
- <?xml version="1.0" encoding="utf-8"?>
- <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0.0" width="100%"
- horizontalAlign="center">
- <mx:Script>
- <![CDATA[
- [Embed(source="../resources/you.png")]
- private static const you:Class;
- [Embed(source="../resources/liang.png")]
- private static const liang:Class;
- [Embed(source="../resources/hao.png")]
- private static const hao:Class;
- [Embed(source="../resources/cha.png")]
- private static const cha:Class;
- private function getImage(data:Object):Object {
- if(data==null) return null;
- if("2101"==data.@col1){return you;}
- if("2102"==data.@col1){return liang;}
- if("2103"==data.@col1){return cha;}
- return hao;
- }
- private function getText(data:Object):String {
- if(data==null) return null;
- if("2101"==data.@col1){return "优";}
- if("2102"==data.@col1){return "良";}
- if("2103"==data.@col1){return "差";}
- return "好";
- }
- ]]>
- </mx:Script>
- <mx:Label id="serial" text="{this.data.@col1}"/>
- <mx:Image id="stateImage" source="{getImage(this.data)}"/>
- <mx:Label id="stateText" text="{getText(this.data)}"/>
- </mx:HBox>
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0.0" width="100%"
horizontalAlign="center">
<mx:Script>
<![CDATA[
[Embed(source="../resources/you.png")]
private static const you:Class;
[Embed(source="../resources/liang.png")]
private static const liang:Class;
[Embed(source="../resources/hao.png")]
private static const hao:Class;
[Embed(source="../resources/cha.png")]
private static const cha:Class;
private function getImage(data:Object):Object {
if(data==null) return null;
if("2101"==data.@col1){return you;}
if("2102"==data.@col1){return liang;}
if("2103"==data.@col1){return cha;}
return hao;
}
private function getText(data:Object):String {
if(data==null) return null;
if("2101"==data.@col1){return "优";}
if("2102"==data.@col1){return "良";}
if("2103"==data.@col1){return "差";}
return "好";
}
]]>
</mx:Script>
<mx:Label id="serial" text="{this.data.@col1}"/>
<mx:Image id="stateImage" source="{getImage(this.data)}"/>
<mx:Label id="stateText" text="{getText(this.data)}"/>
</mx:HBox>
4、例子中用到了
private var itemRender:IFactory = new CellColorIFactory(cellColor);
private var itemRenderImg:IFactory = new StatusIFactory();
的方式定义一个itemRenderer,然后通过引用变量名称;也可以直接在组件中以属性的方式引用(要保证引用的文件路径正确)
<mx:DataGridColumn headerText="学号" dataField="@col1" itemRenderer="statusItemRenderer" textAlign="left" id="column"/>
5、例子的students.xml数据和效果。
- <?xml version="1.0" encoding="UTF-8"?>
- <datas>
- <data col1="2100" col2="张三" col3="20" col4="篮球" col5="北京" />
- <data col1="2101" col2="张四" col3="21" col4="篮球" col5="北京" />
- <data col1="2102" col2="张五" col3="22" col4="篮球" col5="北京" />
- <data col1="2103" col2="张六" col3="20" col4="篮球" col5="北京" />
- <data col1="2104" col2="张七" col3="22" col4="篮球" col5="北京" />
- <data col1="2105" col2="张八" col3="22" col4="篮球" col5="北京" />
- <data col1="2106" col2="李四" col3="20" col4="篮球" col5="北京" />
- <data col1="2107" col2="张大" col3="21" col4="篮球" col5="北京" />
- <data col1="2108" col2="张关" col3="21" col4="篮球" col5="北京" />
- <data col1="2109" col2="张看" col3="20" col4="篮球" col5="北京" />
- </datas>
<?xml version="1.0" encoding="UTF-8"?>
<datas>
<data col1="2100" col2="张三" col3="20" col4="篮球" col5="北京" />
<data col1="2101" col2="张四" col3="21" col4="篮球" col5="北京" />
<data col1="2102" col2="张五" col3="22" col4="篮球" col5="北京" />
<data col1="2103" col2="张六" col3="20" col4="篮球" col5="北京" />
<data col1="2104" col2="张七" col3="22" col4="篮球" col5="北京" />
<data col1="2105" col2="张八" col3="22" col4="篮球" col5="北京" />
<data col1="2106" col2="李四" col3="20" col4="篮球" col5="北京" />
<data col1="2107" col2="张大" col3="21" col4="篮球" col5="北京" />
<data col1="2108" col2="张关" col3="21" col4="篮球" col5="北京" />
<data col1="2109" col2="张看" col3="20" col4="篮球" col5="北京" />
</datas>