定义Flex DataGrid组件样式外观方法指导-vue用ref修改css样式

在学习Flex的过程中，你可定会用到Flex DataGrid组件，这里和大家分享一下如何定义Flex DataGrid组件样式外观，在实际程序开发中，有时候需要对Flex DataGrid组件可视化的外观进行修改，以满足功能需要。

定义Flex DataGrid组件样式外观

在实际程序开发中，有时候需要对Flex DataGrid组件可视化的外观进行修改，以满足功能需要。例如，修改数据显示格式、修改DataGrid的样式和外观、自定义单元格等。

修改数据显示格式

当Flex DataGrid组件显示出数据后，有些数据格式可能不是我们所需要的。这个时候，就要修改数据格式，把数据修改成有意义的，可以使读者更容易读懂的格式。比如货币格式前面要加美元符号或者人民币符号，有时候从数据库中读出的是0或1的布尔值，再比如电话号码等。

下面就以15.2.1节的实例为例，把Phone列修改成前面有区号的电话号码，步骤如下。

◆修改GetData1函数，在绑定数据源的语句之后，增加格式化语句，增加的代码如下所示：

//格式化数据  
dg1.getColumnAt(1).labelFunction=phoneFormatter;

◆phoneFormatter是格式化数据的函数，把电话号码前面加上区号“0755”，代码如下所示：

/*********************************  
*格式化电话号码  
**/  
privatefunctionphoneFormatter(item:Object):String  
{  
return"0755-"+item.Phone;  
}

再次编译代码并运行。

自定义Flex DataGrid组件的标题

在显示完Flex DataGrid组件的数据之后，有时候列的标题是数据库中已经定义好的列名称，对于用户来说，不容易读懂，需要重新定义，那就需要自定义Flex DataGrid组件的标题了。自定义标题要用到的类是HeaderRenderer，HeaderRenderer类在类dataGridClasses中。下面就利用HeaderRenderer类来实现自定义标题的功能。

还是以15.2.1节的实例为基础，加一些代码。在GetData1函数中加入如下代码：

//自定义标题  
vardgc0:DataGridColumn=dg1.getColumnAt(0);  
dgc0.headerText="姓名";  
vardgc1:DataGridColumn=dg1.getColumnAt(1);  
dgc1.headerText="电话";  
vardgc3:DataGridColumn=dg1.getColumnAt(3);  
dgc3.headerText="软件名称";

代码的作用是把第一行的标题改成“姓名”，第二行的标题改为“电话”，第三行的标题改为“软件名称”。

【编辑推荐】