js树状列表代码下载（js树状图插件）

本篇文章给大家谈谈js树状列表代码下载，以及js树状图插件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、JS树状菜单
• 2、用javascript 树形菜单（可拖动效果）
• 3、如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。
• 4、js, 遍历树形数组 根据id获取单个
• 5、关于一个js制作的多级树型菜单如何使他默认为展开所有结点的问题 在线等 急
• 6、JS实现树形选择器

JS树状菜单

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

meta name="keywords" content=""

style type=text/css

body {

background:#799AE1;

margin:0px;

font:normal 12px 宋体;

background-color: #0099FF;

}

table { border:0px; }

td { font:normal 12px 宋体; }

img { vertical-align:bottom; border:0px; }

a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; }

a:hover { color:#428EFF }

.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; }

.menu_title { }

.menu_title span { position:relative; top:2px; left:8px; color:#215DC6; font-weight:bold; }

.menu_title2 { }

.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; }

/style

script language=javascript

function menuShow(obj,maxh,obj2)

{

if(obj.style.pixelHeightmaxh)

{

obj.style.pixelHeight+=maxh/20;

obj.filters.alpha.opacity+=5;

obj2.background="image/menudown.gif";

if(obj.style.pixelHeight==maxh/10)

obj.style.display='block';

myObj=obj;

myMaxh=maxh;

myObj2=obj2;

setTimeout('menuShow(myObj,myMaxh,myObj2)','5');

}

}

function menuHide(obj,maxh,obj2)

{

if(obj.style.pixelHeight0)

{

if(obj.style.pixelHeight==maxh/20)

obj.style.display='none';

obj.style.pixelHeight-=maxh/20;

obj.filters.alpha.opacity-=5;

obj2.background="image/menuup.gif";

myObj=obj;

myMaxh=maxh

myObj2=obj2;

setTimeout('menuHide(myObj,myMaxh,myObj2)','5');

}

else

if(whichContinue)

whichContinue.click();

}

function menuChange(obj,maxh,obj2)

{

if(obj.style.pixelHeight)

{

menuHide(obj,maxh,obj2);

whichOpen='';

whichcontinue='';

}

else

if(whichOpen)

{

whichContinue=obj2;

whichOpen.click();

}

else

{

menuShow(obj,maxh,obj2);

whichOpen=obj2;

whichContinue='';

}

}

/script

base target=main

/head

body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;"

table cellpadding=0 cellspacing=0 width=158 align=center

tr style="cursor:hand;"

td height=42 valign=bottom

img src=44/title.gif width=158 height=38

/td

/tr

/table

br

table width=158 border="0" align=center cellpadding=0 cellspacing=0

tr style="cursor:hand;"

td height=25 background=image/menudown.gif class=menu_title id=menuTitle1 onclick="menuChange(menu1,80,menuTitle1);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';

span系统选项/span

/td

/tr

tr

td

div class=sec_menu style="width:158px;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1

table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"

tr

td height=20

img src="image/nofollow.gif" width="15" height="15"a href=../../3our.com/index.html onfocus=this.blur();安全选项/a

/td

/tr

tr

td height=20

img src="image/nofollow.gif" width="15" height="15"a href=../../3our.com/index.html onfocus=this.blur();垃圾邮件选项/a

/td

/tr

tr

td height=20

img src="image/nofollow.gif" width="15" height="15"a href=../../3our.com/index.html onfocus=this.blur();

动态规则选项/a

/td

/tr

/table

/div

/td

/tr

/table

script language=javascript

var whichOpen=menuTitle1;

var whichContinue='';

/script

table width=158 border="0" align=center cellpadding=0 cellspacing=0

tr style="cursor:hand;"

td height=25 background=image/menuup.gif class=menu_title id=menuTitle2 onclick="menuChange(menu2,120,menuTitle2);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';

span系统规则/span

/td

/tr

tr

td

div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu2

table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

IP过滤规则/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

信封过滤规则/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

信头过滤规则/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

信体过滤规则/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

附件过滤规则/a

/td

/tr

/table

/div

/td

/tr

/table

table width=158 border="0" align=center cellpadding=0 cellspacing=0

tr style="cursor:hand;"

td height=25 background=image/menuup.gif class=menu_title id=menuTitle3 onclick="menuChange(menu3,120,menuTitle3);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';

span系统管理/span

/td

/tr

tr

td

div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu3

table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

用户管理/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

进程管理/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

主机运行状态/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

数据备份/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

垃圾目录管理/a

/td

/tr

/table

/div

/td

/tr

/table

table width=158 border="0" align=center cellpadding=0 cellspacing=0

tr style="cursor:hand;"

td height=25 background=image/menuup.gif class=menu_title id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';

span系统统计/span

/td

/tr

tr

td

div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu4

table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

IP过滤统计/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

信封过滤统计/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

信头过滤统计/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

信体过滤统计/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

附件过滤统计/a

/td

/tr

tr

td height=20

img src=image/nofollow.gifa href=../../3our.com/index.html onfocus=this.blur();

动态规则统计/a

/td

/tr

/table

/div

/td

/tr

/table

table width=158 border="0" align=center cellpadding=0 cellspacing=0

tr style="cursor:hand;"

td height=25 background=44/title_bg_quit.gif class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';

span退出系统/span /td

/tr

/table

/body

/html

用javascript 树形菜单（可拖动效果）

然后根据鼠标左键在菜单坐标内按下放开的事件提取当前鼠标的x，y坐标，然后修改属性菜单的top和left属性 或者当鼠标在菜单坐标内按下之后触发鼠标的移动事件，然后在移动事件里设置菜单的top和left对应鼠标当前坐标y和x，这样当鼠标移动时菜单的坐标也会根本改变，实现同步移动

如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。

首先说树形结构，国内有个开源的js控件叫zTree，支持复选。

然后下拉框你可能需要自己做一个（html输入框+右边的一个图标按钮）。

最后，用一个隐藏的div把树形结构包起来，这个div设置成绝对定位，在下拉框右侧选择按钮的单击事件处理函数里，显示这个隐藏的div，并把它的位置设置成在下拉框下面就行了。

思路就是这样，要么楼主可以找找有没有其他更现成的控件，extjs4我记得有类似的，但是他的复选功能不太符合中国习惯，也许现在的版本改好了，你可以查查试试看。

js, 遍历树形数组 根据id获取单个

//传入要查找的数据集，目标id，返回目标ID对应的数据集合

//jsonData:数据集

//destID:目标ID

//json:目标ID结果集

function GetSubJson(jsonData, destID, json) {

for (var i = 0; i jsonData.length; i++) {

if (jsonData[i].id == destID)

json.push(jsonData[i]);

else {

if (jsonData[i].hasOwnProperty("children")) {

GetSubJson(jsonData[i].children, destID, json);

}

}

}

}

//例如

var json = [];

GetSubJson(a, "2016", json);

关于一个js制作的多级树型菜单如何使他默认为展开所有结点的问题 在线等 急

先生成树,然后调用函数expandAll(),例如:mytree.expandAll();

你能不能把你的代码贴出来一下呀？一般这段代码写在你的left.htm文件里面。

JS实现树形选择器

这个简单，我写了段代码，你copy过去看下是不是你要的效果！望采纳！！

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title制作树形菜单/title

style type="text/css"

div{/*隐藏层*/

display:none;

}

a {/*文字链接的背影样式*/

font-size:13px;

color: #ffffff;

text-decoration: none;

background-color:#669933;

width:100px;

line-height:25px;

text-align:center;

display: block;

border-right:1px solid #ffffff;

border-bottom:1px solid #ffffff;

}

a:hover {

/*鼠标在文字链接上时的文字背景样式*/

font-size:13px;

color: #ffffff;

background-color:#ee9d01;

width:100px;

text-align:center;

display: block;

}

/style

script type="text/javascript"

function show(d){

document.getElementById(d).style.display='block'; //显示层

}

function hide(d){

document.getElementById(d).style.display='none'; //隐藏层

}

/script

/head

body

table border="0" cellspacing="0" cellpadding="0"

tr

tda href="#" onmousemove="show(1)" onmouseout="hide(1)"手机数码/a/td

tda href="#" onmousemove="show(2)" onmouseout="hide(2)"淘宝集市/a/td

tda href="#" onmousemove="show(3)" onmouseout="hide(3)"品牌商城/a/td

/tr

tr

td

div id="1"

a href="#"手机数码1/a

a href="#"手机数码2/a

a href="#"手机数码3/a

/div

/td

td

div id="2"

a href="#"淘宝集市1/a

a href="#"淘宝集市2/a

a href="#"淘宝集市3/a

/div

/td

td

div id="3"

a href="#"品牌商城1/a

a href="#"品牌商城2/a

a href="#"品牌商城3/a

/div

/td

/tr

/table

/body

/html

关于js树状列表代码下载和js树状图插件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。