Flex 垂直数据网格 [英] Flex Vertical Datagrid
问题描述
我可以有一个垂直显示数据而不是水平显示数据的数据网格吗?
Can i have a datagrid that displays data vertically instead of horizontally ?
例如,如果这是我的数据提供者:
for example, if this is my dataprovider:
array('firstname':'John','lastname':'Doe'),
array('firstname':'Jack','lastname':'Jill')
我希望数据显示如下:
Fields Value1 Value2
Firstname John Jack
Lastname Doe Jill
等等......实现这一目标的最佳方法是什么......如果我必须扩展数据网格组件,请解释如何......
and so on .... whats the best way to achieve this .. If i have to extend the datagrid component, please explain how ..
推荐答案
所以这是一个黑客...但事实证明你不能轻易改变火花数据网格的流程.据我所知,您需要覆盖其中的几乎每个组件,这需要很长时间.DataGrid 使用它自己的布局,它似乎非常适合 1 行 = 1 条数据的主题.
So this is a hack... but it turns out you can't easily change the flow of the spark datagrid. From what I can tell, you'd need to override just about every component inside it and it'd take a long time. The DataGrid uses its own layout and it seems very set on the subject of 1 row = 1 piece of data.
所以……开始破解:
<s:DataGrid rotation="270">
<s:columns>
<s:ArrayList>
<s:GridColumn itemRenderer="unrotate" headerRenderer="headerUnrotate"/>
<s:GridColumn itemRenderer="unrotate" headerRenderer="headerUnrotate"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
好吧……我做了什么?我只是旋转整个数据网格.我如何解决它,这样我们就不必倾斜你的头?我在 itemrenderer 中取消旋转每一列.HOLY HACK 蝙蝠侠.
Okay... what did I do? I just rotate the whole datagrid. How do I fix it so we don't have to tilt your head? I un-rotate each column in the itemrenderer. HOLY HACK batman.
这是取消旋转的项目渲染器:
here's the item renderer unrotate:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:Label id="lblData" top="9" left="7" rotation="90"/>
</s:GridItemRenderer>
标题代码类似,只需旋转 90 即可回到我们开始的地方.我知道这个解决方案远非完美,但它是我能想到的最好的而不完全弄乱 DataGrid 类
The header code is similar, just rotate 90 to get back to where we started. I know this solution is far from perfect but it's the best I could think of without completely messing with the DataGrid class
您可能还需要覆盖皮肤以提供更宽的标题...实际上是一个更高的标题,因为我们旋转了 270 度.除此之外,它实际上应该可以正常工作......
You probably also need to override the skin to provide a WIDER header... which is actually a TALLER header since we're rotated 270 degrees. Other then that it should actually work okay...
这篇关于Flex 垂直数据网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!