js如何实现 树型结构？

时间：2021-11-06 11:41:41
网上看了很多介绍生成的代码，用的控件的比较多
我的是一个页面，有个text，下面的树型结构里选择的节点显示在text里
所以要做出个checkbox的框子，后面跟着树的节点，然后点击选择显示！
这个效果怎么做？谢谢大家

5 个解决方案

#1

该回复于2015-05-26 12:56:56被管理员删除

#2

每个节点用div控制位置生成树
div中加个checkbox就可以了

#3

html代码：index.html 

<html>
<head>
<title></title>
<script src="tree.js"></script>
<style type="text/css"><!--

#containerul, #containerul ul{
	text-align:left;
	margin:0;				/* Removes browser default margins applied to the lists. */
	padding:0;				/* Removes browser default padding applied to the lists. */
}

#containerul li{
	margin:0 0 0 30px;			/* A left margin to indent the list items and give the menu a sense of structure. */
	padding:0;				/* Removes browser default padding applied to the list items. */
	list-style-type:none;			/* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{				/* Various styles to position the symbols next to the items in the menu. */
	float:left;
	width:12px;
	height:1em;
	background-position:0 50%;
	background-repeat:no-repeat;
}

--></style>
</head>

<body onload="initiate()">
	<ul id="containerul">
		<li> 网页教学网 
			<ul>
				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/2.html">建站指南</a> 
				</li>
      				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/3.html">网页制作</a>
				</li>
				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/4.html">动画制作</a>
				</li>
			</ul>
		</li>
		<li> 网络编程 
			<ul>
				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/24.html">Asp.net</a>
				</li>
				<li>
					<a href="http://www.webjx.com/htmldata/sort/25.html">Asp</a>
					<ul>
						<li>
							<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/26.html">PHP</a>
						</li>
						<li>
							<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/28.html">数据库</a>
						</li>
						<li>
							<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/29.html">CGI</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</body>
</html>



JS代码：tree.js 

var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

  cookieCount=0;

  if(document.cookie){

    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();

    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }

  }

  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

  temp=document.getElementById("containerul");

  for(var o=0;o<temp.getElementsByTagName("li").length;o++){

    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

      temp2				= document.createElement("span");
      temp2.className			= "symbols";
      temp2.style.backgroundImage	= (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }

      cookieCount++;

    }
    else{

      temp2				= document.createElement("span");
      temp2.className			= "symbols";
      temp2.style.backgroundImage	= "url(tree/page.png)";

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

    }

  }

}



function showhide(el){

  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(tree/minus.png)":"url(tree/plus.png)";

}



function writeCookie(){		// Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

  cookieArray=new Array()

  for(var q=0;q<temp.getElementsByTagName("li").length;q++){

    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

      }
    }

  }

  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}




图片：tree\minus.png   tree\page.png    tree\plus.png
分别是减号、空白图片、加号
tree是一个文件夹，和index.html为同一级目录

#4

多谢楼上的，我试试看看！

#5

下载梅花雪的树形结构

#1

该回复于2015-05-26 12:56:56被管理员删除

#2

每个节点用div控制位置生成树
div中加个checkbox就可以了

#3

html代码：index.html 

<html>
<head>
<title></title>
<script src="tree.js"></script>
<style type="text/css"><!--

#containerul, #containerul ul{
	text-align:left;
	margin:0;				/* Removes browser default margins applied to the lists. */
	padding:0;				/* Removes browser default padding applied to the lists. */
}

#containerul li{
	margin:0 0 0 30px;			/* A left margin to indent the list items and give the menu a sense of structure. */
	padding:0;				/* Removes browser default padding applied to the list items. */
	list-style-type:none;			/* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{				/* Various styles to position the symbols next to the items in the menu. */
	float:left;
	width:12px;
	height:1em;
	background-position:0 50%;
	background-repeat:no-repeat;
}

--></style>
</head>

<body onload="initiate()">
	<ul id="containerul">
		<li> 网页教学网 
			<ul>
				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/2.html">建站指南</a> 
				</li>
      				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/3.html">网页制作</a>
				</li>
				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/4.html">动画制作</a>
				</li>
			</ul>
		</li>
		<li> 网络编程 
			<ul>
				<li>
					<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/24.html">Asp.net</a>
				</li>
				<li>
					<a href="http://www.webjx.com/htmldata/sort/25.html">Asp</a>
					<ul>
						<li>
							<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/26.html">PHP</a>
						</li>
						<li>
							<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/28.html">数据库</a>
						</li>
						<li>
							<input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/29.html">CGI</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</body>
</html>



JS代码：tree.js 

var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

  cookieCount=0;

  if(document.cookie){

    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();

    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }

  }

  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

  temp=document.getElementById("containerul");

  for(var o=0;o<temp.getElementsByTagName("li").length;o++){

    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

      temp2				= document.createElement("span");
      temp2.className			= "symbols";
      temp2.style.backgroundImage	= (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }

      cookieCount++;

    }
    else{

      temp2				= document.createElement("span");
      temp2.className			= "symbols";
      temp2.style.backgroundImage	= "url(tree/page.png)";

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

    }

  }

}



function showhide(el){

  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(tree/minus.png)":"url(tree/plus.png)";

}



function writeCookie(){		// Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

  cookieArray=new Array()

  for(var q=0;q<temp.getElementsByTagName("li").length;q++){

    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

      }
    }

  }

  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}




图片：tree\minus.png   tree\page.png    tree\plus.png
分别是减号、空白图片、加号
tree是一个文件夹，和index.html为同一级目录

#4

多谢楼上的，我试试看看！

#5

下载梅花雪的树形结构
标签：

相关文章