A very useful jquery dtree tree diagram plugin tree diagram-dtree
Because of his good idea of the node setup, the database design of the database is more convenient.
Download the Dtree resource Bundle, reference the DTREE.CSS and dtree.js files, and then write the node.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>dtreeDemo</title>
<link href= "Dtree/dtree.css" Type=text/css rel=stylesheet>
<script src= "Dtree/dtree.js" type=text/javascript></script>
<body>
<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", "img/dtree/");
D.config.usecookies = false;//do not use cookies
D.config.usestatustext = true; Status bar display text
D.config.closesamelevel = true; Close other nodes at the same level
Root
D.add (0,-1, "Customer Relationship Management system");
First Level navigation
D.add (1, 0, "Customer Information", "", "", "MainFrame");
D.add (2, 0, "Customer service", "", "", "MainFrame");
D.add (3, 0, "Schedule/task", "", "", "MainFrame");
D.add (4, 0, "project Management", "", "", "MainFrame");
D.add (5, 0, "System Management", "", "", "MainFrame");
D.add (6, 0, "Data dictionary", "", "", "MainFrame");
D.add (7, 0, "message reminder", "", "", "MainFrame");
Level Two node
D.add (11,1, "customer");
D.add (12,1, "contact");
D.add (21,2, "customer complaint");
D.add (22,2, "complaint report");
D.add (31,3, "schedule");
D.add (32,3, "Mission");
D.add (41,4, "Project establishment");
D.add (42,4, "Project Approval");
D.add (43,4, "project Process");
D.add (44,4, "project Summary");
D.add (45,4, "Project Transaction");
D.add (51,5, "user");
D.add (52,5, "role");
D.add (61,6, "Enterprise Type-Classification");
D.add (62,6, "Enterprise Nature-type");
D.add (63,6, "depositary Bank-category");
D.add (64,6, "Source of information-classification");
D.add (65,6, "Customer satisfaction-Classification");
D.add (66,6, "Customer level-Classification");
D.add (71,7, "short message");
document.write (d);
D.add (Id,pid,name,url,title,target);
ID: Number PID: Parent node Name: Url:url Address title: Title Target: Jump Frame
</script>
</body>
:
A very useful jquery dtree tree diagram plugin