Flex中对表格中某列的值进行数字格式化并求百分比

左手的ㄟ右手 2022-08-13 11:52 157阅读 0赞

1、问题背景

一般的，需要对表格中某列的数值进行格式化，对该数值乘以100，并保留两位小数，添加“%”

2、实现实例

**\[plain\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <?xml version="1.0" encoding="utf-8"?>  
2.  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                 xmlns:s="library://ns.adobe.com/flex/spark"   
4.                 xmlns:mx="library://ns.adobe.com/flex/mx"  
5.                 width="100%" height="100%" fontSize="12"  
6.                 fontFamily="微软雅黑">  
7.      <s:layout>  
8.          <s:BasicLayout/>  
9.      </s:layout>  
10.     <fx:Script>  
11.         <!\[CDATA\[  
12.             import mx.collections.ArrayCollection;  
13.             import mx.events.FlexEvent;  
14.   
15.             \[Bindable\]  
16.             //表格数据绑定  
17.             private var gridArray:ArrayCollection = new ArrayCollection(\[  
18.                 \{week:"星期一",apple:"3676",rate:"0.7868"\},  
19.                 \{week:"星期二",apple:"4534",rate:"0.65454"\},  
20.                 \{week:"星期三",apple:"6758",rate:"0.876454"\},  
21.                 \{week:"星期四",apple:"9808",rate:"0.34224"\},  
22.                 \{week:"星期五",apple:"6567",rate:"0.9876523"\},  
23.                 \{week:"星期六",apple:"9000",rate:"0.566777"\},  
24.                 \{week:"星期日",apple:"4533",rate:"0.988787"\}  
25.             \]);  
26.               
27.             /\*\*  
28.              \* 对表格中的比率进行格式化  
29.              \*/  
30.             private function formatDataGrid(item:Object,column:DataGridColumn):String  
31.             \{  
32.                 var tempData:Number = item.rate\*100;  
33.                 var data:String = dataFormatter.format(tempData);  
34.                 return data+"%";  
35.             \}  
36.               
37.         \]\]>  
38.     </fx:Script>  
39.     <fx:Declarations>  
40.           
41.         <mx:NumberFormatter id="dataFormatter" precision="2" rounding="up"/>  
42.     </fx:Declarations>  
43.       
44.     <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="20"  
45.              paddingTop="10" horizontalAlign="center">  
46.         <mx:DataGrid id="dataGrid" width="100%" height="90%" dataProvider="\{gridArray\}" textAlign="center">  
47.             <mx:columns>  
48.                 <mx:DataGridColumn headerText="星期" dataField="week"/>  
49.                 <mx:DataGridColumn headerText="苹果" dataField="apple"/>  
50.                 <mx:DataGridColumn headerText="比率" dataField="rate" labelFunction="formatDataGrid"/>  
51.             </mx:columns>  
52.         </mx:DataGrid>  
53.           
54.     </mx:VBox>  
55. </s:Application>

（1）将小数乘以100

var tempData:Number = item.rate\*100;

（2）对数值格式化，保留两位小数

var data:String = dataFormatter.format(tempData);

（3）添加百分号

return data+"%";

3、实现结果

![Center][]

[view plain]: http://blog.csdn.net/you23hai45/article/details/40325119#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/490564
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/490564/fork
[Center]: /images/20220810/a81fcecc410f415e92481072709122ce.png