- 浏览: 16863 次
最新评论
最近工作中遇到的问题,客户要求做这么个东西。还是稍微花了点时间做了个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;
}
}
]]>
height="100%"
horizontalCenter="0"
verticalCenter="0"
horizontalAlign="center"
verticalAlign="middle">
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:52 683关键字 (keywords):大规模 字符串 匹配 远程 ... -
java 使用正则来过滤字符串中的特殊字符
2012-07-06 09:45 992Pattern pattern1 = Pattern.co ... -
正则表达式(初识笔记)
2012-07-06 09:38 654............................. ... -
ps画个矩形框,如何设置线宽
2012-07-06 09:30 1881i am now in university(HIT@We ... -
父页面iframe自适应子页面高度
2012-07-05 20:45 1369父页面有table,有tr,td。td中有iframe。页 ... -
ADF中组件无法显示问题
2012-07-03 13:44 806在ADF开发过程中,偶尔会遇到一些组件甚至页面无法显示到问 ... -
Flex 4 设置背景图片 Canvas backgroundImage BitmapFill fillMode
2012-07-02 12:45 974Flex 3中Canvas是可以设置backgroundI ... -
Flex中本地图片上传前的预览
2012-07-02 12:45 784height="345" h ... -
Flex Panel 拖动效果例子
2012-07-02 12:45 6282010-08-06 今天在flex下尝试了下panel ... -
Ext 4 概述(六)之Grid
2012-07-01 10:07 577这次升级Ext 4全部 ... -
也谈jQuery之学习
2012-07-01 10:07 675由于之前一直是做 ... -
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
2012-07-01 10:07 783这段时间做个项目 ... -
深度剖析WinPcap之(十)――数据包的内核过滤(13)
2012-07-01 10:07 1398数据包到达网络接 ... -
Flash Builder 4-找不到所需的 Adobe Flash Player
2012-07-01 10:07 663比较懒,比较少上csdn的,如果发现留言给我没有回复,望见 ... -
Flex组件:Style的使用
2012-06-30 16:32 704Flex组件:Style的使用 2010 ... -
Flex中Bindable的原理
2012-06-30 16:32 596Flex中Bindable的原理 2011年11月01日 ... -
Flex AIR)创建“不规则形状”的Air透明窗体
2012-06-30 16:32 890Flex AIR)创建“不规则形状”的Air透明窗体 201 ... -
如何在flex当中使用swc
2012-06-30 16:32 769如何在flex当中使用swc 2 ... -
FLEX和Actionscript开发FLASH游戏7-3
2012-06-30 16:32 416FLEX和Actionscript开发FLASH游戏7-3 ...
相关推荐
从其他网站找的一个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实现滚动效果