- 浏览: 1437204 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (409)
- Java (48)
- Spring (29)
- struts2 (17)
- hibernate (4)
- 设计模式 (24)
- jbpm (1)
- JavaScript (5)
- 统计报表 (7)
- ExtJS_3.0 (35)
- struts1 (1)
- 分析设计 (3)
- Flex3 (24)
- UML (2)
- 数据库 (18)
- PowerDesigner (2)
- 应用服务器 (3)
- WebService (5)
- ActiveMQ_5.3.2 (6)
- Java通信技术 (11)
- GWT (6)
- OSGi (15)
- android (11)
- liferay6.0.6 (13)
- jquery (13)
- Linux (3)
- java.util.concurrent (16)
- guava (9)
- 开发模式 (1)
- 大数据 (2)
- 互联网金融 (4)
- treegrid-3.0 (7)
- 分布式 (8)
- GO语言 (4)
- maven (1)
- 缓存技术 (6)
- 其他 (2)
- 前端页面 (1)
- heasy (1)
- spring cloud(F版) (21)
- springboot (12)
- springmvc (5)
- mybatis (3)
- dubbo (1)
- 物联网 (0)
最新评论
-
raymond.chen:
谢谢您的分享
使用Ngrok解决通过外网访问内网web应用 -
wangyudong:
速度有点慢,不过在也找到了一个开源的holer,配置一个key ...
使用Ngrok解决通过外网访问内网web应用 -
a1006458222:
...
Axis2的部署和应用 -
偷师来了:
不好意思 这样的博客我觉得就灭有必要分享出来了 命令大家都会看 ...
Consul框架介绍 -
lliiqiang:
怎么直接删除文件夹啊?固定的几个文件可以删除,不固定的呢?需要 ...
Flex AIR —— 文件读写
1、Ext.tree.TreePanel
主要配置项:
root:树的根节点。
rootVisible:是否显示根节点,默认为true。
useArrows:是否在树中使用Vista样式箭头,默认为false。
lines:是否显示树线,默认为true。
loader:树节点的加载器,默认为Ext.tree.TreeLoader。
selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
pathSeparator:树节点路径的分隔符,默认为“/”。
singleExpand:是否一次只展开树中的一个节点,默认为true。
requestMethod:请求方法,可选值有POST、GET。
containerScroll:是否将树形面板注册到滚动管理器ScrollManager中。
主要方法:
collapseAll():收缩所有树节点
expandAll():展开所有树节点
getRootNode():获取根节点
getNodeById(String id):获取指定id的节点
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )
expandPath( String path, [String attr], [Function callback] )
getChecked( [String attribute], [TreeNode startNode] )
selectPath( String path, [String attr], [Function callback] )
getSelectionModel():
2、Ext.data.Node
主要配置项:
id:节点id
leaf:当前节点是否为叶子节点
主要属性:
id:节点id
attributes:节点属性的集合
parentNode:当前节点的父节点
childNodes:当前节点所有子节点组成的数组
firstChild:当前节点的第一个直接子节点,如果没有则为null值
lastChild:当前节点的最后一个直接子节点,如果没有则为null值
nextSibling:当前节点的下一个兄弟节点,如果没有则为null值
previousSibling:当前节点的前一个兄弟节点,如果没有则为null值
主要方法:
appendChild( Node/Array node ):追加新的子节点
bubble( Function fn, [Object scope], [Array args] ):从当前节点开始向上迭代调用指定函数,如果指定函数返回false则将终止迭代。
args:传入函数中的参数,默认为当前节点
cascade( Function fn, [Object scope], [Array args] ):从当前节点开始向下迭代调用指定函数,如果指定函数返回false则将终止迭代。
contains( Node node ):当前节点是否包含指定子节点。
eachChild( Function fn, [Object scope], [Array args] ):迭代当前节点的所有子节点调用指定函数,如果指定函数返回false则将终止迭代。
findChild( String attribute, Mixed value ):查找具有指定属性的第一个子节点。
findChildBy( Function fn, [Object scope] ):根据自定义函数查找第一个符合要求的子节点,如果自定义函数返回true则说明匹配成功。
getDepth():取得当前节点的深度,根节点的深度为0
getOwnerTree():取得当前节点所在树。
getPath( [String attr] ):取得当前节点对应的路径,这个路径在程序中可用于展开或者选择节点。
attr:用于查找路径的属性,默认为节点id
hasChildNodes():是否有子节点
indexOf( Node node ):取得指定子节点的索引值,未找到返回-1。
insertBefore( Node node, Node refNode ):在当前节点的指定子节点之前插入一个新的子节点。
node:要插入的新节点
isAncestor( Node node ):判断指定节点是否为当前节点的父节点(可以是任何一级中的父节点)。
isFirst():是否为父节点的第一个子节点。
isLast():是否为父节点的最后一个子节点。
isLeaf():是否为叶子节点。
item( Number index ):取得指定索引的子节点。
remove():从父节点中删除当前节点。
removeChild( Node node ):删除当前节点的指定子节点。
replaceChild( Node newChild, Node oldChild ):用新的子节点替换当前节点的指定子节点。
sort( Function fn, [Object scope] ):用指定的排序函数为当前节点的子节点进行排序。
3、Ext.tree.TreeNode
主要配置项:
text:节点上的文本信息
qtip:节点上的提示信息
icon:节点图标对应的路径
iconCls:应用到节点图标上的样式
checked:当前节点的选择状态
true:在节点前显示一个选中状态的复选框
false:在节点前显示一个未选中状态的复选框
不指定该值:不显示任何复选框
href:节点的连接属性,默认为#
hrefTarget:显示节点连接的目标框架
editable:是否允许编辑,默认为true
expanded:是否展开节点,默认为false
disabled:是否禁用节点,默认为false
singleClickExpand:是否通过单击方式展开节点
allowChildren:是否允许当前节点具有子节点,默认为true
expandable:当不含子节点时,是否总显示一个加减图标,默认为false
uiProvider:节点的UI类,默认为Ext.tree.TreeNodeUI
主要属性:
text:节点上的文本信息
disabled:当前节点是否被禁用
主要方法:
collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):收缩当前节点
deep:是否级联收缩全部子节点
collapseChildNodes( [Boolean deep] ):收缩所有子节点
disable():禁用当前节点
enable():启用当前节点
ensureVisible( [Function callback], [Object scope] ):确保所有父节点都是展开的
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):展开当前节点
expandChildNodes( [Boolean deep] ):展开所有子节点
isExpanded():当前节点是否展开
isSelected():当前节点是否被选中
select():选择当前节点
setText( String text ):设置当前的文本
toggle():切换当前节点的展开和收缩状态
unselect():取消对当前节点的选择
getUI():取得节点的UI对象
4、Ext.tree.AsyncTreeNode
主要配置项:
loader:当前节点的树加载器,默认使用树中配置的树加载器
主要方法:
isLoaded():当前节点是否已经加载数据
reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数
5、Ext.tree.TreeNodeUI
主要方法:
getAnchor():从节点的UI中获取焦点的<a>元素
getIconEl():获取图标的<img>元素
getTextEl():获取文本节点
addClass( String/Array className ):
removeClass( String/Array className ):
hide():
show():
isChecked():取得节点的选择状态,如果当前节点没有复选框则函数返回false
toggleCheck( Boolean (optional) ):设置节点复选框的选择状态
6、Ext.tree.RootTreeNodeUI
7、Ext.tree.DefaultSelectionModel
是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。
主要方法:
clearSelections():清除对树中所有节点的选择
getSelectedNode():取得当前被选中的节点
isSelected( TreeNode node ):节点是否被选中
select( TreeNode node ):选中指定节点
unselect( TreeNode node ):取消指定节点的选中状态
selectNext():选择当前被选节点的下一个节点
selectPrevious():选择当前被选节点的上一个节点
8、Ext.tree.MultiSelectionModel
是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。
主要方法:
clearSelections():清除所有节点的选中状态
getSelectedNodes():取得被选节点组成的数组
isSelected( TreeNode node ):节点是否被选中
select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
unselect( TreeNode node ):取消指定节点的选中状态
9、Ext.tree.TreeLoader
提供了对子节点的延时加载功能,请求指定的URL地址,返回子节点数据,返回的数据格式如下:
[ { id: 1, text: "node1", leaf: true, check: false }, { id: 2, text: "node2", children: [ { id: 3, text: "node3", leaf: true } ] } ]
树节点展开时,当前节点的id会作为请求参数被发送到服务器,在服务器可以通过node参数名进行获取。
主要配置项:
dataUrl:获取子节点的URL地址。
baseAttrs:子节点的基本属性对象,该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
baseParams:基本的请求参数,这些参数会被附加到每一个节点的请求中。
clearOnLoad:在加载前是否移除已存在的子节点,默认为true。
preloadChildren:在第一次加载子节点后是否递归加载所有子节点。
requestMethod:请求方法,可选值有POST、GET。
uiProviders:加载器创建子节点的UI实现类。
url:与dataUrl作用相同。
主要方法:
load( Ext.tree.TreeNode node, Function callback, (Object) scope ):从指定的URL加载树节点。
node:需要加载子节点的树节点。
10、Ext.tree.TreeEditor
主要配置项:
alignment:对齐方式。
editDelay:两次点击节点触发编辑操作的延时时间,默认为350毫秒。
hideEl:在显示编辑器组件时是否隐藏绑定元素。
maxWidth:编辑器的最大宽度,默认为250。
11、Ext.tree.TreeSorter
主要配置项:
property:用于排序的节点属性名,默认为text。
dir:排序方向,可选值有asc、desc,默认为asc。
caseSensitive:是否区分大小写,默认为false。
folderSort:叶节点是否排在非叶节点之下,默认为false。
leafAttr:叶子节点在folder排序时的值,默认为leaf。
sortType:一个自定义函数用于在排序前转换节点值。
发表评论
-
表单组件_v2.2(四)
2011-01-30 15:51 20721、下拉框组件支持中间模糊查询 function liste ... -
表单组件_v2.2(三)
2010-10-07 22:21 2786本范例展示如何使用表单的各种组件。 下拉框组件展示了5种使用 ... -
表单组件_v2.2(二)
2010-10-07 21:57 18421、Ext.form.Hidden 2、Ex ... -
表单组件_v2.2(一)
2010-10-07 21:48 21541、Ext.form.Action ... -
属性表格:Ext.grid.PropertyGrid
2010-05-24 21:03 96641、Ext.grid.PropertyGrid 主要 ... -
可编辑表格:Ext.grid.EditorGridPanel
2010-05-24 20:59 216171、Ext.grid.EditorGridPanel ... -
表格数据分组:Ext.grid.GroupingView
2010-05-24 20:46 172551、Ext.grid.GroupingView ... -
普通表格范例
2010-05-24 16:14 2967主要演示以下功能: 包含复选框列、行号列 自定 ... -
普通表格:Ext.grid.GridPanel
2010-05-24 15:48 11644表格相关组件总图: ... -
树组件:异步树范例
2010-05-21 15:34 27061、范例主要展示以下功能点: 树节点通过请求服务 ... -
树组件:普通树范例
2010-05-21 15:26 19951、范例包含以下功能点: 节点包含复选框 ... -
Ext.TabPanel
2010-05-20 14:28 27474TabPanel不显示面板的标题和头部工具条。 1、主 ... -
Ext.Viewport
2010-05-18 02:00 20334Ext.Viewport代表浏览器窗口的整个显示区域,将doc ... -
垂直盒布局(VBoxLayout)
2010-05-18 01:54 5581Ext.layout.VBoxLayout扩展自Ext.lay ... -
水平盒布局(HBoxLayout)
2010-05-18 01:51 7733Ext.layout.HBoxLayout扩展自Ext.lay ... -
边框布局(BorderLayout)
2010-05-18 01:48 4759Ext.layout.BorderLayout扩展自Ext.l ... -
表格布局(TableLayout)
2010-05-18 01:46 3913Ext.layout.TableLayout扩展自Ext.la ... -
列布局(ColumnLayout)
2010-05-18 01:43 3782Ext.layout.ColumnLayout扩展自Ext.l ... -
表单布局(FormLayout)
2010-05-18 01:40 5284Ext.layout.FormLayout是为表单特殊设计的布 ... -
绝对位置布局(AbsoluteLayout)
2010-05-18 01:34 3085Ext.layout.AbsoluteLayout扩展自Ext ...
相关推荐
在前端开发中,Layui是一个非常流行的...实际项目中,根据具体需求进行调整和优化,就能实现一个功能完善的下拉树组件。记得在使用过程中,确保所有必要的JS和CSS文件都已正确引入,这样才能确保组件的正常运行。
- **初始化组件**:使用layui的`layui.use`方法加载eleTree模块,并调用`eleTree.render`初始化组件,传入配置项和数据。 - **监听事件**:注册事件监听器,通过回调函数处理用户操作。 3. **实例化配置**: - `...
- 树组件:用于展现层级结构的数据。 - 菜单和工具栏:提供用户交互的菜单项和工具按钮。 - 表单及字段:用于收集用户输入。 - 拖放处理:支持组件之间的拖放操作。 - 其他组件:包括日历、图表、提示框等。 5...
下拉树组件结合了下拉框(ComboBox)与树形结构(Tree),旨在提供一种直观、高效的选择体验。这种组件特别适用于层级结构数据的展示和选择,如组织架构、文件目录等场景。通过将树形结构嵌入到下拉框中,用户可以...
2. **组件使用**:在 Vue 单文件组件(.vue)中,通过 `<vue-ztree>` 标签引入组件,并将数据和配置项传递给组件。例如: ```html <vue-ztree :data="treeData" :settings="treeSettings"> ``` 其中 `treeData` ...
为了在表格中展示层级关系,实现中使用了`v-for`指令来遍历数据项中的`_level`属性,这个属性代表了每一项在树形结构中的层级,通过这个层级来控制缩进。 在表格列`el-table-column`的定义中,我们看到了如何基于当...
在Tree组件的XML声明中,通过`<mx:tree>`标签可以配置属性,例如设置`itemRenderer`属性为“TreeItemLinesRenderer”,这样就指定了一个自定义的渲染器,该渲染器负责在树节点之间绘制线条。 在Flex中,创建自定义...
Vue2.0权限树组件实现代码 本文将对Vue2.0权限树组件实现代码进行详细的分析和总结,包括组件的结构、样式、交互行为等方面的知识点。 组件结构 在Vue2.0权限树组件实现代码中,我们可以看到组件的结构是基于树形...
它具有丰富的配置项和事件,支持数据源绑定,能轻松实现动态加载。 2. 数据源:动态树的数据通常来自服务器,通过Ajax请求获取JSON格式的节点数据。这些数据包括节点ID、文本、子节点等信息。 3. 节点模型:每个树...
你需要定义一个`ul`元素作为树的容器,并在JavaScript中设置相应的配置项,例如节点的展开/关闭行为、节点点击事件等。同时,你需要为每个节点提供ID、父ID、名称等属性,形成JSON数据结构,供Ztree解析。 2. **...
在IT领域,目录树组件是常见的工具,它使用Windows Shell API来呈现与操作系统一致的文件和文件夹视图。ShellBrowser组件通常提供以下功能: 1. **目录树结构**:用户可以逐级展开文件夹,查看子文件夹和文件。 2. ...
3. **初始化树**:使用JavaScript代码初始化树,设置树的配置项,如皮肤、数据源等。 4. **加载数据**:可以通过JSON、XML或直接JavaScript数组形式加载节点数据。 5. **绑定事件**:根据需求绑定相关事件,如点击...
通过深入学习DHXTree的文档和示例代码(如压缩包内的“强大的树DHXTree”),开发者可以更好地掌握这款组件的使用方法,从而在项目中构建出高效、美观的树形界面。对于Java开发者来说,了解如何将DHXTree与Spring、...
其中,`ComboTree` 是一个自定义组件,它结合了`ComboBox` 和 `Tree` 的功能,允许用户在一个下拉列表中选择树形结构的数据项。 #### 组件介绍 `ComboTree` 在本文档中被定义为一个自定义类 `Slk.view.ui.ComboTree...
TreePanel包含了渲染树形结构所需的配置项,如store、root、displayField等。 3. **TreeStore**:存储树形数据的仓库,它负责加载和管理树形数据。你可以通过配置它的proxy来设置数据源,如AjaxProxy或MemoryProxy...
2. **配置项**(config): - `displayField`:设置树节点显示的字段名。 - `columns`:定义树的列配置,通常用于展示节点的不同属性。 - `rootVisible`:是否显示树的根节点,默认为true。 - `selectOnTab`:当...
在EXTJS中实现动态树,主要是通过EXTJS的TreePanel组件来完成,下面将详细介绍EXTJS动态树的实现过程及其相关知识点。 1. TreePanel组件: TreePanel是EXTJS中用来展示树形结构数据的组件。它包含节点(Node)、根...
为了在表单中使用这个组件,你需要在 Laravel-Admin 的 Form 中调用 `checkboxTree` 方法,传入需要展示的数据源和配置项。例如: ```php $form->checkboxTree('permissions', '权限分配')->options($...