Flex DataGrid数据的多种显示方式

本文转载自：http://blog.csdn.net/liyong1115/article/details/2538238 

 

Flex DataGrid单元格显示数据有多种方式。

1.默认的是截取模式，就是对于显示不下的内容进行自动截取，会被下一列所遮盖。看下图：

2. 但是有时候我们需要能够方便的显示所有内容，但又不希望这一列变得很宽。有一个方法就是自动隐藏该单元的内容，对于数据量大的自动在后面加...，当鼠标移动到该单元格上时，能够以ToolTip的形式完全显示该单元的内容，这个我们可以采用将Label作为该列的itemRenderer办法，具体效果如下：

3. 有时候我们需要DataGrid的每行内容能够显示全所有的内容，如果该列的内容比较多，那么我们希望能够自动换行显示在该列中。其实很简单，我们可以利用DataGridColumn的wordWrap属性，设为true之后的效果如下

效果2的代码如下：实际上只要设定itemRenderer="mx.controls.Label"就可以了

   <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" itemRenderer="mx.controls.Label"/> 

view plaincopy to clipboardprint?

1. public  function getDataGridColumn(columns:Array):Array{    
2.   
3.            var dataGridColumns:Array=new Array();   
4.   
5.            for(var i:int;i<columns.length;i++){   
6.   
7.                  var item:Object=columns[i];                                        
8.   
9.                  var column:DataGridColumn=new DataGridColumn();   
10.   
11.                  var itemRenderer:DataGridCell=new DataGridCell();  
12.   
13.                  itemRenderer.dataField=item.columnName;  
14.   
15.                  column.dataField=item.columnName;   
16.   
17.                  column.headerText=item.headerText;   
18.   
19.               
20.   
21.                 <font color="#0000ff"> column.itemRenderer=new ClassFactory(Label);  
22.   
23.                // column.wordWrap=true;  
24. </font>  
25.                  column.width=item.width;                              
26.   
27.                  dataGridColumns.push(column);            }    
28.   
29.    return dataGridColumns;  
30.   
31.   }   
32. <span>效果3的代码如下：实际上只要设定wordWrap="true"就可以了</span>   

public function getDataGridColumn(columns:Array):Array{ var dataGridColumns:Array=new Array(); for(var i:int;i<columns.length;i++){ var item:Object=columns[i]; var column:DataGridColumn=new DataGridColumn(); var itemRenderer:DataGridCell=new DataGridCell(); itemRenderer.dataField=item.columnName; column.dataField=item.columnName; column.headerText=item.headerText; <font color="#0000ff"> column.itemRenderer=new ClassFactory(Label); // column.wordWrap=true;</font> column.width=item.width; dataGridColumns.push(column); } return dataGridColumns; } <span>效果3的代码如下：实际上只要设定wordWrap="true"就可以了</span>

 

view plaincopy to clipboardprint?

1. <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">   
2.   
3.         <mx:columns>   
4.   
5.   
6.   
7.             <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" <font color="#0000ff">wordWrap="true"</font> />   
8.   
9.   
10.   
11.             <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />   
12.   
13.   
14.   
15.         </mx:columns>   
16.   
17.   
18.   
19.     </mx:DataGrid>