【JAVASCRIPT】使用ztree树,实现右键增加,修改,删除节点。带有复选框。

作者: hateson
发布时间:2015-07-17 11:41:15

测试支持火狐,谷歌,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> 

注释很详细了。源文件完美运行地址:

http://download.csdn.net/detail/hateson/6041101


转帖请注明原帖地址:http://blog.csdn.net/hateson/article/details/10655043



版权声明:本文为博主原创文章,未经博主允许不得转载。

标签: Java JavaScript
来源:http://blog.csdn.net/hateson/article/details/10655043

推荐: