Js树型控件Dtree使用

时间：2023-03-09 03:34:20
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>

Js树型控件Dtree使用

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

相关文章