- 浏览: 213559 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zlbdexiaohao:
怎么去掉默认的图标,folderClosedIcon=&quo ...
FLEX 构建完美的带有CheckBox三状态的Tree控件 -
zlbdexiaohao:
看不懂看不懂
FLEX 构建完美的带有CheckBox三状态的Tree控件 -
FYIHDG:
[list][*][list][*][*][list][*][ ...
ImageIO读jpg的时候出现exception:bandOffsets.length is wr -
被剥削的程序员:
你好我在引用你的comboxtree解决问题的时候,发现点击父 ...
ComboBoxTree -
527184687:
[flash=200,200][url][img][list] ...
ext treePanel 更换图标 总结
CSDN上下载的,该Tree是采用XMLList 绑定数据的
CheckTreeDemoRenderer.as
TreeCheckBoxEvent.as (需要的时候采用)
CheckTreeDemo.mxml
CheckTreeDemoRenderer.as
package com.render { import flash.events.MouseEvent; import flash.xml.*; import mx.collections.*; import mx.controls.CheckBox; import mx.controls.Image; import mx.controls.Tree; import mx.controls.listClasses.*; import mx.controls.treeClasses.*; public class CheckTreeDemoRenderer extends TreeItemRenderer { protected var myImage:Image; private var imageWidth:Number = 6; private var imageHeight:Number = 6; private var inner:String = "com/assets/inner.png"; protected var myCheckBox:CheckBox; static private var STATE_SCHRODINGER:String = "schrodinger"; static private var STATE_CHECKED:String = "checked"; static private var STATE_UNCHECKED:String = "unchecked"; public function CheckTreeDemoRenderer () { super(); mouseEnabled = false; } override protected function createChildren():void { super.createChildren(); myCheckBox = new CheckBox(); myCheckBox.setStyle( "verticalAlign", "middle" ); myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler ); addChild(myCheckBox); myImage = new Image(); myImage.source = inner; myImage.addEventListener( MouseEvent.CLICK, imageToggleHandler ); myImage.setStyle( "verticalAlign", "middle" ); addChild(myImage); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); if(super.data) { if (super.icon != null) { myCheckBox.x = super.icon.x; myCheckBox.y = super.icon.y; myCheckBox.width = super.icon.width; myCheckBox.height = super.icon.height; super.icon.x = myCheckBox.x + myCheckBox.width ; super.label.x = super.icon.x + super.icon.width; } else { myCheckBox.x = super.label.x; myCheckBox.y = super.label.y; myCheckBox.height = super.label.height; super.label.x = myCheckBox.x + myCheckBox.width + myCheckBox.height; } if (data.@state == STATE_SCHRODINGER) { myImage.x = myCheckBox.x + 4; myImage.y = myCheckBox.y + 4; myImage.width = imageWidth; myImage.height = imageHeight; } else { myImage.x = 0; myImage.y = 0; myImage.width = 0; myImage.height = 0; } } } override public function set data(value:Object):void { super.data = value; setCheckState (myCheckBox, value, value.@state); if(TreeListData(super.listData).item.@type == 'dimension') { setStyle("fontStyle", 'italic'); } else { if (this.parent != null) { var _tree:Tree = Tree(this.parent.parent); _tree.setStyle("defaultLeafIcon", null); } setStyle("fontStyle", 'normal'); } } private function toggleParents (item:Object, tree:Tree, state:String):void { if (item == null) { return; } else { item.@state = state; toggleParents(tree.getParentItem(item), tree, getState (tree, tree.getParentItem(item))); } } private function toggleChildren (item:Object, tree:Tree, state:String):void { if (item == null) { return; } else { item.@state = state; var treeData:ITreeDataDescriptor = tree.dataDescriptor; if (treeData.hasChildren(item)) { var children:ICollectionView = treeData.getChildren (item); var cursor:IViewCursor = children.createCursor(); while (!cursor.afterLast) { toggleChildren(cursor.current, tree, state); cursor.moveNext(); } } } } private function getState(tree:Tree, parent:Object):String { // Alert.show("1"); var noChecks:int = 0; var noCats:int = 0; var noUnChecks:int = 0; if (parent != null) { var treeData:ITreeDataDescriptor = tree.dataDescriptor; var cursor:IViewCursor = treeData.getChildren(parent).createCursor(); while (!cursor.afterLast) { if (cursor.current.@state == STATE_CHECKED) { noChecks++; } else if (cursor.current.@state == STATE_UNCHECKED) { noUnChecks++ } else { noCats++; } cursor.moveNext(); } } if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0)) { return STATE_SCHRODINGER; } else if (noChecks > 0) { return STATE_CHECKED; } else { return STATE_UNCHECKED; } } private function imageToggleHandler(event:MouseEvent):void { myCheckBox.selected = !myCheckBox.selected; checkBoxToggleHandler(event); } private function checkBoxToggleHandler(event:MouseEvent):void { if (data) { var myListData:TreeListData = TreeListData(this.listData); var selectedNode:Object = myListData.item; var tree:Tree = Tree(myListData.owner); var toggle:Boolean = myCheckBox.selected; if (toggle) { toggleChildren(data, tree, STATE_CHECKED); } else { toggleChildren(data, tree, STATE_UNCHECKED); } var parent:Object = tree.getParentItem (data); toggleParents (parent, tree, getState (tree, parent)); tree.parent.dispatchEvent(new TreeCheckBoxEvent(TreeCheckBoxEvent.CHECKBOX_CLICK,false,false,data)); } } private function setCheckState (checkBox:CheckBox, value:Object, state:String):void { if (state == STATE_CHECKED) { checkBox.selected = true; } else if (state == STATE_UNCHECKED) { checkBox.selected = false; } else if (state == STATE_SCHRODINGER) { checkBox.selected = false; } } } }
TreeCheckBoxEvent.as (需要的时候采用)
package com.render { import flash.events.Event; public class TreeCheckBoxEvent extends Event { public static const CHECKBOX_CLICK:String = "checkBoxClick"; private var _data:Object; public function get data():Object{ return this._data; } public function set data(data:Object):void{ this._data = data; } public function TreeCheckBoxEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false,data:Object=null) { if(data != null) this._data = data; super(type, bubbles, cancelable); } } }
CheckTreeDemo.mxml
<?xml version="1.0" encoding="iso-8859-1"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" > <mx:Script> <![CDATA[ import com.render.TreeCheckBoxEvent; import mx.collections.*; import mx.controls.Alert; [Bindable] public var folderList:XMLList = <> <folder state="unchecked" label="Marketing Collateral" isBranch="true" > <folder state="unchecked" isBranch="true" label="Media, PR, and Communications" > <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" /> <folder state="unchecked" isBranch="false" label="Articles Reprints" /> <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" /> <folder state="unchecked" isBranch="false" label="Press Kits" /> <folder state="unchecked" isBranch="false" label="Press Releases" /> <folder state="unchecked" isBranch="false" label="Quick Hits" /> <folder state="unchecked" isBranch="false" label="Rep Talking Points" /> <folder state="unchecked" isBranch="false" label="Special Updates" /> <folder state="unchecked" isBranch="false" label="White Papers" /> </folder> <folder state="unchecked" isBranch="true" label="Forms and Applications" > <folder state="unchecked" isBranch="false" label="Applications" /> <folder state="checked" isBranch="false" label="Forms" /> </folder> </folder> </>; [Bindable] public var folderCollection:XMLListCollection; private function init() : void { this.addEventListener(TreeCheckBoxEvent.CHECKBOX_CLICK,treeCheckBoxHandler); folderCollection = new XMLListCollection(folderList); checkTree.dataProvider = folderCollection; } private function treeCheckBoxHandler(event:TreeCheckBoxEvent):void{ var tempXml:XML = event.data as XML; Alert.show(tempXml.toXMLString(),""); } private function updataDataGrid():void{ Alert.show(checkTree.selectedItem.@label,""); //在此联动Grid } ]]> </mx:Script> <mx:Tree id="checkTree" itemRenderer="com.render.CheckTreeDemoRenderer" change="updataDataGrid()" labelField="@label" width="100%" height="100%" > </mx:Tree> </mx:Application>
发表评论
-
浏览器前进后退按钮切换状态
2010-06-03 16:22 1549Flex browser manager能够让用户通过浏览器的 ... -
Flex3 Module 模块化 应用程序 开发
2010-05-26 15:40 1231模块(Modules) 模块(Module)是创建大型Fle ... -
OUTERDOCUMENT
2010-05-26 14:38 2483scope 也更改了。我的意思是, 从 <mx:Comp ... -
FLEX module的使用
2010-05-26 14:12 1027用FLEX来开发应用难免不 ... -
flex 加载 swf
2010-01-13 13:24 1235<?xml version="1.0&qu ... -
flex下载文件
2010-01-10 10:14 1295<?xml version="1.0&qu ... -
flex最全的表单验证
2010-01-05 14:50 1180<?xml version="1.0&qu ... -
mxml中动态生成组件
2009-12-28 17:09 1436客户那边的API 返回值如下 <list> ... -
TabNavigator
2009-12-20 23:21 959<?xml version="1.0&qu ... -
flex 打开新页面 窗口最大化
2009-12-14 22:12 2345var args:String = "toolb ... -
Flex tree xml的数据源
2009-12-10 23:43 6708<?xml version="1.0&qu ... -
Flex中利用ContextMenu和ContextMenuItem类在DataGrid上创建一个自定义右键弹出菜单的例子
2009-12-10 22:49 3522<?xml version="1.0&qu ... -
flex datagrid分页排序失效
2009-12-09 22:04 1778分页改变了datagrid的数据源,数据源变了视图就跟着变了。 ... -
Flex 弹出窗口的例子
2009-12-09 00:44 1504TitleWindowApp.mxml <mx:Ap ... -
FLEX 构建完美的带有CheckBox三状态的Tree控件
2009-12-08 23:02 7416CheckTree.as package ht.syste ... -
flex blazeds 异步加载tree
2009-12-06 14:48 1565<?xml version="1.0&qu ... -
flex 异步 tree
2009-12-06 14:33 2506例子一 <?xml version="1. ... -
FLEX数据类型和JAVA数据类型对应关系
2009-12-03 22:31 3032类型名 类型描述 Boolean 只有两个值:true 和fa ... -
BlaseDS+Spring 整合配置
2009-11-24 10:54 1255首先到spring网站下载两 ... -
flex blazeDs spring整合
2009-11-24 10:27 15171.新建一个工程Flex_Spring。Ap ...
相关推荐
这个"纯JS+HTML写的checkBox Tree 级联选中"实例,解决了其他示例中可能存在的BUG,提供了一个稳定、好用的解决方案。 在该实现中,主要涉及以下几个关键知识点: 1. **HTML结构**: - 树形结构通常由`<ul>`和`...
"Flex Tree + Checkbox级联勾选"是一个重要的功能点,通常出现在数据管理、配置界面或文件管理系统中,允许用户进行批量选择或级联操作。 首先,我们来详细了解一下Flex Tree。Flex Tree是基于Adobe Flex技术的一种...
在IT领域,"带checkbox的树"(Checkbox Tree)是一种常见的UI组件,广泛应用于数据管理和配置界面中。这种组件结合了树形结构和复选框的功能,用户可以通过选择或取消选择节点来对数据进行多选操作,使得在层级关系...
本文将详细讲解如何实现一个带有复选框(Checkbox)的树形列表(TREE LIST)的级联选择功能,以及相关的Java标签形式实现。这种功能常见于权限管理、组织结构选择等场景,让用户能够方便地进行多层级的勾选操作。 ...
flex tree+checkbox可实现级联勾选 修改后 修改CheckTreeDemoRenderer.as这个文件中 while (!cursor.afterLast){ if (cursor.current.@state == STATE_CHECKED) { noChecks++; }else if (cursor.current.@state =...
由于Checkbox Tree支持多级节点,因此在处理全选/全不选或者级联选中时,需要使用递归算法遍历所有子节点,同步它们的选中状态。 9. **样式和模板**: 复选框的样式可以通过CSS自定义,如改变选中、未选中和三态...
在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...
在本文中,我们将深入探讨如何使用jQuery和EasyUI库实现一个具有级联选中功能的CheckBoxTree组件。CheckBoxTree是一种常见的UI元素,常用于展示层级结构的数据,并允许用户通过复选框选择或取消选择整条数据路径。在...
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
在JSTree中,你可以配置各种插件和设置,如checkbox插件来启用复选框,配置json_data或ajax数据源来动态加载地区数据。 实现过程中,你需要处理以下步骤: 1. 引入JSTree库及相关CSS和JS文件。 2. 创建HTML元素,...
一个简单html页面,实现省市的三级级联选择,根据不同情况可以控制不同展现。
确保在不同分辨率和屏幕尺寸下,Tree和复选框的布局都能正确显示。这可能涉及到对组件大小、位置和间距的调整。 5. **优化性能**: 由于复选框可能会导致大量的数据更新,因此需要考虑性能优化。例如,通过懒加载...
总的来说,理解和实现js多级联动多选checkbox插件涉及了JavaScript的多个核心概念,包括DOM操作、事件处理、数据结构、UI更新、性能优化以及模块化开发等。通过学习和实践,开发者可以创建出功能强大且易于使用的...
5. `checkbox.cascade`:定义选择和取消选择的级联行为,如`"down"`表示向下级联,`"up"`表示向上级联,`"undetermined"`表示同时级联并保持未确定状态。 在`jstree-master`压缩包中,包含了jsTree的核心文件和示例...
它结合了树形结构(Tree)和复选框(CheckBox)的功能,让用户能够在一个层次化的数据结构中进行多选操作。在描述中提到的“在树型控件Tree中可以实现CheckBox的复选内容”,意味着用户不仅能在树节点上看到文本信息...
### CheckBox 选中效果:选中子的父自动选中,选中父的子...总之,通过上述分析可以看出,在实际项目开发中利用CheckBox实现父子级联选中功能不仅可以提升用户体验,还能有效简化操作流程,是一种非常实用的技术方案。
而当我们谈论"flex tree checkbox"时,这意味着我们要在Tree组件的节点上添加复选框,使得用户可以对每个节点进行多选操作,提高交互性和用户体验。 首先,让我们深入了解Flex Tree组件。Tree组件是基于Adobe Flex ...
标题所指的“easyui tree带checkbox实现单选”是指在EasyUI的树形组件中,每个节点都可以被勾选,但同一时间只能有一个节点处于选中状态。这种功能通常用于当用户需要从多个选项中选择一个作为唯一选择的情况。 ...