`
hipony
  • 浏览: 22768 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

xloadtree xtree学习

阅读更多
1.XTREE简介:

XTREE是一个基于 AJAX实现的树形菜单。它的原理就是每次都只加载当前结点下的所有结点,而对开发人员来说,就是只需要按一定的格式,生成一段XML代码。XTREE可以自己定制每个结点的ICON 和链接。XTREE是基于对象的,通过XTREE,你无需再自己生成HTML代码,而只要生成相应的JS 对象就可以了。

2.官方网址:

http://webfx.eae.net/dhtml/xtree/index.html,可以在这里下载到XTREE最新的版本,也有XTREE的演示的DEMO。

3.XTREE的 API:

    XTREE的API很简单,就是一个抽象类WebFXTreeAbstractNode 以及该抽象类的两个子类WebFXTree和WebFXTreeItem。这三个类的属性和构造函数,还有方法详见:http://webfx.eae.net/dhtml/xtree/api.html,上面写得很清晰。

4.XTREE学习笔记
    每个结点有一个状态叫做OPEN;如果结点为OPEN,则可以EXPAND;对于ITEM结点来说,永远返回FALSE;
    toggle()就是切换,如果为展开的,就收起;如果为收起的,就展开;
    XTREE生成的是静态树,它不能从XML中生成树,而是只能生成简单的静态的树,看构造函数的参数就可以知道【text】【action】
    --------------------------------------------------------------
    WebFXTreeAbstractNode:
  
    属性:
    id:唯一标识
    text: label
    action: 链接
    open: 标志位,boolean型,是否打开
    icon: 图标
    openIcon:打开时的图标
    parentNode:父结点的Reference
    childNodes: 子结点的Reference的集合
  
    方法:
    indent():缩进
    toggle():切换
    callapse():收起
    expand():展开
    callapseAll():收起全部
    expandAll():展开全部
    expandChildren():展开子结点
    callapseChildren():收起子结点
    getNextSibling():取得下一个兄弟结点的Reference
    getPreviousSibling():取得上一个兄弟结点的Reference
    toString():生成HTML代码
  
    ------------------------------------------------------------------
    WebFXTree:
  
    构造函数:new WebFXTree([text], [action], [behavior],[icon],[openIcon]);
  
    参数:
    text:
    action:
    behavior:
    icon:
    openIcon:
  
    属性:
    rendered 标志位,boolean类型,用于标记该树是否已经生成和显示。
    WebFXTreeAbstractNode 的所有属性
  
    方法:
    getSelected():返回一个Reference,被选中的那个对象的Reference。
    setBehavior(sBehavior): classic,explorer;
    getBehavior():
    WebFXTreeAbstractNode 的所有方法
    -------------------------------------------------------------------
    WebFXTreeItem:
    构造函数:
    new WebFXTreeItem([text],[action],[parent],[icon],[openIcon]);
  
    属性:
    WebFXTreeAbstractNode 的所有属性
  
    方法:
    getFirst():返回第一个子结点的Reference
    getLast():返回嘴后一个子结点的Reference
    __________________________________________________________________________________________
  
5.XLoadTree学习笔记:
    XLoadTree与XTree的区别就在于,XTree只能生成静态树,而XLoadTree可以根据XML生成动态树。
    XLoadTree是由Xtree而来的,主要有两个类:WebFXLoadTree和WebFXLoadTreeItem,其中,WebFXLoadTree继承自WebFXTree,WebFXLoadTreeItem 继承自WebFXTreeItem
    ---------------------------------------------------------------------
    WebFXLoadTree:
  
    构造函数:
    new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)
  
    参数:
    sXmlSrc:展开时需要用到的XML文件
    其余参数与WebFXTree一样
  
    属性:
    src: XML源文件
    loading: 标志位,boolean类型,表示正在加载XML文件
    loaded: 标志位,boolean类型, 表示XML文件已将加载完毕
    errorText: 错误描述
    WebFXTree中的所有属性
  
    方法:
    reload():重新加载XML文件
    WebFXTree中的所有方法
    -----------------------------------------------------------------------
    WebFXLoadTreeItem:
  
    构造函数:
    new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
    参数:
    eParent:可选,该结点要加入到的结点的Reference
  
    属性:
    src: XML源文件
    loading: 标志位,boolean类型,表示正在加载XML文件
    loaded: 标志位,boolean类型, 表示XML文件已将加载完毕
    errorText: 错误描述
    WebFXTree中的所有属性
  
    方法:
    reload():重新加载XML文件
    WebFXTreeItem中的所有方法
  
    XML文件的格式:
   
xml 代码

   1. <!ELEMENT tree (tree*)> 
   2.    <!ATTLIST tree  
   3.              text       CDATA    #REQUIRED  
   4.              src        CDATA    #IMPLIED  
   5.              action     CDATA    #IMPLIED  
   6.              icon       CDATA    #IMPLIED  
   7.              openIcon   CDATA    #IMPLIED> 

          

    XML文件的例子:
  
xml 代码

   1. <tree> 
   2.    <tree text="Loaded Item 1" action="href://webfx.eae.net" /> 
   3.    <tree text="Loaded Item 2"> 
   4.     <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" /> 
   5.    </tree> 
   6.    <tree text="Load &quot;tree1.xml&quot;" src="tree1.xml" /> 
   7. </tree> 
分享到:
评论

相关推荐

    xtree1.1和例子

    1. **xloadtree.js**: 这可能是xtree的核心加载模块,负责动态加载和处理树形数据。它可能包含异步加载数据的功能,比如从服务器获取数据,或者根据用户操作动态添加、删除或更新节点。 2. **xmlextras.js**: 根据...

    xtree3.1_非常优秀的树菜单_newtower修改增强.7z

    5. `生成的范例html源码1.txt` 和 `生成的范例html源码0.txt`:这些是示例代码,开发者可以参考这些源码学习如何构建和配置XTREE3.1菜单。 6. `license.txt`:包含了软件的授权信息,规定了软件的使用、分发和修改...

    xtree一颗完整的树xtree+oracle+struts

    通过分析这些文件,开发者可以学习如何将这三个组件整合起来,构建一个能够动态加载和操作树形数据的应用。 总的来说,xtree+Oracle+Struts的组合提供了一个强大的工具链,用于开发具有交互式树形视图的Web应用。...

    XTree_javascript_树型菜单

    #### 四、XLoadTree 学习笔记 XLoadTree 与 XTree 的主要区别在于,XTree 只能生成静态树,而 XLoadTree 可以根据 XML 数据动态生成树形结构。XLoadTree 包含两个核心类:`WebFXLoadTree` 和 `WebFXLoadTreeItem`,...

    xloadtree.rar_java xml_xloadtree_xml 比较

    1. `xtree.css`:这是样式表文件,用于定义XLoadTree在网页中展示时的样式,包括颜色、字体、布局等,使得XML树结构更加美观易读。 2. `tree.dtd`:DTD(Document Type Definition)是XML文档的类型定义,它定义了...

    _2010.05.25_xtree2b-比xtree更好.推荐使用ok.目前最好的树菜单,firefox下正常

    通过这些文件,开发者可以学习如何在自己的项目中集成xtree2b,创建交互式的树形菜单。使用JavaScript和CSS,xtree2b能够实现响应式设计,使菜单在不同屏幕尺寸和设备上都能良好展示。此外,动态加载功能(如...

    java如何在在页面中实现树形菜单.pdf

    在Java web开发中,实现页面上的树形菜单是一项常见的需求,尤其在管理界面中,用于组织和展示层次化的数据。本篇文章将详细讲解如何利用...为了实现更复杂的功能,你可能需要进一步学习XTree的API文档和相关教程。

    extree 2.8

    EXTree 2.8 是一个专门用于Web开发的高级组件,它...在实际项目中,可以根据需要选择不同的示例代码进行学习和借鉴,以实现所需的功能。对于想要提升Web应用界面交互性的开发者来说,EXTree 2.8 是一个值得研究的工具。

    功能超强的treeview(可直接使用)

    `xloadtree.html`可能涉及动态加载树数据的功能,允许在需要时按需加载子节点,减少初始页面加载的时间。 `demo.html`和`demo2.html`是示例演示,通过实例展示了`treeview`的各种用法,包括基本操作、事件处理和...

    javascript树形菜单

    在学习和使用这些组件时,理解每个组件的API接口、配置选项和示例代码是非常重要的。同时,掌握基本的JavaScript和HTML/CSS知识是基础,因为这些组件通常是基于这些技术实现的。对于`dtree`和`dhtmlxtree`,了解XML...

Global site tag (gtag.js) - Google Analytics