JavaScript实现在树形菜单中添加、删除节点实例

  • t7_990955
    了解作者
  • 72.9KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-04 09:27
    上传日期
内容索引:脚本资源,Ajax/JavaScript,树形菜单  JavaScript实现在树形菜单中添加、删除节点实例,本程序侧重于学习,主要介绍一种在多级树节点中创建节点、删除节点,帮助了解树形菜单创作原理。测试中发现代码似乎有些剖一,有时候会导致浏览器很慢,运行吃力,有能力的朋友请修正一下。
A105753431-14356.rar
  • okbase.net
  • ThdTree
  • images
  • folderopen.gif
    376B
  • nolines_minus.gif
    861B
  • closeHover.gif
    917B
  • minus.gif
    86B
  • nolines_plus.gif
    870B
  • dialog_lt.png
    3KB
  • line.gif
    66B
  • plusbottom.gif
    88B
  • join.gif
    69B
  • btonBg03.jpg
    21.3KB
  • dialog_closebtn.png
    3KB
  • empty.gif
    62B
  • plus.gif
    89B
  • dialog_mlm.png
    3.3KB
  • minusbottom.gif
    85B
  • dialog_lb.png
    2.9KB
  • panelTitBg.jpg
    21.4KB
  • dialog_cb.png
    3.7KB
  • dialog_ct.png
    5.9KB
  • dialog_rb.png
    2.9KB
  • joinbottom.gif
    66B
  • page.gif
    582B
  • Thumbs.db
    37KB
  • dialog_closebtn_over.png
    3.1KB
  • dialog_rt.png
    3.1KB
  • folder.gif
    372B
  • inputTextBg.jpg
    21.1KB
  • panelMenuBg.gif
    49B
  • TagPanelBg.gif
    834B
  • close.gif
    166B
  • dialog_mrm.png
    3.3KB
  • bton.gif
    572B
  • dialog_closebtn.gif
    388B
  • dialog_closebtn_over.gif
    441B
  • icon_dialog.gif
    92B
  • tree.html
    4.3KB
  • oo.js
    1.9KB
  • Thd.js
    4.8KB
  • Tool.js
    8KB
  • Thd.css
    4.9KB
  • Tree.js
    11.1KB
内容介绍
<!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>
评论
    相关推荐