<!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>tree-demo by http://www.codefans.net</title>
<link href="Thd.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Thd.js"></script>
<script type="text/javascript" src="Tool.js"></script>
<script type="text/javascript" src="oo.js"></script>
<script type="text/javascript" src="Tree.js"></script>
<script type="text/javascript">
function addNode(){
var id = document.getElementById("node_id_c").value;
var pid = document.getElementById("node_pid_c").value;
var tit = document.getElementById("node_tit_c").value;
var mes = document.getElementById("node_tit_c").value;
try{
tree.addNode(id,pid,tit,"",tit,"1","","","",c,"<input type='checkbox'/>");
tree.refresh();
}catch(e){
alert(e.message);
}
}
function c(e,o){
document.getElementById("node_id").value = o.id;
document.getElementById("node_pid").value = o.pid;
document.getElementById("node_tit").value = o.text;
document.getElementById("node_id_c").value = o.id + "." + (o.getChilds().length+1);
document.getElementById("node_tit_c").value = o.id + "." + (o.getChilds().length+1);
document.getElementById("node_pid_c").value = o.id;
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td width="50%" valign="top"><div id="c"></div>
<script type="text/javascript">
var tree = new Thd.Tree("c","images/",true);
/* @param String id : 结点id
* @param String pid : 父结点id
* @param String text : 节点显示时候的内容
* @param String target : 点节点的时候目标
* @param String title : 鼠标经过节点时候显示的内容
* @param String openIco : 打开子节点时候前面的图标
* @param String closeIco : 关闭子节点时候前面的图标
* @param String leafIco : 如果是叶子结点的图标
* @param tree : 所属tree对象
* @param String cb : callback
* @param String box : 链接前面的html
*
*/
tree.addNode("0","root","root","","1","1","","","",c);
tree.addNode("1","0","1","","1","1","","","",c,"<input type='checkbox'>");
tree.addNode("1.1","1","1.1","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("1.1.1","1.1","1.1.1","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("1.1.2","1.1","1.1.2","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("1.2","1","1.2","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("2","0","2","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("2.1","2","2.1","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("3","0","3","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("4","0","4","","1","1","","","",c,"<input type='checkbox'/>");
tree.addNode("4.1","4","4.1","","1","1","","","",c,"<input type='radio'/>");
tree.addNode("4.2","4","4.2","","1","1","","","",c,"<input type='radio'/>");
tree.addNode("5","0","5","","1","1","","","",c,"<input type='radio'/>");
var d = tree.addNode("6","0","6","","1","1","","","",c,"<input type='radio'/>");
var d = tree.addNode("6.1","6","6.1","","1","1","","","",c,"");
tree.refresh();
tree.refresh();
</script>
</td>
<td width="25%" valign="bottom"> 节点信息<br/>
id:
<input type="text" id="node_id"/>
<br/>
pid:
<input type="text" id="node_pid"/>
<br/>
title:
<input type="text" id="node_tit"/>
<br/>
<input type="button" value="删除节点" onclick="tree.removeNode(document.getElementById('node_id').value);tree.refresh()"/>
</td>
<td width="25%" valign="bottom"> 创建子节点<br/>
id:
<input type="text" id="node_id_c"/>
<br/>
pid:
<input type="text" id="node_pid_c"/>
<br/>
title:
<input type="text" id="node_tit_c"/>
<br/>
<input type="button" value="创建新节点" onclick="addNode()"/>
</td>
</tr>
</table>
<input type="button" onclick='var x = tree.removeNode("6.2");tree.refresh()' value="remove"/>
<!--
<textarea onclick="this.value = document.getElementById('c').innerHTML" style="width:500px;height:600px;"></textarea>
-->
</body>
</html>
JavaScript 实现在树形菜单中添加、删除节点实例 js note
5星 · 超过95%的资源 需积分: 50 92 浏览量
2010-03-02
15:48:18
上传
评论 3
收藏 73KB RAR 举报 
ThdTree.rar （41个子文件） 
codefans.net ThdTree images 
line.gif 66B
dialog_ct.png 6KB nolines_minus.gif 861B folderopen.gif 376B
panelTitBg.jpg 21KB folder.gif 372B btonBg03.jpg 21KB dialog_mrm.png 3KB icon_dialog.gif 92B dialog_rt.png 3KB inputTextBg.jpg 21KB dialog_lb.png 3KB dialog_cb.png 4KB close.gif 166B minus.gif 86B bton.gif 572B dialog_lt.png 3KB TagPanelBg.gif 834B dialog_closebtn.gif 388B minusbottom.gif 85B dialog_rb.png 3KB dialog_closebtn_over.png 3KB dialog_closebtn_over.gif 441B
Thumbs.db 37KB join.gif 69B dialog_closebtn.png 3KB plusbottom.gif 88B plus.gif 89B page.gif 582B panelMenuBg.gif 49B closeHover.gif 917B empty.gif 62B joinbottom.gif 66B nolines_plus.gif 870B dialog_mlm.png 3KB Tree.js 11KB
tree.html 4KB oo.js 2KB Tool.js 8KB Thd.css 5KB Thd.js 5KB
- 1
- 2
前往页