Js树型控件Dtree使用

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。