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. MSSQL 标准PROC 写法

    MSSQL 标准PROC 写法 ALTER PROC [dbo].[usp_ADM_InsertFlowSortInfo]@FlowSortName NVARCHAR(50),AS/*PAGE: 分类 ...

  2. poj2955：括号匹配，区间dp

    题目大意: 给一个由,(,),[,]组成的字符串,其中(),[]可以匹配,求最大匹配数 题解:区间dp: dp[i][j]表示区间 [i,j]中的最大匹配数 初始状态 dp[i][i+1]=(i,i+ ...

  3. error userinfo error pos 5 友盟分享 网页分享(无新浪微博客户端)

    集成友盟分享的时候,其中微博分享,如果没有添加测试账号,就会出现{error userinfo error pos  5}的错误添加测试账号才能分享在测试信息下添加测试账号

  4. 面向对象CSS (OOCSS)

    新版 OOCSS 请关注 http://www.oocss.cc/ 时下流行面向对象,那么有没有可能把样式表也面向对象一下呢,将现在的CSS(Cascading Style Sheets层叠样式表)进 ...

  5. DevExpress之进度条

    progressBarControl和marqueeProgressBarControl 一.progressBarControl progressBarControl是一个进度条控件 几个重要参数 ...

  6. 获取布局 ActionBar

    LayoutInflater inflater = getLayoutInflater();View imageLayout = inflater.inflate(R.layout.preferenc ...

  7. Nested Class Templates

      Templates can be defined within classes or class templates, in which case they are referred to as ...

  8. 模拟jquery封装选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. pwn学习之dl_resolve学习篇

    一:首先来了解一下linux下常见的攻击缓解机制: CANARY:(金丝雀值,指的是矿工曾利用金丝雀来确认是否有气体泄漏,如果金丝雀因为气体泄漏而中毒死亡,可以给矿工预警),类似于windows GS ...

  10. HTML基础总结<链接>

    HTML 超链接(链接) HTML使用标签 <a>来设置超文本链接. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. ...