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. 如何在Windows下使用matplotlib

    在开始之前,向matplotlib的创造者,John D. Hunter表示崇高的敬意,和无尽的怀念. (John D. Hunter 1968-2012) matplotlib是一个给予Python ...

  2. HDU_2057——64位无符号16进制数的运算

    Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...

  3. Bogo排序

    我不知道这个能不能算排序...维基上有这个排序名称...但我感觉它纯碎在卖萌... 基本思路:随机打乱数组,然后看看数组有序了没,如果没?继续随机打乱继续看...直至有序. 神一般的低效.排几十个数不 ...

  4. shellAPP

    1,linux操作日志记录,记录从各个ip登陆到系统的账号,指向命令及命令执行时间 #!/bin/bashecho "export PROMPT_COMMAND='{ msg=\$(hist ...

  5. 让iframe调用页面的背景透明

    需求:在一个div里面嵌套一个iframe(src="ui.html"),div有背景图片,要让iframe里的内容透明地显示在div层上. 刚开始直接把iframe放在div中, ...

  6. 原生js实现轮播

    1,效果图 https://ga20.github.io/slider/ 2,原理图 分三步: 将视口元素设置overflow:hidden 将其图片子元素设置float:left 让橙色的框(包裹) ...

  7. C语言自动类型转换

    自动转换遵循以下规则: 1) 若参与运算量的类型不同,则先转换成同一类型,然后进行运算. 2) 转换按数据长度增加的方向进行,以保证精度不降低.(eg:int型和long型运算时,先把int量转成lo ...

  8. (转) xcodebuild和xcrun自动化编译ipa包 笔记

    转自:http://blog.csdn.net/totogo2010/article/details/8883100 打包过程 xcodebuild负责将工程源文件编译成xxx.app xcrun负责 ...

  9. 【爬虫问题】爬取tv.sohu.com的页面, 提取视频相关信息

    尝试解决下面的问题 问题: 爬取tv.sohu.com的页面, 提取视频相关信息,不可用爬虫框架完成 何为视频i关信息?属性有哪些? 需求: 做到最大可能的页面覆盖率 *使用httpClient 模拟 ...

  10. 自适应网页设计（Responsive Web Design）(转)

    作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...