Flex中DataGrid固定列宽和按百分比设置列宽

2010

6-3

很少写Flex相关的东西，今天遇到了这个问题，想了很多办法，也查了百度，都没有得到比较正确的办法。
下面是解决的办法，但不知道有没有更简单的办法就是了，俺只是业余摆弄一下Flex做一些AIR小工具。

首先是一段DataGrid相关实例代码：

<mx:DataGrid id="dataComp" dataProvider="{resultList}" width="100%" height="100%" sortableColumns="false" selectable="false"
  resizableColumns="false" draggableColumns="false" resize="dataCompResizeHandle()">
  <mx:columns>
    <mx:DataGridColumn dataField="line" headerText="行数" textAlign="center" width="40"/>
    <mx:DataGridColumn dataField="text" headerText="匹配文本" paddingLeft="5" paddingRight="5"
      itemRenderer="mx.controls.Label"/>
    <mx:DataGridColumn dataField="path1" headerText="路径" paddingLeft="5" paddingRight="5"
      itemRenderer="mx.controls.Label"/>
    <mx:DataGridColumn dataField="times" headerText="次数" textAlign="center" width="40"/>
  </mx:columns>
</mx:DataGrid>

侦听resize事件，当得到resize之后做这样的操作：

//数据对象重设尺寸处理
private var widthList:Array = [40,0.7,0.3,40];
private function dataCompResizeHandle():void{
  dataComp.validateNow();
  var value:Number,display:DataGridColumn,i:int;
  var list:Array = dataComp.columns;
  var length:int = list.length;
  var dataWidth:int = 0;
  for(i = 0; i < length; i ++){
    display = list[i];
    dataWidth += display.width;
  }
  for(i = 0; i < length; i ++){
    display = list[i];
    value = widthList[i];
    if(value > 1){
      dataWidth -= value;
      display.width = int(value);
    }
  }
  for(i = 0; i < length; i ++){
    display = list[i];
    value = widthList[i];
    if(value <= 1) display.width = int(dataWidth * value);
  }
}

要点注释：
1、得到resize之后一定要dataComp.validateNow();，这样取出来的总列宽才是正确的！
2、第一个for循环在计算总列宽，直接取dataComp的宽度是不对的，它会包含滚动条的宽度，我也不知道有没有什么办法可以直接取到总列宽，因此我采用了for循环去累加列宽；
3、第二个for循环在设置widthList中是在设置需要固定列宽的子项，然后从总列宽中减去；
4、第三个for循环在设置widthList中是按百分比设置子项列宽。

评论Feed: http://www.xiaos8.com/feed.asp?q=comment&id=571

怎么一页才显示这么点文章？点快速检索查看更多的文章: 显示全部 | 评论: 1 | 排序 | 观看的: 820

游客*

[ 2010-07-09 14:27:51 ]

可以直接设置百分比列宽！
<mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name" width="0.5" />
<mx:DataGridColumn dataField="phone" headerText="Phone" width="0.2"/>
<mx:DataGridColumn dataField="email" headerText="Email" width="0.3"/>
</mx:columns>
</mx:DataGrid>