我已经实现了一个树形结构 [英] I have implemented a tree structure
本文介绍了我已经实现了一个树形结构的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经在JavaScript (tree.html)中实现了树形结构.但是当我在我的project.html 中实现同一棵树时，该树将水平显示，而不是正常的垂直视图.
如何解决该问题?
tree.html
I have implemented a tree structure in JavaScript(tree.html). But when I am implementing the same tree in my project.html, the tree is getting displayed horizontally instead of the normal vertical view.
How can I rectify the problem?
tree.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="simpletree.js"></script>
<link rel="stylesheet" type="text/css" href="simpletree.css" />
</head>
<body>
<a href="java<!-- no -->script:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a> | <a href="java<!-- no -->script:ddtreemenu.flatten('treemenu1', 'contact')">Contact All</a>
<ul id="treemenu1" class="treeview">
<li><a href="java<!-- no -->script:insertText('Arts & Humanities','textIns');" class="tree_link">Arts & Humanities</a></li>
<li><a href="java<!-- no -->script:insertText('Business & Economy','textIns');" class="tree_link">Business & Economy</a></li>
<li><a href="java<!-- no -->script:insertText('Computer & Internet','textIns');" class="tree_link">Computer & Internet</a>
<ul>
<li><a href="java<!-- no -->script:insertText('Games','textIns');" class="tree_link">Games</a></li>
<li><a href="java<!-- no -->script:insertText('Movies','textIns');" class="tree_link">Movies</a></li>
<li><a href="java<!-- no -->script:insertText('Shopping','textIns');" class="tree_link">Shopping</a></li>
</ul>
</li>
<li><a href="java<!-- no -->script:insertText('News & Media','textIns');" class="tree_link">News & Media</li>
<li><a href="java<!-- no -->script:insertText('Entertainment','textIns');" class="tree_link">Entertainment</a>
<ul>
<li><a href="java<!-- no -->script:insertText('Entertainment','textIns');" class="tree_link">Recreation & Sports</a></li>
</ul>
</li>
<li><a href="java<!-- no -->script:insertText('Science & Technology','textIns');" class="tree_link">Science & Technology</a></li>
</ul>
<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", true)
//ddtreemenu.createTree("treemenu2", false)
</script>
</body>
</html>
simpletree.js
simpletree.js
var persisteduls=new Object()
var ddtreemenu=new Object()
ddtreemenu.closefolder="list.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="list.gif" //set image path to "open" folder image
//////////No need to edit beyond here///////////////////////////
ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}
ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement. önclick=function(e){
ddtreemenu.preventpropagate(e)
}
}
ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}
ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}
ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}
////A few utility functions below//////////////////////
ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}
ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}
ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
simpletree.css
simpletree.css
@charset "utf-8";
/* CSS Document */
.treeview a {
text-decoration: none;
}
.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}
.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}
.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: url(list.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}
.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}
myproject.html
myproject.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="simpletree.js"></script>
<link rel="stylesheet" type="text/css" href="simpletree.css" />
<script type="text/javascript">
function getAnchorText(anchorObj) {
var textBoxValue = anchorObj.innerHTML;
document.forms["form1"].elements["category1"].value = textBoxValue;
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
$('a[class="tree_link"]').mouseup(function(){
$('#category1').val($(this).text());
});
});
</script>
<style type="text/css" rel="stylesheet">
#tree li{
list-style-type:none;
font-family: "Myriad Pro";
font-size:14px;
}
#topNodes{
margin-left:0px;
padding-left:0px;
}
#topNodes ul{
margin-left:20px;
padding-left:0px;
display:none;
}
#tree .tree_link{
line-height:13px;
padding-left:2px;
}
#tree img{
padding-top:2px;
}
#tree a{
color: #000000;
text-decoration:none;
}
.activeNodeLink{
background-color: #316AC5;
color: #FFFFFF;
font-weight:bold;
}
.slidingDiv {
/* background:url(images/slidingDiv.png) no-repeat;
*/ height: 100%;
width: 100%;
}
.show_hide {
display:none;
}
</style>
<script type="text/javascript">
var counter = 4;
var limit = 8;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding 7 title inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className="reg-login iclear";
newdiv.id="title";
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/css/style.css';
newdiv.appendChild(style);
newdiv.innerHTML = "<ul><li class='ilable'>Title "+counter+ "</li><li class='cInput' style='list-style-type:none;'><input name='title[]' type='text' /></li></ul>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
var counter1 = 4;
var limit1 = 8;
function add(divName){
if (counter1 == limit1) {
alert("You have reached the limit of adding 7 Description inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className="reg-login iclear";
newdiv.id="description";
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/css/style.css';
newdiv.appendChild(style);
newdiv.innerHTML = "<ul><li class='ilable'>Long description "+counter1+ "</li><li class='ctextarea' style='list-style-type:none;'><textarea cols='5' rows='5' name='comment[]' class='txtClass'> </textarea></li></ul> ";
document.getElementById(divName).appendChild(newdiv);
counter1++;
}
}
</head>
<!-- banner starts here -->
<div class="accountBanner"> <span class="accountBannerAdd fltRight">
<h1>Article submission service form</h1>
</span>
<div class="iclear"></div>
</div>
<!-- banner starts here -->
<!-- container starts here -->
<div id="container">
<div class="infoWarning">You will not be able to change this data once filled and submitted. So kindly fill in correct data</div>
<form method="post" action="" name="aform">
<div id="sample">
</div>
<div class="reg-login iclear">
<ul>
<li class="ilable">Name: *</li>
<li class="cInput">
<input name="article_name" type="text" >
</li>
<li class="ilable">URL of your site *</li>
<li class="cInput">
<input name="url" type="text" id="url" />
</li>
</ul>
</div>
<div class="reg-login iclear" id="title">
<div class="infoIdea">Don't have your title be more than 50 Character and dont forget to include keyword in your title</div>
<ul>
<li class="ilable">Title 1 *</li>
<li class="cInput"><input name="title[1]" type="text" />
</li>
<li class="ilable">Title 2 *</li>
<li class="cInput">
<input name="title[]" type="text" />
</li>
<li class="ilable">Title 3 *</li>
<li class="cInput">
<input name="title[]" type="text" />
</li>
<li class="ilable"></li>
</ul>
</div>
<div class="reg-login iclear" align="center">
<ul >
<li style="width:300px;"> <span class="buttons"><button type="button" class="regular" onClick="return addInput('title');"><img src="images/add1.png" alt=""/> Add 1 more Title </button></span></li>
</ul>
</div>
<div class="reg-login iclear" id="description">
<div class="infoIdea">Don't have your description be more than 250 Character long</div>
<ul>
<li class="ilable">Long description 1 *</li>
<li class="ctextarea">
<textarea cols="5" rows="5" name="comment[1]" class="txtClass" id="description1"> </textarea>
</li>
<li class="ilable">Long description 2 *</li>
<li class="ctextarea">
<textarea cols="5" rows="5" name="comment[]" class="txtClass" id="description2"> </textarea>
</li>
<li class="ilable">Long description 3 *</li>
<li class="ctextarea">
<textarea cols="5" rows="5" name="comment[]" class="txtClass" id="description3"> </textarea>
</li>
<li class="ilable"></li>
</ul>
</div>
<div class="reg-login iclear" align="center">
<ul >
<li style="width:300px;"> <span class="buttons"><button type="button" class="regular" onClick="return add('description');"><img src="images/add1.png" alt=""/> Add 1 more Description</button></span></li>
</ul>
</div>
<div class="reg-login iclear">
<div class="infoIdea">Type your Keyword with saparated with comma</div>
<ul>
<li class="ilable">Keyword *</li>
<li class="cInput">
<input name="keyword" type="text" id="keyword" />
</li>
</ul>
</div>
<div class="reg-login iclear">
<div class="infoIdea">Try to be as specific as possible for your site category</div>
<ul>
<li class="ilable">Category 1 *</li>
<li class="cInput">
<input name="category1" type="text" id="category1" />
<span class="buttons btnposs"><a href="java<!-- no -->script:void(0)" class="show_hide"> <img src="images/folders_tree.png" alt=""/> Category tree </a></span>
</li>
<div class="slidingDiv">
<a href="java<!-- no -->script:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a> | <a href="java<!-- no -->script:ddtreemenu.flatten('treemenu1', 'contact')">Contact All</a>
<ul id="treemenu1" class="treeview">
<li><a href="java<!-- no -->script:insertText('Arts & Humanities','textIns');" class="tree_link">Arts & Humanities</a></li>
<li><a href="java<!-- no -->script:insertText('Business & Economy','textIns');" class="tree_link">Business & Economy</a></li>
<li><a href="java<!-- no -->script:insertText('Computer & Internet','textIns');" class="tree_link">Computer & Internet</a>
<ul>
<li><a href="java<!-- no -->script:insertText('Games','textIns');" class="tree_link">Games</a></li>
<li><a href="java<!-- no -->script:insertText('Movies','textIns');" class="tree_link">Movies</a></li>
<li><a href="java<!-- no -->script:insertText('Shopping','textIns');" class="tree_link">Shopping</a></li>
</ul>
</li>
<li><a href="java<!-- no -->script:insertText('News & Media','textIns');" class="tree_link">News & Media</li>
<li><a href="java<!-- no -->script:insertText('Entertainment','textIns');" class="tree_link">Entertainment</a>
<ul>
<li><a href="java<!-- no -->script:insertText('Entertainment','textIns');" class="tree_link">Recreation & Sports</a></li>
</ul>
</li>
<li><a href="java<!-- no -->script:insertText('Science & Technology','textIns');" class="tree_link">Science & Technology</a></li>
</ul>
<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", true)
//ddtreemenu.createTree("treemenu2", false)
</script>
</div>
<li class="ilable">Category 2 *</li>
<li class="cInput">
<input name="category2" type="text" id="category2"/>
<span class="buttons btnposs"><a href="#" class="regular"> <img src="images/folders_tree.png" alt=""/> Category tree </a></span>
</li>
<li class="ilable">Category 3 *</li>
<li class="cInput">
<input name="category3" type="text" id="category3" /><span class="buttons btnposs"><a href="#" class="regular"> <img src="images/folders_tree.png" alt=""/> Category tree </a></span>
</li>
</ul>
</div>
<div class="reg-login iclear">
<ul>
<li class="ilable"></li>
<li><span class='buttons'><button type="submit" onclick= "return check();" id="submit" name="submit" value="submit"><img src="images/iconSubmit.png">Submit</button></span>
<span class='buttons'><button type="reset" ><img src="images/iocnUpdate.png">Reset</button></span></li>
</ul>
</div>
</div>
</form>
<!-- container ends here -->
</div>
<div class="cBottom fltLeft"></div>
Regards
Regards
推荐答案
(document).ready(function(){
(document).ready(function(){
(".slidingDiv").hide();
(".show_hide").show();
这篇关于我已经实现了一个树形结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
