Flex DataGrid数据的多种显示方式

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" />  

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; 

            

                 column.itemRenderer=new ClassFactory(Label);

               // column.wordWrap=true;

                 column.width=item.width;                            

                 dataGridColumns.push(column);            }  

   return dataGridColumns;

  } 
效果3的代码如下:实际上只要设定wordWrap="true"就可以了 

 

<mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%"> 

        <mx:columns> 



            <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" wordWrap="true" /> 



            <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" /> 



        </mx:columns> 



    </mx:DataGrid>



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值