This section describes how to use dtree to implement tree menus. For more information, see. Preparations:
Download the dtree.zipfile from http://www.jb51.net/jiaoben/31974.html.
Dtree.zip package introduction:
Dtree is a simple tree menu component written in JavaScript. It is currently free and open-source.
Currently, there are many tree menu components (such as ext). dtree is a simple and easy-to-understand js component,
Production can be achieved without complex operations, and data can be dynamically imported from the database
Unzip the package to the following parts:
Img Folder: Contains icons required for tree menu display
Api.html: dtree help document written by the author
Dtree.css: tree menu style
Dtree. js: the Core js file and code are all in it.
Example01.html: main method of tree menu instance dtree:
Dtree methods:
Add (parameters): adds a tree node. The actual parameters include nine add (id, pid, name, url, title, target, icon, iconOpen, open );
Location Parameter Alias type Function
1 id: the id of the int node (unique)
2 pid: id of the parent node of the int Node
3 name string node name displayed on the page
4. url of the string Node
5 title string prompt message displayed when the mouse is placed on the node
6 target string the target frame opened by the node Link
7 icon displayed when the icon string node is disabled
8. icons displayed when the iconOpen string node is enabled
9 whether or not to enable the first loading of an open bool Node
Note: The dtree. js file contains some default image paths. You can configure the images and paths by yourself ~ 57 rows
Open all () to open all nodes. You can call
CloseAll () disables all nodes and can be called before or after a tree object is created.
OpenTo (id, select) opens the node with the specified id. Two parameters can be passed:
Id: Unique id of the node to be opened
Select whether the node is selected
Config Configuration
Variable type default value description
Target string target of all nodes
FolderLinks bool true folder can be linked
UseSelection bool true node can be selected to highlight
UseCookies bool true tree can be remembered using cookies
UseLines bool true: Create a tree with a structured connection line
UseIcons bool true: Create a tree with a chart
UseStatusText bool false Replace the node url displayed in the status bar with the node name
CloseSameLevel bool false only one node at the same level can be open
InOrder bool false accelerates the display of the parent node tree
For example, tree. config. closeSameLevel = true; indicates that when a node of the same level is opened, other nodes of the same level in the open state will be disabled.
Sample Code:
The Code is as follows:
Tree
