Preparation:
Please come from mehttps:///jiaoben/Download the file
Compression package introduction:
dtree is a simple tree menu component written in JavaScript, 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.
No complex operations are required to produce, and supports dynamic introduction of data from the database
After decompression, there are the following parts:
img folder: Contains the icons required for the tree menu display
: DTree Help Document written by the author
: Style of tree menu
: js core file, code is all in it
: Tree menu example Dtree main method introduction:
Introduction to the main methods of dtree:
add(parameters): add a tree node, and the actual parameters have 9 add(id,pid,name,url,title,target,icon,iconOpen,open);
Position Parameter Alias Type Function
1 id int The id of the node itself (unique)
2 pid int node parent node id
3 name string The name of the node displayed on the page
4 URL string node link address
5 title string The prompt message displayed by the mouse placed on the node
6 target string The target frame opened by the node link
7 icon string icon displayed when the node is closed
8 iconOpen string icon displayed when the node is opened
9 Open bool node is open for the first time
Note: There are some default image paths in the file. You can configure the image and path yourself. I downloaded it from lines 44 to 57
openAll() opens all nodes and can be called before or after the tree object is created.
closeAll() closeAll() closes all nodes and can be called before or after the tree object is created
openTo(id, select) opens the node with the specified id and can pass two parameters:
id Specifies the unique id of the node to be opened
select Whether to put the node in the selected state
config configuration
Variable Type Default Value Description
target string target string
folderLinks bool true folder can be linked
useSelection bool true node can be selected to highlight
useCookies bool true tree can use cookies to remember status
useLines bool true Create a tree with structural connection lines
useIcons bool true Create a tree with a chart
useStatusText bool false Use the node name to replace the node url displayed in the status bar
closeSameLevel bool false Only one node at the same level is allowed to be open
inOrder bool false accelerates the display of parent node tree
For example: =true; means that when opening a certain level of node, other nodes at the same level that are in the open state will be closed
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:///TR/xhtml1/DTD/">
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="" type="text/css" /><!-- Introducing css stylesheet -->
<script type="text/javascript" src=""></script><!-- Introducing js scripts -->
</head>
<body>
<div class="dtree"><!--Create a div layer and specify class as "dtree". At this time, the layer references the style of dtree -->
<script type="text/javascript">
d = new dTree('d');//new a tree object
//Set the nodes of the tree and their related properties
(0,-1,'My example tree');
(1,0,'Node 1','');
(2,0,'Node 2','');
(3,1,'Node 1.1','');
(4,0,'Node 3','');
(5,3,'Node 1.1.1','');
(6,5,'Node 1.1.1.1','');
(7,0,'Node 4','');
(8,1,'Node 1.2','');
(9,0,'My Pictures','','Pictures I\'ve taken over the years','','','img/');
(10,9,'The trip to Iceland','','Pictures of Gullfoss and Geysir');
(11,9,'Mom\'s birthday','');
(12,0,'Recycle Bin','','','','img/');
//config configuration, sets folders that cannot be linked, that is, those with child nodes cannot be linked.
=false;
(d);
</script>
</div>
</body>
</html>
Please come from mehttps:///jiaoben/Download the file
Compression package introduction:
dtree is a simple tree menu component written in JavaScript, 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.
No complex operations are required to produce, and supports dynamic introduction of data from the database
After decompression, there are the following parts:
img folder: Contains the icons required for the tree menu display
: DTree Help Document written by the author
: Style of tree menu
: js core file, code is all in it
: Tree menu example Dtree main method introduction:
Introduction to the main methods of dtree:
add(parameters): add a tree node, and the actual parameters have 9 add(id,pid,name,url,title,target,icon,iconOpen,open);
Position Parameter Alias Type Function
1 id int The id of the node itself (unique)
2 pid int node parent node id
3 name string The name of the node displayed on the page
4 URL string node link address
5 title string The prompt message displayed by the mouse placed on the node
6 target string The target frame opened by the node link
7 icon string icon displayed when the node is closed
8 iconOpen string icon displayed when the node is opened
9 Open bool node is open for the first time
Note: There are some default image paths in the file. You can configure the image and path yourself. I downloaded it from lines 44 to 57
openAll() opens all nodes and can be called before or after the tree object is created.
closeAll() closeAll() closes all nodes and can be called before or after the tree object is created
openTo(id, select) opens the node with the specified id and can pass two parameters:
id Specifies the unique id of the node to be opened
select Whether to put the node in the selected state
config configuration
Variable Type Default Value Description
target string target string
folderLinks bool true folder can be linked
useSelection bool true node can be selected to highlight
useCookies bool true tree can use cookies to remember status
useLines bool true Create a tree with structural connection lines
useIcons bool true Create a tree with a chart
useStatusText bool false Use the node name to replace the node url displayed in the status bar
closeSameLevel bool false Only one node at the same level is allowed to be open
inOrder bool false accelerates the display of parent node tree
For example: =true; means that when opening a certain level of node, other nodes at the same level that are in the open state will be closed
Sample code:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:///TR/xhtml1/DTD/">
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="" type="text/css" /><!-- Introducing css stylesheet -->
<script type="text/javascript" src=""></script><!-- Introducing js scripts -->
</head>
<body>
<div class="dtree"><!--Create a div layer and specify class as "dtree". At this time, the layer references the style of dtree -->
<script type="text/javascript">
d = new dTree('d');//new a tree object
//Set the nodes of the tree and their related properties
(0,-1,'My example tree');
(1,0,'Node 1','');
(2,0,'Node 2','');
(3,1,'Node 1.1','');
(4,0,'Node 3','');
(5,3,'Node 1.1.1','');
(6,5,'Node 1.1.1.1','');
(7,0,'Node 4','');
(8,1,'Node 1.2','');
(9,0,'My Pictures','','Pictures I\'ve taken over the years','','','img/');
(10,9,'The trip to Iceland','','Pictures of Gullfoss and Geysir');
(11,9,'Mom\'s birthday','');
(12,0,'Recycle Bin','','','','img/');
//config configuration, sets folders that cannot be linked, that is, those with child nodes cannot be linked.
=false;
(d);
</script>
</div>
</body>
</html>