`
zhongzhihua
  • 浏览: 313821 次
  • 来自: ...
社区版块
存档分类
最新评论

tree的点击事件

    博客分类:
  • xul
阅读更多
xml 代码
  1. <?xml version="1.0"?>  
  2.   
  3. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>  
  4.   
  5. <window id="treeRDF" title="RDF Tree"  
  6.         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  
  7. <script  src="script/tree.js" />  
  8. <label value="Things in my house:"/>  
  9.   
  10. <tree flex="1" width="450" height="300" seltype="single" onselect="onAccountClick('tree2')" id="tree2"  
  11.       datasources="things.rdf" ref="urn:things:root">  
  12.   
  13.   <treecols>  
  14.     <treecol id="name" label="Name" primary="true" flex="1"/>  
  15.     <treecol id="material" label="Material" flex="1"/>  
  16.   </treecols>  
  17.   
  18.   <template>  
  19.     <treechildren>  
  20.       <treeitem uri="rdf:*">  
  21.         <treerow>  
  22.           <treecell label="rdf:http://www.xulplanet.com/rdf/example#name"/>  
  23.           <treecell label="rdf:http://www.xulplanet.com/rdf/example#material"/>  
  24.         </treerow>  
  25.       </treeitem>  
  26.     </treechildren>  
  27.   </template>  
  28. </tree>  
  29.   
  30. </window>  
这是xul页面,我是通过rdf传数据的,它的rdf文件是这样的,文件名叫things.rdf
xml 代码
  1. <?xml version="1.0"?>  
  2.   
  3. <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  
  4.          xmlns:things="http://www.xulplanet.com/rdf/example#">  
  5.   
  6.    <RDF:Description about="urn:things:kitchen" things:name="Kitchen"/>  
  7.    <RDF:Description about="urn:things:bedroom" things:name="Bedroom"/>  
  8.    <RDF:Description about="urn:things:basement" things:name="Basement"/>  
  9.   
  10.    <RDF:Description about="urn:things:toaster" things:name="Toaster" things:material="Aluminum"/>  
  11.    <RDF:Description about="urn:things:sink" things:name="Sink" things:material="Steel"/>  
  12.    <RDF:Description about="urn:things:spicerack" things:name="Spice Rack" things:material="Cedar"/>  
  13.    <RDF:Description about="urn:things:bed" things:name="Bed" things:material="Oak"/>  
  14.    <RDF:Description about="urn:things:lavalamp" things:name="Lava Lamp" things:material="Lava"/>  
  15.    <RDF:Description about="urn:things:junk" things:name="Junk" things:material="Unknown"/>  
  16.    <RDF:Description about="urn:things:morejunk" things:name="More Junk" things:material="Unknown"/>  
  17.    <RDF:Description about="urn:things:coffin" things:name="Coffin" things:material="Pine"/>  
  18.   
  19.   <RDF:Seq about="urn:things:root">  
  20.     <RDF:li>  
  21.       <RDF:Seq about="urn:things:kitchen">  
  22.         <RDF:li resource="urn:things:toaster"/>  
  23.         <RDF:li resource="urn:things:sink"/>  
  24.         <RDF:li resource="urn:things:spicerack"/>  
  25.        </RDF:Seq>  
  26.        <RDF:Seq about="urn:things:bedroom">  
  27.          <RDF:li resource="urn:things:bed"/>  
  28.          <RDF:li resource="urn:things:lavalamp"/>  
  29.        </RDF:Seq>  
  30.        <RDF:Seq about="urn:things:basement">  
  31.          <RDF:li resource="urn:things:junk"/>  
  32.          <RDF:li resource="urn:things:morejunk"/>  
  33.          <RDF:li resource="urn:things:coffin"/>  
  34.        </RDF:Seq>  
  35.     </RDF:li>  
  36.   </RDF:Seq>  
  37.   
  38. </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 控件来实现自定义图标、动态加载数据以及添加点击事件,从而创建更加互动且功能丰富的用户界面。 首先,让我们了解 FuelUX Tree 控件的基本概念。Tree 控件是一种...

    Flex Tree 的右键菜单事件

    为了监听这个事件,我们需要在Tree组件上添加事件监听器。代码示例如下: ```actionscript tree.addEventListener(Event.MENU_SHOW, onMenuShow); ``` `onMenuShow`函数是处理此事件的回调函数,其中我们可以根据...

    treeview的点击事件

    在本文中,我们将深入探讨`TreeView`控件的点击事件及其处理方法,以便在用户点击节点时执行相应的操作。 `TreeView`控件在用户界面上通常用于展示层次化的信息,例如文件系统目录、应用程序菜单或者数据库结构。...

    echarts tree 点击节点收缩(关闭子节点)功能实现

    在ECharts Tree中,我们可以定制各种交互行为,比如节点的点击事件,以实现节点的展开与收缩。 首先,我们需要了解ECharts Tree的基本结构。Tree图通过`series-tree`配置项来定义,其中包含`data`属性,用于定义树...

    jsTree中文文档

    jsTree 支持多种操作,包括点击、拖放、搜索、上下文菜单以及自定义图标和样式。中文文档提供了全面的指南,帮助开发者更好地理解和应用这个工具。 **安装与引用** 在项目中使用 jsTree,首先需要从其官方网站或者...

    手机端js tree

    js Tree需要监听`touchstart`、`touchmove`和`touchend`等事件,以实现类似点击的效果。 3. 性能优化:移动端设备的性能可能不如桌面设备,因此需要优化数据加载和渲染。例如,分页加载大数据集,或者只在需要时才...

    el-tree-selected-tree

    同时,为新树添加一个`'node-click'`事件处理器,当用户点击新树中的节点时,执行删除操作。删除操作需要从`selectedNodes`中移除对应的节点,并同步更新主树的状态,确保选中状态的准确性。 在文件列表中,我们...

    Tree,三种tree插件

    它可能提供了基本的展开/折叠节点、节点点击事件、拖拽节点等功能。对于初学者,DTree可能是一个易于理解和使用的入门选择,因为它的API相对简单,文档齐全,能快速实现基本的树状视图。 2. **Tree**: "Tree"在...

    EasyTree的使用教程

    4. **事件监听**:讲解如何监听节点点击、展开/折叠等事件,以及如何处理这些事件。 5. **动态加载**:如果数据量庞大,可实现按需加载,提高性能。 6. **扩展功能**:如拖拽节点、搜索功能、自定义图标等高级用法。...

    JQuery Easyui Tree的oncheck事件实现代码

    在使用JQuery Easyui Tree组件时,我们常常需要监听用户对树形结构中节点的交互行为,例如当用户点击复选框时触发特定的操作。然而,Easyui Tree的API默认只提供了`onClick`事件,这对于处理复选框的选中状态并不...

    flex带复选框的tree,flex checkboxtree

    开发者可以通过监听CheckBoxTree的事件来处理这些变化,例如,当节点的选中状态改变时,更新后台数据或执行其他业务逻辑。 源代码通常包括以下部分: 1. MXML文件:这是Flex的标记语言,用于定义用户界面和组件...

    extTree例子点击出现等

    在这个“extTree例子点击出现界面”的场景中,当用户点击某个树节点时,可能触发了一个事件处理器,该处理器根据点击的节点信息(可能是节点的ID或特定属性)决定显示哪个界面或弹窗。这通常涉及到路由、模态对话框...

    flex iFrame的tree控件连接到相应的网页

    3. 监听Tree点击事件:在Tree的click事件中,我们需要获取被点击节点的数据,然后根据数据中的URL设置iFrame的source属性。 ```actionscript private function onTreeClick(event:Event):void { var treeItem:...

    qt中的treeView的右击事件和双击事件

    本篇文章将详细讲解如何在Qt中实现`QTreeView`的右键点击事件以及双击事件。 首先,让我们了解`QTreeView`的基本用法。`QTreeView`是`QAbstractItemView`的子类,它提供了视图模型/视图架构,允许灵活的数据展示。...

    jQuery的Tree控件 jstree

    - **事件**:如`select_node.jstree`、`rename_node.jstree`等,监听并响应用户操作。 6. **示例应用** - 文件管理系统:利用jstree展示文件夹和文件的层级结构,支持拖放操作。 - 导航菜单:创建多级下拉菜单,...

    tree(多种)多种tree的插件

    4. **事件绑定**:根据需求绑定节点点击、拖放等事件。 5. **交互处理**:响应用户操作,如更新节点状态、异步加载子节点等。 在提供的压缩包文件"tree"中,可能包含了多种tree插件的实现,开发者可以根据项目需求...

    jsTree操作 jsTree插件简介

    onselect: function (node, tree_obj) {} // 节点单击事件 }, "ui": { "initially_select": ["/zonda"] }, "core": { "initially_open": ["/zonda"] } }); }); ``` 初始化时,我们指定了使用的插件,如 `...

    TableTree 表格树

    例如,使用addEventListener来监听点击事件,并根据事件触发相应的操作。 4. 动态加载:为了提高性能,通常只有当前可视区域内的节点才会被加载。当用户滚动或展开节点时,才会异步加载更多的数据。 三、TableTree...

    jquery-easyui-tree学习

    同时,Tree组件提供了一系列事件,如`onClick`、`onBeforeExpand`、`onBeforeCollapse`等,开发者可以根据需求绑定自定义的处理函数。 7. **实际应用场景**: jQuery EasyUI Tree常用于网站的导航菜单,例如在后台...

    orgtree实现树列表基本功能

    `orgtree`除了基本的展示和点击事件外,还可能提供展开/折叠节点、拖拽节点、异步加载等高级功能。这些功能可以通过配置项或API方法来实现,具体细节需参考`orgtree`的官方文档。 6. **自定义样式和交互**: 根据...

Global site tag (gtag.js) - Google Analytics