xml 代码
- <?xml version="1.0"?>
-
- <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
- <window id="treeRDF" title="RDF Tree"
- xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
- <script src="script/tree.js" />
- <label value="Things in my house:"/>
-
- <tree flex="1" width="450" height="300" seltype="single" onselect="onAccountClick('tree2')" id="tree2"
- datasources="things.rdf" ref="urn:things:root">
-
- <treecols>
- <treecol id="name" label="Name" primary="true" flex="1"/>
- <treecol id="material" label="Material" flex="1"/>
- </treecols>
-
- <template>
- <treechildren>
- <treeitem uri="rdf:*">
- <treerow>
- <treecell label="rdf:http://www.xulplanet.com/rdf/example#name"/>
- <treecell label="rdf:http://www.xulplanet.com/rdf/example#material"/>
- </treerow>
- </treeitem>
- </treechildren>
- </template>
- </tree>
-
- </window>
这是xul页面,我是通过rdf传数据的,它的rdf文件是这样的,文件名叫things.rdf
xml 代码
- <?xml version="1.0"?>
-
- <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:things="http://www.xulplanet.com/rdf/example#">
-
- <RDF:Description about="urn:things:kitchen" things:name="Kitchen"/>
- <RDF:Description about="urn:things:bedroom" things:name="Bedroom"/>
- <RDF:Description about="urn:things:basement" things:name="Basement"/>
-
- <RDF:Description about="urn:things:toaster" things:name="Toaster" things:material="Aluminum"/>
- <RDF:Description about="urn:things:sink" things:name="Sink" things:material="Steel"/>
- <RDF:Description about="urn:things:spicerack" things:name="Spice Rack" things:material="Cedar"/>
- <RDF:Description about="urn:things:bed" things:name="Bed" things:material="Oak"/>
- <RDF:Description about="urn:things:lavalamp" things:name="Lava Lamp" things:material="Lava"/>
- <RDF:Description about="urn:things:junk" things:name="Junk" things:material="Unknown"/>
- <RDF:Description about="urn:things:morejunk" things:name="More Junk" things:material="Unknown"/>
- <RDF:Description about="urn:things:coffin" things:name="Coffin" things:material="Pine"/>
-
- <RDF:Seq about="urn:things:root">
- <RDF:li>
- <RDF:Seq about="urn:things:kitchen">
- <RDF:li resource="urn:things:toaster"/>
- <RDF:li resource="urn:things:sink"/>
- <RDF:li resource="urn:things:spicerack"/>
- </RDF:Seq>
- <RDF:Seq about="urn:things:bedroom">
- <RDF:li resource="urn:things:bed"/>
- <RDF:li resource="urn:things:lavalamp"/>
- </RDF:Seq>
- <RDF:Seq about="urn:things:basement">
- <RDF:li resource="urn:things:junk"/>
- <RDF:li resource="urn:things:morejunk"/>
- <RDF:li resource="urn:things:coffin"/>
- </RDF:Seq>
- </RDF:li>
- </RDF:Seq>
-
- </RDF:RDF>
js代码:function onAccountClick(treeID)
{
var tree = document.getElementById(treeID);
var selection = tree.contentView.getItemAtIndex( tree.currentIndex );
var foo = selection.firstChild.firstChild.getAttribute("label");
alert(foo);
}
这里要注意的是tree.contentView.getItemAtIndex( tree.currentIndex );
不是所有的tree都有getItemAtIndex这个方法,只有Content Tree和RDF Content Tree这两种类型的树才有,你可以用alert(tree.contentView)就可以知道是哪种类型的树了.
分享到:
相关推荐
在本文中,我们将深入探讨如何使用 FuelUX 的 Tree 控件来实现自定义图标、动态加载数据以及添加点击事件,从而创建更加互动且功能丰富的用户界面。 首先,让我们了解 FuelUX Tree 控件的基本概念。Tree 控件是一种...
为了监听这个事件,我们需要在Tree组件上添加事件监听器。代码示例如下: ```actionscript tree.addEventListener(Event.MENU_SHOW, onMenuShow); ``` `onMenuShow`函数是处理此事件的回调函数,其中我们可以根据...
在本文中,我们将深入探讨`TreeView`控件的点击事件及其处理方法,以便在用户点击节点时执行相应的操作。 `TreeView`控件在用户界面上通常用于展示层次化的信息,例如文件系统目录、应用程序菜单或者数据库结构。...
在ECharts Tree中,我们可以定制各种交互行为,比如节点的点击事件,以实现节点的展开与收缩。 首先,我们需要了解ECharts Tree的基本结构。Tree图通过`series-tree`配置项来定义,其中包含`data`属性,用于定义树...
jsTree 支持多种操作,包括点击、拖放、搜索、上下文菜单以及自定义图标和样式。中文文档提供了全面的指南,帮助开发者更好地理解和应用这个工具。 **安装与引用** 在项目中使用 jsTree,首先需要从其官方网站或者...
js Tree需要监听`touchstart`、`touchmove`和`touchend`等事件,以实现类似点击的效果。 3. 性能优化:移动端设备的性能可能不如桌面设备,因此需要优化数据加载和渲染。例如,分页加载大数据集,或者只在需要时才...
同时,为新树添加一个`'node-click'`事件处理器,当用户点击新树中的节点时,执行删除操作。删除操作需要从`selectedNodes`中移除对应的节点,并同步更新主树的状态,确保选中状态的准确性。 在文件列表中,我们...
它可能提供了基本的展开/折叠节点、节点点击事件、拖拽节点等功能。对于初学者,DTree可能是一个易于理解和使用的入门选择,因为它的API相对简单,文档齐全,能快速实现基本的树状视图。 2. **Tree**: "Tree"在...
4. **事件监听**:讲解如何监听节点点击、展开/折叠等事件,以及如何处理这些事件。 5. **动态加载**:如果数据量庞大,可实现按需加载,提高性能。 6. **扩展功能**:如拖拽节点、搜索功能、自定义图标等高级用法。...
在使用JQuery Easyui Tree组件时,我们常常需要监听用户对树形结构中节点的交互行为,例如当用户点击复选框时触发特定的操作。然而,Easyui Tree的API默认只提供了`onClick`事件,这对于处理复选框的选中状态并不...
开发者可以通过监听CheckBoxTree的事件来处理这些变化,例如,当节点的选中状态改变时,更新后台数据或执行其他业务逻辑。 源代码通常包括以下部分: 1. MXML文件:这是Flex的标记语言,用于定义用户界面和组件...
在这个“extTree例子点击出现界面”的场景中,当用户点击某个树节点时,可能触发了一个事件处理器,该处理器根据点击的节点信息(可能是节点的ID或特定属性)决定显示哪个界面或弹窗。这通常涉及到路由、模态对话框...
3. 监听Tree点击事件:在Tree的click事件中,我们需要获取被点击节点的数据,然后根据数据中的URL设置iFrame的source属性。 ```actionscript private function onTreeClick(event:Event):void { var treeItem:...
本篇文章将详细讲解如何在Qt中实现`QTreeView`的右键点击事件以及双击事件。 首先,让我们了解`QTreeView`的基本用法。`QTreeView`是`QAbstractItemView`的子类,它提供了视图模型/视图架构,允许灵活的数据展示。...
- **事件**:如`select_node.jstree`、`rename_node.jstree`等,监听并响应用户操作。 6. **示例应用** - 文件管理系统:利用jstree展示文件夹和文件的层级结构,支持拖放操作。 - 导航菜单:创建多级下拉菜单,...
4. **事件绑定**:根据需求绑定节点点击、拖放等事件。 5. **交互处理**:响应用户操作,如更新节点状态、异步加载子节点等。 在提供的压缩包文件"tree"中,可能包含了多种tree插件的实现,开发者可以根据项目需求...
onselect: function (node, tree_obj) {} // 节点单击事件 }, "ui": { "initially_select": ["/zonda"] }, "core": { "initially_open": ["/zonda"] } }); }); ``` 初始化时,我们指定了使用的插件,如 `...
例如,使用addEventListener来监听点击事件,并根据事件触发相应的操作。 4. 动态加载:为了提高性能,通常只有当前可视区域内的节点才会被加载。当用户滚动或展开节点时,才会异步加载更多的数据。 三、TableTree...
同时,Tree组件提供了一系列事件,如`onClick`、`onBeforeExpand`、`onBeforeCollapse`等,开发者可以根据需求绑定自定义的处理函数。 7. **实际应用场景**: jQuery EasyUI Tree常用于网站的导航菜单,例如在后台...
7. **事件处理**:当用户点击树节点时,需要捕获`NM_CLICK`或`TVN_SELCHANGED`通知,以便进行相应的操作,如打开文件或显示文件属性。 8. **更新和刷新**:如果文件系统发生变化,例如添加、删除或重命名文件,应用...