- 浏览: 24822 次
最新评论
最近工作中遇到的问题,客户要求做这么个东西。还是稍微花了点时间做了个DEMO的,凭记忆回来整理出来,以供以后查阅。
方法其实很简单,就是自己写代码判断用户选的开始的位置和结束的位置,然后把中间的都选中就OK了。但是做起来,确实还是需要小心些的。
简单来说,这个DEMO中有3个List,但是用户会感觉在操作一个List,尤其是在多选的时候。
支持SHIFT选一段,CTRL一个一个选,以及CTRL+A选全部。
不废话,上代码和图~
SelectItemVO.as
================
package
{
// this class is used to set the data of first selection and second selection
public class SelectItemVO
{
public function SelectItemVO()
{
}
private var _listID:String="";
private var _itemIndex:int=-1;
// used to get/set item index
public function get itemIndex():int
{
return _itemIndex;
}
public function set itemIndex(value:int):void
{
_itemIndex=value;
}
// used to get/set list id
public function get listID():String
{
return _listID;
}
public function set listID(value:String):void
{
_listID=value;
}
// used to set value
public function setValue(id:String, index:int):void
{
_listID=id;
_itemIndex=index;
}
public function clean():void
{
_listID="";
_itemIndex=-1;
}
}
}
ListDemo.mxml
===========
flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955"
creationComplete="init(event)"
fontFamily="Verdana"
minHeight="600">
=new Vector.();
for (var i:int=start; i ();
if (doAll || (startItem.listID != LIST3 && endItem.listID != LIST3))
list3.selectedIndices=new Vector.();
break;
case LIST2:
if (doAll)
{
list1.selectedIndex=-1;
list3.selectedIndex=-1;
}
if (doAll || (startItem.listID != LIST1 && endItem.listID != LIST1))
list1.selectedIndices=new Vector.();
if (doAll || (startItem.listID != LIST3 && endItem.listID != LIST3))
list3.selectedIndices=new Vector.();
break;
case LIST3:
if (doAll)
{
list1.selectedIndex=-1;
list2.selectedIndex=-1;
}
if (doAll || (startItem.listID != LIST1 && endItem.listID != LIST1))
list1.selectedIndices=new Vector.();
if (doAll || (startItem.listID != LIST2 && endItem.listID != LIST2))
list2.selectedIndices=new Vector.();
break;
default:
break;
}
}
// handle user's clicking on list item (when list's select item is changing)
protected function changingHandler(event:IndexChangeEvent):void
{
var list:List=event.target as List;
if (isShiftDown) // handle SHIFT - select first
{
handleSHIFTSelect(list);
}
else if (isCtrlDown) // handle CTRL - select second
{
handleCTRLSelect(list);
}
else // handle single clicking, it's normal way in using
{
handleSingleClick(list);
}
}
// method to handle SHIFT - select
private function handleSHIFTSelect(list:List):void
{
// when handle the SHIFT - select, get end item ( second selection of range ) first
endItem.setValue(list.id, list.selectedIndex);
cleanSelection(list);
// No matter select the range in UP-DOWN way or DOWN-UP way, here, change the select style to UP-DOWN
var usedInToEndMethod:int=parseNameToID(startItem.list ID) parseNameToID(endItem.listID) ? startItem.itemIndex : endItem.itemIndex;
// when user selects a range in same list
if (startItem.listID == endItem.listID)
{
var start:int=usedInToEndMethod usedInFromStartMethod ? usedInToEndMethod : usedInFromStartMethod;
selectItemFromTo(list, start, end);
}
// when user selects a range between list 1 and list 2
else if ((startItem.listID == LIST1 && endItem.listID == LIST2) || (startItem.listID == LIST2 && endItem.listID == LIST1))
{
selectFromStart(list2, usedInFromStartMethod);
selectToEnd(list1, usedInToEndMethod);
}
// when user selects a range between list 1 and list 2
else if ((startItem.listID == LIST1 && endItem.listID == LIST3) || (startItem.listID == LIST3 && endItem.listID == LIST1))
{
selectFromStart(list3, usedInFromStartMethod);
selectAllItem(list2);
selectToEnd(list1, usedInToEndMethod);
}
// when user selects a range between list 2 and list 3
else if ((startItem.listID == LIST2 && endItem.listID == LIST3) || (startItem.listID == LIST3 && endItem.listID == LIST2))
{
selectFromStart(list3, usedInFromStartMethod);
selectToEnd(list2, usedInToEndMethod);
}
else
{
// If you have other lists, terrible, try to handle all cases user selects a range from one list to another one... *_*
// So, this is not a good Demo, but anyway, it works~ ^_^
}
}
// used to get list index from a string, actually, if your list is not named in a indexable (XXX1, XXX2 ...) style
// you may need to find a way to make sure which list is first, which one is second and so on.
private function parseNameToID(value:String):Number
{
return Number(value.replace(LIST, ""));
}
// method to handle CTRL - select
private function handleCTRLSelect(list:List):void
{
// do nothing, List will support CTRL - select by default
// but need to set the start item ( first selection of range ), for the using in SHIFT - select
startItem.setValue(list.id, list.selectedIndex);
}
// method to handle single click on list
private function handleSingleClick(list:List):void
{
startItem.clean();
endItem.clean(); // clean end item to make sure all other lists will be cleaned in following method
cleanSelection(list, true);
// set the start item ( first selection of range ), for the using in SHIFT - select
startItem.setValue(list.id, list.selectedIndex);
}
// handle key down
protected override function keyDownHandler(event:KeyboardEvent):void
{
if (!valueSetFlag) // just set the value once when key down, actually, could be removed, this flag
{
isCtrlDown=event.ctrlKey;
isShiftDown=event.shiftKey;
valueSetFlag=true;
}
}
// handle key up
protected override function keyUpHandler(event:KeyboardEvent):void
{
if (valueSetFlag)
{
isCtrlDown=event.ctrlKey;
isShiftDown=event.shiftKey;
valueSetFlag=false;
}
}
]]>
List 1 - Item 1
List 1 - Item 2
List 1 - Item 3
List 1 - Item 4
List 1 - Item 5
List 1 - Item 6
List 1 - Item 7
List 2 - Item 1
List 2 - Item 2
List 2 - Item 3
List 2 - Item 4
List 2 - Item 5
List 2 - Item 6
List 2 - Item 7
List 3 - Item 1
List 3 - Item 2
List 3 - Item 3
List 3 - Item 4
List 3 - Item 5
List 3 - Item 6
List 3 - Item 7
发表评论
-
字符串处理
2012-07-06 09:51 618第一节、字符串查找 1.1题目描述: 给定一个字符 ... -
笔记-正则表达式的2种引擎
2012-07-06 09:44 697正则表达式的引擎分为2种,一种是DFA引擎,一种是NFA引 ... -
常用正则表达式手册
2012-07-06 09:36 599匹配中文字符的正则表达式: [u4e00-u9fa5] ... -
网页换皮肤
2012-07-06 09:29 520... -
后台向前台js传递参数
2012-07-05 20:44 723aspx页面代码 //图片预览效果 function S ... -
基于组件中间件的前端架构
2012-07-03 13:42 738在现在的软件设计上,基本上采用的都是分布式系统,前端尤其突 ... -
基于组件中间件的前端架构
2012-07-03 12:15 595在现在的软件设计上,基本上采用的都是分布式系统,前端尤其突 ... -
Flex做的颜色器
2012-07-02 10:10 461此效果用对象的toString()方法来格式化输出字符串类 ... -
flex LineChart 的demo
2012-07-02 10:10 515... -
flex图片截取保存本地
2012-07-02 10:10 593Alert{font-size:12px;} ... -
FLEX 条形图(柱状图)设置刻度为百分比
2012-07-01 09:29 1070作者原创,如需转载请注明出处:www.krzone.org ... -
谈谈我对未来的想法吧
2012-07-01 09:28 760来总行珠海研发中 ... -
JavaFX Script With Eclipse 入门
2012-07-01 09:28 514最近Java社区最火的就是JavaFX Script的发布 ... -
Linux网络入侵检测软件
2012-07-01 09:28 689本软件是本人的毕业设计"作品"。当年是 ... -
Spring 3.0 整合 iBatis 3 Beta10 配置
2012-07-01 09:28 576弄了好长时间了,上网找各种资料,文档,最后发现Spring ... -
Flex Javascript交互实现代码
2012-06-30 11:13 541Flex Javascript交互实现代码 2010年09月 ... -
我参与的《云计算》项目前台Flex架构
2012-06-30 11:13 509我参与的《云计算》项 ... -
Flex 组成、变量、函数、命名空间
2012-06-30 11:13 576Flex 组成、变量、函数、命名空间 2011年04月13日 ... -
[引用]Ant 在Flex中的应用
2012-06-30 11:13 568[引用]Ant 在Flex中的应用 2011年08月13日 ... -
oracle之物理数据库结构概述(数据文件、重做日志文件,控制文件等各种数据库文件)
2012-01-20 02:25 506oracle之物理数据库结构 ...
相关推荐
从其他网站找的一个Flex 下拉多选 支持ComboBox DropDownList 带有复选框
Flex写的一个combox多选控件,小主一直用着的,暂未发现BUG,请大神多多指教!
支持flex的DateField组件日期多选,帮助我们更好的开发。
Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框
flex 带复选框树 flex多选树 flex三态树
包含容器组件、FLEX布局、九宫格、选项卡、底部导航、滑块组件、图文列表、面板组?件、文本链接、链接组件、图片组件、图标、进度条、按钮、单行文本、多行文本、单选列表、多选列表、开关选择、滑动条、上传组件、...
Kotlin语言实现FlexboxLayout流式布局替换Recycleview实现单选/多选
flex 多选下拉框源代码 已经调试好 能直接用
flex bison使用c++方式实现的例子 flex bison使用c++方式实现的例子
Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格
NULL 博文链接:https://wanglu271991027.iteye.com/blog/1738210
Flex CheckList 多选组建
flex 多选CombBox CheckBox 渲染器 亲测可用
flex 三状态多选 自动分页DataGrid
13个Flex ArcGIS(WebGIS)开发经典例子 (一)ArcGIS.Server.9.3和ArcGIS API for Flex实现基本的地图浏览 1 (二)ArcGIS.Server.9.3和ArcGIS API for Flex实现动态图层和瓦片图层叠加显示 5 (三)ArcGIS.Server....
FLASH-FLEX3.0开发教程中文版(例子源码)
Flex例子Flex例子Flex例子Flex例子Flex例子Flex例子
FLex例子大全FLex例子大全FLex例子大全FLex例子大全FLex例子大全绝对源码
flex中上传与下载的例子 flex中上传与下载的例子
Flex中不用ScrollBar实现滚动效果