flex中datagrid列滚动锁定

最新推荐文章于 2015-09-01 14:38:24 发布

最新推荐文章于 2015-09-01 14:38:24 发布 · 130 阅读

本文介绍如何使用Flex的DataGrid控件实现固定标题行或列的功能。通过设置lockedColumnCount属性，可以确保指定数量的列在水平滚动时不随其他列一起滚动，方便用户浏览表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

熟悉excel的人应该都知道表格中可以将比如标题行/列锁定，使其不滚动，从而便于浏览。flex的datagrid控件也可以实现这样的效果。接下来的例子演示了flex中如何锁定横向滚动datagrid控件的列。demo中name列被锁定

代码

<?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>

其中最重要的属性就是lockedcolumncount ，控制锁定列的数