求js树形源码，最好是“资源管理器”的那种（有图片最好）

GOOGLE可以搜到很多的。
不过建议楼主用jQuery。这个里面有tree的，而且做的很好。

最好不要google搜到的，因为那几个都不符合要求，还有div的标签好些，谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>无标题页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
{
FONT-SIZE: 12px
}
#menuTree A {
COLOR: #566984; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT src="Left.files/TreeNode.js" type=text/javascript></SCRIPT>
<SCRIPT src="Left.files/Tree.js" type=text/javascript></SCRIPT>
<META content="MSHTML 6.00.2900.5848" name=GENERATOR>
</HEAD>
<BODY
style="BACKGROUND-POSITION-Y: -120px; BACKGROUND-IMAGE: url(../images/bg.gif); BACKGROUND-REPEAT: repeat-x">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%">
  <TBODY>
    <TR>
      <TD width=10 height=29><IMG src="Left.files/bg_left_tl.gif"></TD>
      <TD
    style="FONT-SIZE: 18px; BACKGROUND-IMAGE: url(../images/bg_left_tc.gif); COLOR: white; FONT-FAMILY: system">系统菜单</TD>
      <TD width=10><IMG src="Left.files/bg_left_tr.gif"></TD>
    </TR>
    <TR>
      <TD style="BACKGROUND-IMAGE: url(../images/bg_left_ls.gif)"></TD>
      <TD id=menuTree
    style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; HEIGHT: 100%; BACKGROUND-COLOR: white"
    vAlign=top></TD>
      <TD style="BACKGROUND-IMAGE: url(../images/bg_left_rs.gif)"></TD>
    </TR>
    <TR>
      <TD width=10><IMG src="Left.files/bg_left_bl.gif"></TD>
      <TD style="BACKGROUND-IMAGE: url(../images/bg_left_bc.gif)"></TD>
      <TD width=10><IMG
src="Left.files/bg_left_br.gif"></TD>
    </TR>
  </TBODY>
</TABLE>
<SCRIPT type=text/javascript>
var tree = null;var root = new TreeNode('系统菜单');/*
var fun1 = new TreeNode('公司管理');
var fun2 = new TreeNode('机构管理', 'BranchMgr.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun1.add(fun2);
var fun3 = new TreeNode('部门管理', 'DepartmentMgr.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun1.add(fun3);
var fun4 = new TreeNode('员工管理', 'EmployeeMgr.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun1.add(fun4);
root.add(fun1);
*/
var fun5 = new TreeNode('个人管理');
var fun6 = new TreeNode('个人管理', 'MySchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun6);
var fun7 = new TreeNode('个人信息', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun7);
var fun8 = new TreeNode('修改密码', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun8);
var fun9 = new TreeNode('写新邮件', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun9);
var fun10 = new TreeNode('写新日记', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun10);
var fun11 = new TreeNode('待办事项', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun11);
var fun12 = new TreeNode('通讯信息', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun12);
var fun13 = new TreeNode('上传文件', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun13);
var fun14 = new TreeNode('日记查看', 'MyNote.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun5.add(fun14);
root.add(fun5);var fun15 = new TreeNode('文档管理');
var fun16 = new TreeNode('文档管理', 'DocumentMgr.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun15.add(fun16);
var fun17 = new TreeNode('文件浏览', 'DeptSchedule.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun15.add(fun17);
var fun18 = new TreeNode('回收站', 'Recycler.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun15.add(fun18);
var fun19 = new TreeNode('文章搜索', 'FileSearch.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun15.add(fun19);
root.add(fun15);var fun20 = new TreeNode('消息传递');
var fun21 = new TreeNode('消息管理', 'MessageMgr.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun20.add(fun21);
var fun22 = new TreeNode('信箱', 'MailBox.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun20.add(fun22);
root.add(fun20);
var fun23 = new TreeNode('系统管理');
var fun24 = new TreeNode('菜单管理', 'MenuSort.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun23.add(fun24);
var fun25 = new TreeNode('角色管理', 'RoleMgr.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun23.add(fun25);
var fun26 = new TreeNode('登录日志', 'LoginLog.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun23.add(fun26);
var fun27 = new TreeNode('操作日志', 'OperationLog.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun23.add(fun27);
root.add(fun23);tree = new Tree(root);tree.show('menuTree')
//var fun20 = new TreeNode('菜单排序', 'MenuSort.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun16.add(fun20);root.add(fun16);//var fun21 = new TreeNode('考勤管理');
//var fun22 = new TreeNode('签到签退', 'SignInOrOut.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun21.add(fun22);
//var fun23 = new TreeNode('考勤查询', 'HistoryQuery.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun21.add(fun23);
//var fun24 = new TreeNode('考勤统计', 'TimeStatistics.aspx', 'tree_node.gif', null, 'tree_node.gif', null);fun21.add(fun24);root.add(fun21);tree = new Tree(root);tree.show('menuTree')
</SCRIPT>
</BODY>
</HTML>

Tree.jsfunction Tree(rootNode) {
var $ = this;
this.root = rootNode;

this.show = function(container) {
$.update($.root);
this.root.expand();

if(container.tagName)
container.appendChild($.root.container);
else if(typeof container == "string")
document.getElementById(container).appendChild($.root.container);
}

this.update = function(parent) {
parent.indent();
for (var i = 0; i < parent.children.length; i++) {
parent.children[i].level = parent.level + 1;
for (var j = 0; j < parent.ancestor.length; j++) {
parent.children[i].ancestor.push(parent.ancestor[j]);
}
parent.children[i].ancestor.push(parent);
$.update(parent.children[i]);
}
}
}
TreeNode.jsvar currentNode = null;function TreeNode(text, url, iconOpen, iconOpenHover, iconClosed, iconClosedHover) {
var $ = this;
this.level = 0;
this.children = [];
this.parent = null;
this.status = "CLOSED";
this.ancestor = [];
this.isHover = false;

this.PATH = "../images/tree/";
this.COLLAPSED = this.PATH + "arrow_collapsed.gif";
this.EXPANDED = this.PATH + "arrow_expanded.gif";
this.COLLAPSED_HOVER = this.PATH + "arrow_collapsed_hover.gif";
this.EXPANDED_HOVER = this.PATH + "arrow_expanded_hover.gif";
this.CATEGORYOPEN = this.PATH + (iconOpen ? iconOpen : "folder_open.gif");
this.CATEGORYOPEN_HOVER = this.CATEGORYOPEN;
this.CATEGORYCLOSED = this.PATH + (iconClosed ? iconClosed : "folder_closed.gif");
this.CATEGORYCLOSED_HOVER = this.CATEGORYCLOSED;
this.EMPTY = this.PATH + "empty.gif"; this.container = document.createElement("DIV");
this.content = document.createElement("DIV");
this.indentSpace = document.createElement("SPAN");
this.statusIcon = document.createElement("IMG");
this.node = document.createElement("SPAN");
this.nodeIcon = document.createElement("IMG");
this.label = document.createElement("A");
this.container.appendChild(this.content);
this.content.appendChild(this.indentSpace);
this.content.appendChild(this.statusIcon);
this.content.appendChild(this.node);
this.node.appendChild(this.nodeIcon);
this.node.appendChild(this.label); this.container.style.display = "block";
this.statusIcon.src = this.COLLAPSED;
this.nodeIcon.src = this.CATEGORYCLOSED;
this.nodeIcon.align = "absmiddle";
this.statusIcon.align = "absmiddle";
this.statusIcon.style.cursor = "default";
this.node.style.cursor = "default";
this.label.style.lineHeight = "20px";
this.label.style.fontSize = "12px";
this.label.style.display = "inline-block";
this.label.style.backgroundImage = "url(" + this.BG + ")";
this.label.style.backgroundRepeat = "repeat-x";
this.label.innerHTML = text;

if (url) {
this.label.href = url;
this.label.target = "mainFrame";
} this.add = function(child) {
this.container.appendChild(child.container);
this.children.push(child);
child.parent = this;
}

this.remove = function(child) {
child.container.removeNode(true);
var temp = [];
for (var i = 0; i < this.children.length; i++) {
if (this.children[i] != child) {
temp.push(this.children[i]);
} else {
continue;
}
}
this.children = temp;
} this.hidden = function() {
this.container.style.display = "none";
} this.show = function() {
this.container.style.display = "block";
} this.getAncestor = function(level) {
if (this.level == level)
return this;
for (var i = 0; i < $.ancestor.length; i++) {
if ($.ancestor[i].level == level) {
return $.ancestor[i];
}
}
return null;
}

this.contains = function(node) {
for (var i = 0; i < $.children.length; i++) {
if ($.children[i] == node) {
return true;
}
$.children[i].contains(node);
}
return false;
}

this.indent = function() {
this.indentSpace.innerHTML = "";
for (var i = 0; i < this.level; i++) {
var indentImg = document.createElement("IMG");
indentImg.src = this.EMPTY;
indentImg.align = "absmiddle";
this.indentSpace.appendChild(indentImg);
}
this.collapse();
}

this.setIcon = function() {
this.nodeIcon = this.status == "CLOSED" ?
($.isHover ? $.CATEGORYCLOSED_HOVER : $.CATEGORYCLOSED) :
($.isHover ? $.CATEGORYOPEN_HOVER : $.CATEGORYOPEN);
}

this.collapse = function() {
for (var i = 0; $.children && i < $.children.length; i++) {
$.children[i].hidden();
}
$.statusIcon.src = $.COLLAPSED;
$.nodeIcon.src = $.CATEGORYCLOSED;
$.status = "CLOSED";
}

this.expand = function() {
for (var i = 0; $.children && i < $.children.length; i++) {
$.children[i].show();
}
$.statusIcon.src = $.EXPANDED;
$.nodeIcon.src = $.CATEGORYOPEN;
$.status = "OPEN";
}

this.expandOrCollapse = function() {
if ($.status == "CLOSED") {
if (currentNode) {
var ancestor = currentNode.getAncestor(1);
var myAncestor = $.getAncestor(1);
if (ancestor && myAncestor && ancestor != myAncestor) {
ancestor.collapse();
}
}
currentNode = $;
$.expand();
} else {
$.collapse();
}
} this.node.onmousedown = function() {
if (currentNode) {
currentNode.nodeIcon.src = (currentNode.status == "CLOSED" ? currentNode.CATEGORYCLOSED : currentNode.CATEGORYOPEN);
}
}

this.node.onmouseup = function() {
if (event.button == 2) {

}
}

this.content.onselectstart = function() {
return false;
} this.statusIcon.onclick = this.expandOrCollapse;
this.nodeIcon.ondblclick = this.expandOrCollapse;
this.label.onclick = this.expandOrCollapse;

this.statusIcon.onmouseover = function() {
this.src = $.status == "CLOSED" ? $.COLLAPSED_HOVER : $.EXPANDED_HOVER;
}

this.statusIcon.onmouseout = function() {
this.src = $.status == "CLOSED" ? $.COLLAPSED : $.EXPANDED;
}
}

参见dhATV4:
http://www.easyui.org.cn/dhatv_demo.html

调试易

求js树形源码，最好是“资源管理器”的那种（有图片最好）

解决方案 »