自己封装的下拉多选:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.List;
import mx.collections.ArrayCollection;
import CheckBoxItemRenderer;
private var _seletedItems:Array;
private var list:List;
public var comboData:ArrayCollection;
private function init():void
{
this.addEventListener(MouseEvent.MOUSE_OVER, addPopUp);
createCombo();
}
public function set seletedItems(value:Array):void
{
_seletedItems = value;
if(list)
{
var items:ArrayCollection = list.dataProvider as ArrayCollection;
for each(var obj:Object in items)
{
if(_seletedItems.indexOf(obj["value"]) != -1)
{
obj["checked"] = true;
}
else
{
obj["checked"] = false;
}
}
showSeleted();
}
}
public function get seletedItems():Array
{
if(list)
{
var items:ArrayCollection = list.dataProvider as ArrayCollection;
var seletedItems:Array = [];
for each(var obj:Object in items)
{
if(obj["checked"] && "" != obj["value"])
{
seletedItems.push(obj["value"]);
}
}
_seletedItems = seletedItems;
}
return _seletedItems;
}
private function createCombo():void
{
if(null != comboData)
{
var dataSource:ArrayCollection = new ArrayCollection();
for each(var item:Object in comboData)
{
dataSource.addItem({label:item.label,value:item.data,checked:false});
}
list = new List();
list.dataProvider = dataSource;
list.itemRenderer = new ClassFactory(CheckBoxItemRenderer);
list.rowCount = 5;
list.width = width;
addPopUp();
showSeleted();
}
}
private function showSeleted():void
{
if(list)
{
var items:ArrayCollection = list.dataProvider as ArrayCollection;
var seletedItems:Array = [];
for each(var obj:Object in items)
{
if(obj["checked"] && "" != obj["value"])
{
seletedItems.push(obj["label"]);
}
}
multiCombo.label = seletedItems.length > 0?seletedItems.toString():"请选择";
multiCombo.toolTip = multiCombo.label;
}
}
private function addPopUp(e:MouseEvent=null):void
{
if(null == multiCombo.popUp && null != list)
{
var can:Canvas = new Canvas();
can.addChild(list);
multiCombo.popUp = can;
}
}
]]>
</mx:Script>
<mx:PopUpButton id="multiCombo" label="请选择" width="{width}" textAlign="left" fontWeight="normal"
openAlways="true" close="showSeleted()"/>
</mx:Canvas>
下面在别的地方引入:
<common:MultiComboBox id="multiCombo2" width="150" comboData="{mnpStatus}"/>
comboData为数据源
取值:
var arraySelected:Array = multiCombo.seletedItems as Array;
分享到:
相关推荐
`checkbox`是一种复选框,允许用户从一组选项中选择多个。结合`flex`布局,我们可以创建一个美观且实用的多选下拉框,其中每个选项前都有一个可选的`checkbox`。 实现这样的组件,我们需要考虑以下关键点: 1. **...
一个Flex带复选框的树的实现
在Flex编程中,"flex 下拉 带复选框 多选" 是一个常见的组件需求,主要用于创建具有多选功能的下拉列表。在Flex中,我们可以利用两种主要的组件来实现这样的功能:ComboBox和DropDownList。这两种组件都是用户界面...
在网页开发中,下拉多选框是一种常见的用户交互元素,它允许用户在多个选项中进行选择。在JavaScript和CSS的帮助下,我们可以创建功能丰富、样式美观的下拉多选框插件。本教程将深入探讨如何利用这两种技术来实现...
在这个场景中,"flex 多选下拉框"是一个功能组件,它允许用户在下拉列表中选择多个选项,而不是只能单选。 多选下拉框在很多类型的Web应用中都有广泛的应用,例如数据过滤、用户设置和配置选项等。它提升了用户体验...
在本文中,作者介绍了如何在Flex环境下使用复选框和下拉列表来实现几种常用的操作。通过实际的编码示例,我们可以学习到如何处理复选框的全选、全不选、反选以及选中特定项的操作,以及如何初始化下拉列表并将数据...
在微信小程序开发中,实现多选框功能是一个常见的需求,用于让用户可以选择多个选项。在本文中,我们将介绍小程序实现多选框的方法,这包括了单选、全选、多选以及删除操作的实现。对于小程序开发者来说,理解和掌握...
在Flex开发中,"flex checkboxtree复选树形下拉框"是一种常见的用户界面组件,它结合了树形结构和复选框的功能,允许用户在层次结构中进行多选操作。这种组件通常用于数据筛选、配置设置或者层级分类的选择场景。在...
下拉选择框可以包含多个option元素,每个代表一个可选的搜索范围。 ```html 全部 类别1 类别2 ... ``` 2. **jQuery选择器和事件绑定**:使用jQuery的选择器,我们可以轻松地选取DOM元素,并绑定事件处理器...
在给定的标题和描述中,我们可以看到开发者分享了一系列在实际项目中常用的Flex自定义控件,这些控件包括但不限于带复选框的树和列表、树形下拉框、Tab导航菜单以及开关门效果。接下来,我们将详细探讨这些知识点。 ...
这个Flex Combox的特点在于,其下拉部分以树形结构展示,每个节点都可以带有复选框。这种设计允许用户选择多个树形结构中的条目,非常适合用于层级关系的数据选择,如组织结构、地区分类或者产品分类等。 首先,...
这样,`Flex DataGrid`的每一行中就会出现可勾选的复选框和下拉选择列表,提供丰富的用户交互体验。 总的来说,`Flex DataGrid`的`itemRenderer`机制为我们提供了强大的自定义能力,通过创建自定义组件并绑定数据,...
在Flex中,表单是收集用户数据的关键组件,它们通常包含各种输入控件,如文本字段、复选框、单选按钮、下拉列表等。 Flex客户表单范本的核心特性包括: 1. **响应式设计**:Flex客户表单范本通常具有良好的适应性...
这个“flex ComboBox checkbox”的主题涉及到在ComboBox中集成复选框(checkbox)的功能,这使得用户可以选择多个选项,而不仅仅是单选。下面我们将详细探讨这个主题,包括ComboBox的基本概念、如何添加复选框以及...
1. **组件库**:提供了各种预定义的UI组件,如文本输入框、下拉列表、复选框、单选按钮等,方便用户快速搭建表单结构。 2. **布局管理**:支持不同的容器布局,如垂直布局、水平布局、网格布局等,使得表单元素可以...
在Flex编程领域,Combox(组合框)是一种常用的UI组件,它结合了下拉列表和文本输入框的功能,用户可以在下拉列表中选择一个或多个选项。本篇将详细讲解如何在Flex中创建一个支持多选功能的Combox控件,并基于提供的...
然而,有时我们需要在下拉框中不仅提供文本选项,还需要提供复选框(Checkbox)来让用户进行多选操作。这种需求在处理复杂数据或需要用户对多个选项进行选择时尤为常见。本文将详细讲解如何在Flex中的ComboBox中嵌入...
在Flex编程环境中,"带复选框的树状ComboBox"是一种高级UI组件,它结合了树形结构和下拉框的功能,并且每个节点都配备有复选框,为用户提供了一种方便的方式来多选树状数据。这样的组件在数据筛选、配置设置等场景中...
2. Checkbox:复选框,由文字和状态图标组成,继承自Button。 3. LinkButton:仅显示文字的无边框、无背景的按钮。 4. RadioButton:单选按钮,多个RadioButton需置于RadioButtonGroup内,以控制只有一个选中。 5. ...
在Flex应用中,这种控件通常用于显示层次化的数据,允许用户从多个层级的选项中进行选择。下面将详细介绍Flex Tree形ComboBox组件的各个方面。 1. **组件结构**: Flex Tree形ComboBox由两部分组成:一个可编辑的...