Dtree-js tree control

Dtree-js tree control]

Posted on Lu shengdi read (1757) Comments (0) EDIT favorites

We recommend a good tree control, destroydrop.

Instance effects http://zengshu.hanban.org/zdOrg.ciic? Method = loginreturntype

Reprinted on http://liyunqiangyq.javaeye.com/blog/255918

JS component dtree easily implements tree menus: describes how to use dtree to construct a javascript tree menu and parameter configuration instructions.

I wrote a website over the past few days and used a tree menu written in Javascript. Some netizens asked me for this code. It was strange to know that many articles on the Internet are discussing the JS tree menu, after reading several instances, I found that I did not use this solution. Therefore, Baidu made a little effort and hoped that everyone would not waste their work.
(Many people on the internet interpret the dtree in a different way, resulting in a huge volume of garbage. I hope that everyone can respect the fruits of others' work, retain the copyright information, and then improve it. In this case, it is also a clean environment, if everyone is like this, we will not take a lot of detours in learning. When you can do this, we will gradually become a real programmer ).
First, the JS tree menu I use is not a dtree written by a foreigner.
Http://www.itstudy.cn/www/ArticleContent.asp? Id = 5
This infinitely refresh JS tree menu dtree
1. Unlimited menus can be set.
2. You do not need to use the framework.
3. Refresh. Multi-page navigation does not affect menus.
4. subtree creation at a limited level
5. Supports mainstream browsers: ie5, 6, and 7
6. node images can be set to change the image effect.

URL: http://www.destroydrop.com/javascripts/tree/
Let's take a look at the bottom of the time. The 2003 Geir landro people wrote it out, and I only use it now (admire)

Decompress the dtree.zip package.
The dtree directory contains the following files: example01.html, dtree. JS, api.html, dtree.css, and IMG.
Note: All files except api.html must be copied. Api.html is a dtree function introduction.

Open example01.html

<LINK rel = "stylesheet" href = "CSS/dtree.css" type = "text/CSS"/>
<SCRIPT type = "text/JavaScript" src = "JS/dtree. js"> </SCRIPT>

Two files that must be referenced.

Code for generating Tree nodes:
<SCRIPT type = "text/JavaScript">
<! --

D = new dtree ('D'); // create a tree object

D. Add (0,-1, 'My example tree'); // create a tree object.
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, 'trip to iceland', 'example01.html ', 'pictures of gullfoss and geysir ');
D. Add (11,9, 'Mom/'s birthday', 'example01.html ');
D. Add (, 'recycle bin', 'example01.html ', '','', 'img/trash.gif ');

Document. Write (d );

// -->
</SCRIPT>

D. Add (0,-1, 'My example tree ');
This sentence adds a root node to the tree and the display name is 'my example tree 'd. Add (, 'node 1', 'example01.html ');
This sentence adds a subnode under the root node of the tree. (D.add(see the api.html file)
Common:
The first parameter indicates the ID of the current node.
The second parameter indicates the ID of the parent node of the current node. The root node value is-1.
The third parameter indicates the text to be displayed on the node.
The fourth parameter is the node URL.
Fifth parameter, move the cursor to the title of the node
The sixth parameter is the target of the node.
The seventh parameter is used as the node icon. The default value is used when no icon is specified for the node.
The eighth parameter is used as the node opening icon. The default value is used when no icon is specified for the node.
The ninth parameter to determine whether the node is enabled

For more information about the instance, see the tree menu at www.amyou.cn.

Attached rlog Translation:

Attribute menu instructions

Function

Add ()
Add a node to the tree
It can only be called before the tree is created.
Required ID, PID, name
Parameters
Name type description
Unique ID number
PID number indicates the number of the parent node. The value of the root node is-1.
Name string node text label
URL string node URL
Title string node title
Target string node's target
Icon string is used as the node icon. The default value is used when no icon is specified for the node.
Iconopen string is used as the icon for opening a node. The default value is used when no icon is specified for a node.
Open Boolean determines whether a node is opened
Example
Mytree. Add (1, 0, 'My node', 'node.html ', 'node title', 'mainframe', 'img/musicfolder.gif ');

Openall ()
Open all nodes
It can be called before or after the tree is created.
Example
Mytree. openall ();

Closeall ()
Close all nodes
It can be called before or after the tree is created.
Example
Mytree. closeall ();

Opento ()
Opens the tree to a certain node and can also select the node.
It can only be called after the tree is created ..
Parameters
Name type description
ID number the unique ID of the node
Select Boolean determines whether a node is selected
Example
Mytree. opento (4, true );

Configuration
Variable type default value description
Target string true target of all nodes
Folderlinks Boolean true folder connectable
Useselection Boolean true node selectable (highlighted)
Usecookies Boolean true tree can use cookies to remember the status
Uselines Boolean true: Create a tree with a line
Useicons Boolean true: Create a tree with icons
Usestatustext Boolean false Replace the node URL displayed in the status bar with the node name
Closesamelevel Boolean false only one node with a parent level can be expanded. When this function is available, the openall () and closeall () functions will be unavailable.
Inorder Boolean false if the parent node is always added before the child node, use this parameter to accelerate the menu display.
Example
Mytree.config.tar get = "mytarget ";

I have studied the tree menu in extjs over the past few days. However, it is much easier to build a tree menu on a simple Web page or a dtree menu.