熟悉excel的人应该都知道表格中可以将比如标题行/列锁定,使其不滚动,从而便于浏览。flex的datagrid控件也可以实现这样的效果。接下来的例子演示了flex中如何锁定横向滚动datagrid控件的列。demo中name列被锁定
代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
<?
xml version="1.0" encoding="utf-8"
?>
< mx:application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalalign ="middle"
backgroundcolor ="white" >
< mx:datagrid id ="datagrid"
lockedcolumncount ="1"
horizontalscrollpolicy ="on"
width ="300" >
< mx:columns >
< mx:datagridcolumn datafield ="@name" headertext ="name:" />
< mx:datagridcolumn datafield ="@cola" headertext ="column a:" />
< mx:datagridcolumn datafield ="@colb" headertext ="column b:" />
< mx:datagridcolumn datafield ="@colc" headertext ="column c:" />
</ mx:columns >
< mx:dataprovider >
< mx:xmllist >
< item name ="user 1" cola ="1.a" colb ="1.b" colc ="1.c" />
< item name ="user 2" cola ="2.a" colb ="2.b" colc ="2.c" />
< item name ="user 3" cola ="3.a" colb ="3.b" colc ="3.c" />
< item name ="user 4" cola ="4.a" colb ="4.b" colc ="4.c" />
< item name ="user 5" cola ="5.a" colb ="5.b" colc ="5.c" />
< item name ="user 6" cola ="6.a" colb ="6.b" colc ="6.c" />
< item name ="user 7" cola ="7.a" colb ="7.b" colc ="7.c" />
< item name ="user 8" cola ="8.a" colb ="8.b" colc ="8.c" />
</ mx:xmllist >
</ mx:dataprovider >
</ mx:datagrid >
</ mx:application >
< mx:application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalalign ="middle"
backgroundcolor ="white" >
< mx:datagrid id ="datagrid"
lockedcolumncount ="1"
horizontalscrollpolicy ="on"
width ="300" >
< mx:columns >
< mx:datagridcolumn datafield ="@name" headertext ="name:" />
< mx:datagridcolumn datafield ="@cola" headertext ="column a:" />
< mx:datagridcolumn datafield ="@colb" headertext ="column b:" />
< mx:datagridcolumn datafield ="@colc" headertext ="column c:" />
</ mx:columns >
< mx:dataprovider >
< mx:xmllist >
< item name ="user 1" cola ="1.a" colb ="1.b" colc ="1.c" />
< item name ="user 2" cola ="2.a" colb ="2.b" colc ="2.c" />
< item name ="user 3" cola ="3.a" colb ="3.b" colc ="3.c" />
< item name ="user 4" cola ="4.a" colb ="4.b" colc ="4.c" />
< item name ="user 5" cola ="5.a" colb ="5.b" colc ="5.c" />
< item name ="user 6" cola ="6.a" colb ="6.b" colc ="6.c" />
< item name ="user 7" cola ="7.a" colb ="7.b" colc ="7.c" />
< item name ="user 8" cola ="8.a" colb ="8.b" colc ="8.c" />
</ mx:xmllist >
</ mx:dataprovider >
</ mx:datagrid >
</ mx:application >
其中最重要的属性就是lockedcolumncount ,控制锁定列的数