【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。
生活随笔
收集整理的這篇文章主要介紹了
【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
測試支持火狐，谷歌，IE10等。
主要使用ztree，擁有復選框，增加，修改，刪除功能，這些是要連接后臺的，自己再修改下就可以用。
效果如下圖：
點擊增加后會出現
代碼如下：
<!DOCTYPE html> <html> <head><title>ZTREE DEMO - select menu</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/demo.css" type="text/css"><link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script><script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script><script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script><script type="text/javascript"><!--var setting = {view: {dblClickExpand: false},data: {simpleData: {enable: true}},check: {enable: true},callback: {onRightClick: OnRightClick}};var zNodes = [{ id: 1, pId: 0, name: "隨意勾選 1", open: true },{ id: 11, pId: 1, name: "隨意勾選 1-1", open: true },{ id: 111, pId: 11, name: "隨意勾選 1-1-1" },{ id: 112, pId: 11, name: "隨意勾選 1-1-2" },{ id: 12, pId: 1, name: "隨意勾選 1-2", open: true },{ id: 121, pId: 12, name: "隨意勾選 1-2-1" },{ id: 122, pId: 12, name: "隨意勾選 1-2-2" },{ id: 2, pId: 0, name: "隨意勾選 2", checked: true, open: true },{ id: 21, pId: 2, name: "隨意勾選 2-1" },{ id: 22, pId: 2, name: "隨意勾選 2-2", open: true },{ id: 221, pId: 22, name: "隨意勾選 2-2-1", checked: true },{ id: 222, pId: 22, name: "隨意勾選 2-2-2" },{ id: 23, pId: 2, name: "隨意勾選 2-3" }];function OnRightClick(event, treeId, treeNode) {if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {zTree.cancelSelectedNode();showRMenu("root", event.clientX, event.clientY);} else if (treeNode && !treeNode.noR) {zTree.selectNode(treeNode);showRMenu("node", event.clientX, event.clientY);}}function showRMenu(type, x, y) {$("#rMenu ul").show();if (type == "root") {$("#m_del").hide();$("#m_check").hide();$("#m_unCheck").hide();} else {$("#m_del").show();$("#m_check").show();$("#m_unCheck").show();}rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });$("body").bind("mousedown", onBodyMouseDown);}function hideRMenu() {if (rMenu) rMenu.css({ "visibility": "hidden" });$("body").unbind("mousedown", onBodyMouseDown);}//顯示右鍵function showRMenu(type, x, y) {$("#rMenu").show();if (type == "root") {$("#rMenu").hide();} else {$("#m_del").show();$("#m_modify").show();}//0000000,0000001,0000002,不可以刪除修改 zTree = $.fn.zTree.getZTreeObj("treeDemo");nodes = zTree.getSelectedNodes();treeNode = nodes[0];if (treeNode != null) {treeID = treeNode.id;if (treeID == '00000000' || treeID == '00000001' || treeID == '00000002') {$("#m_modify").hide();$("#m_del").hide();}}rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });$("body").bind("mousedown", onBodyMouseDown);}//隱藏右鍵function hideRMenu() {alert();if (rMenu) rMenu.css({ "visibility": "hidden" });$("body").unbind("mousedown", onBodyMouseDown);}function onBodyMouseDown(event) {if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {rMenu.css({ "visibility": "hidden" });}if (!(event.target.id == "rMenu2" || $(event.target).parents("#rMenu2").length > 0)) {$("#rMenu2").css({ "visibility": "hidden" });}}//鼠標點擊事件不在節點上時隱藏右鍵菜單 $(function () {$("body").bind("mousedown",function (event) {if (!(event.target.id == "rMenu2" || $(event.target).parents("#rMenu2").length > 0)) {$("#rMenu2").hide();}});});/*******************新增 start*********************///顯示新增function showRMenu2(x, y) {$("#rMenu2").show();$("#rMenu2").css({ "top": y + "px", "left": x + "px", "visibility": "visible" });$("body").bind("mousedown", onBodyMouseDown);}var addCount = 1;//新增樹節點function addTreeNode() {$("#rMenu").hide();//顯示新增divvar tag = 0;$("#treeDemo").mousemove(function (e) {if (tag == 0) showRMenu2(e.pageX, e.pageY);$("#caption_bbs").focus();tag = tag + 1;});}//新增執行后臺function addTree() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = zTree.getSelectedNodes();$.ajax({type: "post",url: "/cslv/documentation.do",dataType: 'json',data: {action: "addTree",parentid: nodes[0].id,nodename: $("#caption_bbs").val()},success: function (json) {//強行加載父節點var treeObj = $.fn.zTree.getZTreeObj("treeDemo");var nodes = treeObj.getSelectedNodes();treeObj.reAsyncChildNodes(null, "refresh", true);if (json == 0) alert("操作失敗！");},error: function () {alert('Error loading HTML document');}});$("#rMenu2").css({ "visibility": "hidden" });$("#caption_bbs").val("");}/*******************新增 end*********************//*******************修改 start*********************/function editName() {$("#rMenu").hide();zTree = $.fn.zTree.getZTreeObj("treeDemo");nodes = zTree.getSelectedNodes();zTree.editName(nodes[0]);}//捕獲節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之后，更新節點名稱數據之前的事件回調函數，并且根據返回值確定是否允許更改名稱的操作function onRename(treeId, treeNode, newName) {zTree = $.fn.zTree.getZTreeObj("treeDemo");nodes = zTree.getSelectedNodes();treeId = "treeDemo";treeNode = nodes[0];newName = nodes[0].name;if (newName.length == 0) {alert("節點名稱不能為空.");return false;}$.ajax({type: "post",url: "/cslv/documentation.do",dataType: 'json',data: {action: "modifyTree",id: nodes[0].id,nodename: newName},success: function (json) {alert('操作成功！');},error: function () {alert('Error loading HTML document');}});return true;}/*******************修改 end*********************/function removeTreeNode() {hideRMenu();var nodes = zTree.getSelectedNodes();if (nodes && nodes.length > 0) {if (nodes[0].children && nodes[0].children.length > 0) {var msg = "要刪除的節點是父節點，如果刪除將連同子節點一起刪掉。\n\n請確認！";if (confirm(msg) == true) {zTree.removeNode(nodes[0]);}} else {zTree.removeNode(nodes[0]);}}}function checkTreeNode(checked) {var nodes = zTree.getSelectedNodes();if (nodes && nodes.length > 0) {zTree.checkNode(nodes[0], checked, true);}hideRMenu();}function resetTree() {hideRMenu();$.fn.zTree.init($("#treeDemo"), setting, zNodes);}function setCheck() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = zTree.transformToArray(zTree.getNodes());//設置跟節點不顯示復選框for (var i = 0; i < nodes.length; i++) {var id = nodes[i].id;for (var j = 0; j < nodes.length; j++) {if (id == nodes[j].pId) {node = zTree.getNodeByParam("id", id, null);node.nocheck = true;zTree.updateNode(node);}}}}//初始化樹var zTree, rMenu;$(document).ready(function () {$.fn.zTree.init($("#treeDemo"), setting, zNodes);setCheck();zTree = $.fn.zTree.getZTreeObj("treeDemo");rMenu = $("#rMenu");});//-->function submit() {var tree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = tree.transformToArray(tree.getCheckedNodes(true));var nodesArr = new Array();var aHtml = "";for (var i = 0; i < nodes.length; i++) {nodesArr[i] = nodes[i].name;if (i / 5 == 1) {aHtml += "<br/>"}aHtml += "<input type='checkbox' name='checkbox' value='" + nodes[i].id + "' checked>" + nodes[i].name;}$("#text").val(nodesArr.join(","));document.getElementById("ckDiv").innerHTML = aHtml;}</script><style type="text/css">div#rMenu{position: absolute;visibility: hidden;top: 0;background-color: #555;text-align: left;padding: 2px;}div#rMenu ul li{margin: 1px 0;padding: 0 5px;cursor: pointer;list-style: none outside none;background-color: #DFDFDF;}div#rMenu2{position: absolute;visibility: hidden;background-color: #555;text-align: left;padding: 2px;}div#rMenu2 ul{margin: 1px 0;padding: 0 5px;cursor: pointer;list-style: none outside none;background-color: #DFDFDF;}</style> </head> <body><div class="content_wrap"><input id="text" type="text" value="" size="200"><div id="ckDiv"></div><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul><input id="text" type="button" οnclick="submit()" value="確定"></div></div><!-- 隱藏新增 --><div id="rMenu2"><ul><li>名稱：<input type="text" class="input_tx" id="caption_bbs" style="width: 100px; height: 16px;" /><a class="orange" οnclick="addTree();">確定</a> </li></ul></div><!-- 右鍵樹 --><div id="rMenu"><ul><li id="m_add" οnclick="addTreeNode();">增加 </li><li id="m_modify" οnclick="editName()">修改 </li><li id="m_del" οnclick="removeTreeNode();">刪除 </li></ul></div> </body> </html>注釋很詳細了。源文件完美運行地址：
http://download.csdn.net/detail/hateson/6041101
轉帖請注明原帖地址：http://blog.csdn.net/hateson/article/details/10655043
總結
以上是生活随笔為你收集整理的【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PLECS的热模型无法导入的解决办法
- 下一篇： 总结：Oracle 递归查询