[英]Flex3 Datagrid : custom rows on a flag
我正在使用具有三列的mx datagrid。 我的数据提供者是一个具有item对象的itemItem集合。 项目对象具有标志字段“ isValid”。 满足条件
item==null || item.isValid = false
我希望整个行看起来像一个单元格(合并该行的列)并显示标签。 这是我的网格。
<mx:DataGrid id="grid" dataProvider="{itemList}">
<mx:columns>
<mx:ArrayList>
<mx:GridColumn dataField="Artist" headerText="Artist"/>
<mx:GridColumn dataField="Album" headerText="Album"/>
<mx:GridColumn dataField="Year" headerText="Year"/>
</mx:ArrayList>
</mx:columns>
</mx:DataGrid>
有什么想法怎么做? 在SO上找不到很多东西。 提前致谢。
模仿3列合并的唯一方法是使用项目渲染器。
package
{
public class Item
{
public var Artist:String;
public var Album:String;
public var Year:String;
public var isValid:Boolean;
public function Item(artist:String, album:String, year:String, isValid:Boolean = true)
{
this.Artist = artist;
this.Album = album;
this.Year = year;
this.isValid = isValid;
}
}
}
出于某种原因,您的代码未在actionscript3上编译,我想您从未发布过版本,但我认为这应该可行。
<mx:DataGrid id="grid" dataProvider="{itemList}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn id="artist" dataField="Artist" headerText="Artist"/>
<mx:DataGridColumn id="album" dataField="Album" headerText="Album"/>
<mx:DataGridColumn id="year" dataField="Year" headerText="Year"/>
</mx:columns>
</mx:DataGrid>
专辑/年份渲染器:
package
{
import mx.containers.HBox;
import mx.controls.Label;
import mx.controls.listClasses.IListItemRenderer;
public class AlbumYearItemRenderer extends HBox implements IListItemRenderer
{
public var dataField:String;
private var labelComponent:Label;
private var _itemChanged:Boolean;
private var _data:Item;
override public function set data(data:Object):void
{
super.data = data;
_data = data as Item;
_itemChanged = true;
}
protected override function createChildren():void
{
super.createChildren();
labelComponent = new Label();
removeAllChildren();
addChild(labelComponent);
}
protected override function commitProperties():void
{
super.commitProperties();
if(_itemChanged)
{
_itemChanged = false;
if((_data as Item).isValid)
{
labelComponent.text = _data[dataField];
}
}
}
}
}
艺术家渲染器:
package
{
import flash.display.BitmapData;
import flash.text.TextField;
import mx.containers.Canvas;
import mx.controls.Label;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
public class ArtistRenderer extends Canvas implements IListItemRenderer
{
private var c:UIComponent;
private var labelField:Label;
private var textField:TextField;
private var _itemChanged:Boolean;
private var _data:Item;
private var labelImage:BitmapData;
override public function set data(data:Object):void
{
super.data = data;
_data = data as Item;
_itemChanged = true;
}
protected override function createChildren():void
{
super.createChildren();
labelField = new Label();
textField = new TextField();
c = new UIComponent();
removeAllChildren();
}
protected override function commitProperties():void
{
super.commitProperties();
if(_itemChanged)
{
_itemChanged = false;
if(_data.isValid)
{
labelField.text = _data.Artist;
addChild(labelField);
}
else
{
textField.text = _data.Artist;
textField.width = 300;
labelImage = new BitmapData(textField.width, textField.height, true, 0x000000ff);
labelImage.draw(textField);
}
}
}
protected override function measure():void
{
super.measure();
if(!_data.isValid && labelImage != null)
{
graphics.beginBitmapFill(labelImage);
graphics.drawRect(0, 0, textField.width, textField.height);
graphics.endFill();
}
}
}
}
以及我填充网格的方式:
protected function init():void
{
var rend1:ClassFactory = new ClassFactory(ArtistRenderer);
artist.itemRenderer = rend1;
var rend2:ClassFactory = new ClassFactory(AlbumYearItemRenderer);
rend2.properties = {dataField: album.dataField};
album.itemRenderer = rend2;
var rend3:ClassFactory = new ClassFactory(AlbumYearItemRenderer);
rend3.properties = {dataField: year.dataField};
year.itemRenderer = rend3;
itemList.addItem(new Item("artist1", "album1", "year1"));
itemList.addItem(new Item("artist1", "album2", "year1"));
itemList.addItem(new Item("artist2......................INVALID!", "album1", "year1", false));
itemList.addItem(new Item("artist2", "album1", "year2"));
}
注意:Artist渲染器使用“魔术”数字300来确定textField
的宽度,应使用实际DataGrid
的宽度来传递/更新该值,以使其扩展到整个网格的宽度。 在无效项目的艺术家textField下也可以看到列边框。 您应该禁用边框或在textField
下绘制一个可能是白色的正方形,但这是textField
的工作,我相信您将能够处理这些问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.