Flex中锁住横向滚动DataGrid控件列的例子
By Minidxer | July 23, 2008
Excel熟悉的人应该都知道表格中可以将比如标题行/列锁定，使其不滚动，从而便于浏览。Flex的DataGrid控件也可以实现这样的效果。接下来的例子演示了Flex中如何锁定横向滚动DataGrid控件的列。Demo中Name列被锁定。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码(或点击这里察看)：
Download: main.mxml
- <?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>
代码：Peter deHaan 翻译/整理/编译：minidxer
Topics:
Flex |
Tags: DataGrid, lockedColumnCount