dtree地址：http://destroydrop.com/javascripts/tree/

Key features

  • Unlimited number of levels 无限级
  • Can be used with or without frames
  • Remembers the state of the tree between pages
  • Possible to have as many trees as you like on a page
  • All major browsers suported
    • Internet Explorer 5+
    • Netscape 6+
    • Opera 7+
    • Mozilla
  • Generates XHTML 1.0 strict validated output
  • Alternative images for each node

Dtree的源码非常短，可以分析下。

http://destroydrop.com/javascripts/tree/api/

add()

Adds a node to the tree.
Can only be called before the tree is drawn.

id, pid and name are required.

Parameters

Name Type Description
id Number Unique identity number.
pid Number Number refering to the parent node. The value for the root node has to be -1.
name String Text label for the node.
url String Url for the node.
title String Title for the node.
target String Target for the node.
icon String Image file to use as the icon. Uses default if not specified.
iconOpen String Image file to use as the open icon. Uses default if not specified.
open Boolean Is the node open.

Example

mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

 

<head>

    <title>Destroydrop &raquo; Javascripts &raquo; Tree</title>

    <link rel="StyleSheet" href="dtree.css" type="text/css" />

    <script type="text/javascript" src="dtree.js"></script>

</head>

<body>

<h1><a href="/">Destroydrop</a> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <a href="/javascripts/tree/">Tree</a></h1>

<h2>Example</h2>

<div class="dtree">

    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

    <script type="text/javascript">

        <!--

        d = new dTree('d');

        d.add(0,-1,'My example tree');

        d.add(1,0,'Node 1','example01.html');

        d.add(2,0,'Node 2','example01.html');

        d.add(3,1,'Node 1.1','example01.html');

        d.add(4,0,'Node 3','example01.html');

        d.add(5,3,'Node 1.1.1','example01.html');

        d.add(6,5,'Node 1.1.1.1','example01.html');

        d.add(7,0,'Node 4','example01.html');

        d.add(8,1,'Node 1.2','example01.html');

        d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

        d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');

        d.add(11,9,'Mom\'s birthday','example01.html');

        d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

        document.write(d);

        //-->

    </script>

</div>

更多：http://www.lmwlove.com/ac/ID868

Js树型控件Dtree使用的更多相关文章

  1. 强大的Js树型控件Dtree使用详解

    http://www.lmwlove.com/ac/ID868 在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree.从官方页面你能知道:dt ...

  2. VC中实现带有背景位图的树型控件

    当前许多应用程序都在使用树型控件时为其添加了背景位图,增强的控件的魅力,然而对于Visual C++编程爱好者来说,使用Visual C++MFC提供的树型控件(CTreeCtrl)本身就是一个难点, ...

  3. JS数量输入控件

    JS数量输入控件 很早看到kissy首页 有数量输入控件,就随便看了下功能 感觉也不怎么难 所以也就试着自己也做了一个, 当然基本的功能和他们的一样,只是用了自己的编码思想来解决这么一个问题.特此给大 ...

  4. MVC4加载zTree树小控件

    前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...

  5. vs2010开发activex（MFC）控件/ie插件(三)，js调用ocx控件的接口函数

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802280   js调用ocx控件的接口函数,先看demo效果:      简单测试过程 ...

  6. UIStepper步进器 ——事件驱动型控件,（一个+和-按钮的）

    - (void)viewDidLoad {    [super viewDidLoad];        //步进器 固定的size (94*27), 事件驱动型控件    UIStepper *st ...

  7. 用js给html控件赋值

      用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...

  8. 老李推荐：第14章9节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-遍历控件树查找控件

    老李推荐:第14章9节<MonkeyRunner源码剖析> HierarchyViewer实现原理-遍历控件树查找控件   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员 ...

  9. 2.23 js处理日历控件（修改readonly属性）

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

随机推荐

  1. 个性化品牌开始繁荣？为设计师和代工厂牵线的平台Maker's Row获得100万美元融资 | 36氪

    个性化品牌开始繁荣?为设计师和代工厂牵线的平台Maker's Row获得100万美元融资 | 36氪 个性化品牌开始繁荣?为设计师和代工厂牵线的平台Maker's Row获得100万美元融资

  2. ios 限制输入长度

    ----------------UITextField限制输入的长度------------ - (BOOL)textField:(UITextField *)textField shouldChan ...

  3. HBase的rowkey的设计原则

    HBase是三维有序存储的,通过rowkey(行键),column key(column family和qualifier)和TimeStamp(时间戳)这个三个维度可以对HBase中的数据进行快速定 ...

  4. 一个安全测试的CheckList

    转自:http://hi.baidu.com/dontcry/item/90c2bc466558c217886d1075 不登录系统,直接输入登录后的页面的URL是否可以访问: 不登录系统,直接输入下 ...

  5. Android:Service的非绑定式的创建和生命周期

    Android的Service若使用非绑定式的创建,则创建后将无法再与它取得联系.即无法传递消息參数等: 所以假设希望创建后仍然与其存在联系,那么能够參考我的前几篇博客<Android:Serv ...

  6. MODULE_DEVICE_TABLE

    1. MODULE_DEVICE_TABLE (usb, skel_table);该宏生成一个名为__mod_pci_device_table的局部变量,该变量指向第二个参数.内核构建时,depmod ...

  7. TimeSpinner( 时间微调) 组件

    本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个组件依赖于Spinner(微调)组件. 一． 加载方式//class 加载方式<input id="box& ...

  8. JavaScript中函数参数的按值传递与按引用传递（即按地址传递）

    首先声明一句:JavaScript中所有函数的参数都是按值传递的!不存在按引用传递! 在讲传递参数之前我们先来讲一下指针. 学过C指针的应该都知道,指针变量中保存的是一个地址,程序可以根据所保存的地址 ...

  9. 初探CSS

    css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  10. .NET程序集签名

    强命名程序集的一个好处是防篡改.假如我有一个程序集MyDll.dll,如果我用我自己的私钥进行签名将程序集中的内容进行哈希处理,其他人如果不知道我的私钥的话,就不能篡改我的这个程序集进行某些恶意的行为 ...