AI 助理
备案控制台
开发者社区 大数据 文章 正文

Flex中怎么给表格中的滚动栏定位

2017-10-19 922
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

1、问题背景

       假设表格中的字段过多，会出现滚动栏，在将滚动栏滚到一定的位置时，又一次刷新表格。滚动栏会回到原处，原来查看的字段还得继续滚动，才干查看到。


2、实现实例

<?



xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="initHandler(event)"
			   width="100%" height="100%">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			[Bindable]
			//表格数据绑定
			private var gridArray:ArrayCollection = new ArrayCollection([
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
				 Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"},
				{Jan:"5678",Feb:"7890",Mar:"3454",Apr:"4565",May:"6756",Jun:"5656",Jul:"7867",Aug:"8990",Sep:"5676",Oct:"4655",Nov:"6778",Dec:"8909",
					Jan1:"3344",Feb1:"5676",Mar1:"7898",Apr1:"9089",May1:"9009",Jun1:"5675",Jul1:"3433",Aug1:"4455",Sep1:"6676",Oct1:"7867",Nov1:"4556",Dec1:"8656"}
			]);

			/**
			 * 初始化函数
			 */
			protected function initHandler(event:FlexEvent):void
			{
				
			}

			/**
			 * 刷新button函数
			 */
			protected function refresh_clickHandler(event:MouseEvent):void
			{
				var hx:Object = hsb.left;
				var hy:Number = hsb.y;
				
				//var dx:Number = dataGrid.contentMouseX;
				//var dy:Number = dataGrid.contentMouseY;
				//Alert.show("hx："+hx+"\n"+"hy: "+hy + "\n" + "dx: " + dx + "\n" + "dy: " + dy);
				Alert.show("hx："+hx+"\n"+"hy: "+hy);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（比如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="20" 
			 paddingTop="10" horizontalAlign="center">
		<mx:HBox width="100%" height="30">
			<s:Label width="100%"/>
			<s:Button id="refresh" label="刷新" click="refresh_clickHandler(event)"/>
		</mx:HBox>
		<mx:DataGrid width="1350" height="90%" id="dataGrid" dataProvider="{gridArray}" horizontalScrollPolicy="on" textAlign="center">
			<mx:columns>
				<mx:DataGridColumn headerText="2013年01月" dataField="Jan" width="200"/>
				<mx:DataGridColumn headerText="2013年02月" dataField="Feb" width="200"/>
				<mx:DataGridColumn headerText="2013年03月" dataField="Mar" width="200"/>
				<mx:DataGridColumn headerText="2013年04月" dataField="Apr" width="200"/>
				<mx:DataGridColumn headerText="2013年05月" dataField="May" width="200"/>
				<mx:DataGridColumn headerText="2013年06月" dataField="Jun" width="200"/>
				<mx:DataGridColumn headerText="2013年07月" dataField="Jul" width="200"/>
				<mx:DataGridColumn headerText="2013年08月" dataField="Aug" width="200"/>
				<mx:DataGridColumn headerText="2013年09月" dataField="Sep" width="200"/>
				<mx:DataGridColumn headerText="2013年10月" dataField="Oct" width="200"/>
				<mx:DataGridColumn headerText="2013年11月" dataField="Nov" width="200"/>
				<mx:DataGridColumn headerText="2013年12月" dataField="Dec" width="200"/>
				<mx:DataGridColumn headerText="2014年01月" dataField="Jan1" width="200"/>
				<mx:DataGridColumn headerText="2014年02月" dataField="Feb1" width="200"/>
				<mx:DataGridColumn headerText="2014年03月" dataField="Mar1" width="200"/>
				<mx:DataGridColumn headerText="2014年04月" dataField="Apr1" width="200"/>
				<mx:DataGridColumn headerText="2014年05月" dataField="May1" width="200"/>
				<mx:DataGridColumn headerText="2014年06月" dataField="Jun1" width="200"/>
				<mx:DataGridColumn headerText="2014年07月" dataField="Jul1" width="200"/>
				<mx:DataGridColumn headerText="2014年08月" dataField="Aug1" width="200"/>
				<mx:DataGridColumn headerText="2014年09月" dataField="Sep1" width="200"/>
				<mx:DataGridColumn headerText="2014年10月" dataField="Oct1" width="200"/>
				<mx:DataGridColumn headerText="2014年11月" dataField="Nov1" width="200"/>
				<mx:DataGridColumn headerText="2014年12月" dataField="Dec1" width="200"/>
			</mx:columns>
		</mx:DataGrid>
		<!--
		<s:HScrollBar id="hsb" width="100%" viewport="{dataGrid}"/>
		-->
		
		<s:HScrollBar id="hsb" width="100%"/>
		
	</mx:VBox>
</s:Application>

3、实现结果






本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5165859.html，如需转载请自行联系原作者

文章标签：
分布式计算
Spark
数据格式
XML
技术mix呢
目录
相关文章
2025「AI安全」全球攻防赛小编
|
5天前
|
存储 人工智能 安全
AI 越智能，数据越危险？
阿里云提供AI全栈安全能力，为客户构建全链路数据保护体系，让企业敢用、能用、放心用
2025「AI安全」全球攻防赛小编
1300 10
阿里云万网官方
|
8天前
|
域名解析 人工智能
【实操攻略】手把手教学，免费领取.CN域名
即日起至2025年12月31日，购买万小智AI建站或云·企业官网，每单可免费领1个.CN域名首年！跟我了解领取攻略吧~
阿里云万网官方
1004 9
acw_ecd20250213
|
7天前
|
数据采集 人工智能 自然语言处理
3分钟采集134篇AI文章！深度解析如何通过云无影AgentBay实现25倍并发 + LlamaIndex智能推荐
结合阿里云无影 AgentBay 云端并发采集与 LlamaIndex 智能分析，3分钟高效抓取134篇 AI Agent 文章，实现 AI 推荐、智能问答与知识沉淀，打造从数据获取到价值提炼的完整闭环。
acw_ecd20250213
448 93
HelloYj
|
1天前
|
开发者
「玩透ESA」ESA启用和加速-ER在加速场景中的应用
本文介绍三种配置方法：通过“A鉴权”模板创建函数并设置触发器路由；在ESA上配置回源302跟随；以及自定义响应头。每步均配有详细截图指引，帮助开发者快速完成相关功能设置，提升服务安全性与灵活性。
HelloYj
286 2
Promise微笑
|
7天前
|
SQL 人工智能 自然语言处理
Geo优化SOP标准化：于磊老师的“人性化Geo”体系如何助力企业获客提效46%
随着生成式AI的普及，Geo优化（Generative Engine Optimization）已成为企业获客的新战场。然而，缺乏标准化流程（Geo优化sop）导致优化效果参差不齐。本文将深入探讨Geo专家于磊老师提出的“人性化Geo”优化体系，并展示Geo优化sop标准化如何帮助企业实现获客效率提升46%的惊人效果，为企业在AI时代构建稳定的流量护城河。
Promise微笑
406 156
Geo优化SOP标准化：于磊老师的“人性化Geo”体系如何助力企业获客提效46%
2025「AI安全」全球攻防赛小编
|
云安全 人工智能 安全
双十一狂欢来临：云安全爆款产品，新用户低至3折
11.1-11.30限时抢购
2025「AI安全」全球攻防赛小编
1462 2
双十一狂欢来临：云安全爆款产品，新用户低至3折
Thomasyoung
|
7天前
|
数据采集 缓存 数据可视化
Android 无侵入式数据采集：从手动埋点到字节码插桩的演进之路
本文深入探讨Android无侵入式埋点技术，通过AOP与字节码插桩（如ASM）实现数据采集自动化，彻底解耦业务代码与埋点逻辑。涵盖页面浏览、点击事件自动追踪及注解驱动的半自动化方案，提升数据质量与研发效率，助力团队迈向高效、稳定的智能化埋点体系。（238字）
Thomasyoung
311 158

热门文章

最新文章

  • 1
    中文大模型体验测评系列（一）
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——1.4 Cadence SPB 16.6的启动　
  • 3
    真正实现性能可预期的ECS实例（突发性能实例t5）
  • 4
    百度网盘搜索引擎
  • 5
    ModelScope一键部署模型：新手村实操FAQ篇
  • 6
    从校招生到核心架构师，支付宝研究员李俊奎谈如何成为一名优秀的程序员
  • 7
    AliOS Things+阿里云 10分钟搭建智慧农业解决方案
  • 8
    想在Daydream View上看成人内容，GameLink为你准备好一切
  • 9
    上云就上阿里云背后：云计算已成为新旧动能转换关键
  • 10
    详解 JSON 和 JSONP
  • 1
    阿里云服务器优惠购买方法及自定义购买详细流程，新手入门必看
    53
  • 2
    阿里云云服务器ECS：安全、稳定、购买灵活、低成本
    68
  • 3
    Spring Boot 3.0 vs. 2.0
    104
  • 4
    优雅处理空指针：Java Optional深度解析
    43
  • 5
    Java Stream API：告别繁琐循环，拥抱函数式编程
    32
  • 6
    掌握Java Stream API：告别繁琐循环，拥抱函数式编程
    143
  • 7
    优雅处理空值：Java Optional深度实践
    174
  • 8
    Java记录类：告别样板代码的简洁之道
    24
  • 9
    掌握Java Stream API：告别繁琐循环，拥抱高效编程
    26
  • 10
    突破异步困境：巧用Promise.all()优化前端性能
    152

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、