【JAVASCRIPT】使用ztree樹，實現右鍵增加，修改，刪除節點。帶有複選框。
阿新 • • 發佈：2019-01-28
測試支援火狐，谷歌，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(); //顯示新增div var 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" onclick="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" onclick="addTree();">確定</a> </li> </ul> </div> <!-- 右鍵樹 --> <div id="rMenu"> <ul> <li id="m_add" onclick="addTreeNode();">增加 </li> <li id="m_modify" onclick="editName()">修改 </li> <li id="m_del" onclick="removeTreeNode();">刪除 </li> </ul> </div> </body> </html>
註釋很詳細了。原始檔完美執行地址：