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

tree的点击事件

    博客分类：
  • xul
FlexChromeRackXMLCSS 
阅读更多
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)就可以知道是哪种类型的树了．

分享到：
| javascript表单之间的数据传递
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    fuelux.tree 自定义属性控件-自定义图标+动态加载数据+添加点击事件

    在本文中，我们将深入探讨如何使用 FuelUX 的 Tree 控件来实现自定义图标、动态加载数据以及添加点击事件，从而创建更加互动且功能丰富的用户界面。 首先，让我们了解 FuelUX Tree 控件的基本概念。Tree 控件是一种...

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

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

    Flex Tree 的右键菜单事件

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

    手机端js tree

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

    el-tree-selected-tree

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

    treeview的点击事件

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

    Tree，三种tree插件

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

    EasyTree的使用教程

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

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

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

    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:...

    jQuery的Tree控件 jstree

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

    tree(多种)多种tree的插件

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

    jsTree中文文档

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

    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常用于网站的导航菜单，例如在后台...

    FileTree MFC Tree控件的最好的测试源码

    7. **事件处理**：当用户点击树节点时，需要捕获`NM_CLICK`或`TVN_SELCHANGED`通知，以便进行相应的操作，如打开文件或显示文件属性。 8. **更新和刷新**：如果文件系统发生变化，例如添加、删除或重命名文件，应用...

    Tree control的使用

    在Windows API或者使用如MFC（Microsoft Foundation Classes）或WPF（Windows Presentation Foundation）等库进行开发时，我们需要监听Tree Control的单击事件。这个事件通常通过注册一个消息处理函数来实现，例如在...

Magicbox
Global site tag (gtag.js) - Google Analytics