PLOST

在用flex做一个股票版的演示，避免自己写太多的代码，就使用AdvancedDataGrid好了。

有些数据需要显示红色，有些数据需要显示绿色，当然了，这是股价。而有些数据不齐全，需要计算出来，比如有现价和昨收，而没有涨跌幅，这个需要使用现价和昨收计算出来。

1.根据数据显示红绿的方法：
在AdvancedDataGrid中指定一个styleFunction=”colStyle”
然后在actionscript段中实现这个colStyle：

private function colStyle(data:Object, col:AdvancedDataGridColumn):Object
{
var diff:Number = Number(data[col.dataField]) - Number(data["last"]);
//计算该列的数据与昨收的价差
if (diff < 0)
{
return {color:”green”}; //比昨收低，返回绿色
}
else
{
return {color:”red”};   //比昨收高，返回红色
}
}

当然，这仅是个简单的示例，还有不少细节需要完善的。

2.对于dataProvider里面没有的数据，比如涨跌额和涨跌幅，则使用AdvancedDataGridRendererProvider进行渲染

在AdvancedDataGrid的AdvancedDataGridColumn指定两列：

<mx:AdvancedDataGridColumn headerText=”涨跌” width=”64″ id=”change” />
<mx:AdvancedDataGridColumn headerText=”%”  width=”54″ id=”ratio” />

id分别是change和ratio.

然后在AdvancdeDataGrid中指令两个RenderProvider：

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider column=”{ratio}” columnSpan=”1″

renderer=”RatioRender” />
<mx:AdvancedDataGridRendererProvider column=”{change}” columnSpan=”1″

renderer=”ChangeRenderer”/>
</mx:rendererProviders>

分别实现RatioRender和ChangeRenderer

ChangeRenderer.mxml：

<?xml version=”1.0″?>
<mx:Label xmlns:mx=”http://www.adobe.com/2006/mxml” textAlign=”center”>
<mx:Script>
<![CDATA[

override public function set data(value:Object):void
{
var diff:Number;
if (Math.abs(Number(value["now"])) < 0.001) diff = 0;
else diff = Number(value["now"]) - Number(value["last"]); //计算价差
if (Math.abs(diff) < 0.001)  //如果差距小于1/10分，就用黑色
{
setStyle(”color”, “black”);
}
else if (diff < 0)
{
setStyle(”color”, “green”);
}
else
{
setStyle(”color”, “red”);
}
text = diff.toFixed(2);          //设置显示内容,并限制小数点位数
setStyle(”textAlign”, “right”);  //右对齐
}

]]>
</mx:Script>

</mx:Label>

RatioRender.mxml也类似。

其余红绿的显示实际上也可以用2的方法来显示，只不过，针对不同的列，由于不能把列的信息传进这个Renderer里面，因此需要每个列单独写一个Renderer类，所以在内容可以使用dataProvider的列中，建议还是使用1的方法。