選中某一項（沒有右鍵）.html
阿新 • • 發佈：2018-12-10
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - select menu</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:100%; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list-style-type:none; } img{border:0;} a{ color: #5f5f5f; } a, a:hover, a:focus { text-decoration: none; outline: none; } /* * * 常用的樣式檔案 * * */ table{border-collapse:collapse;}/*取消table表格的間距*/ /* display */ .dn{display:none;} .di{display:inline-block;} .db{display:block;} /* height */ .h14{height:14px;} .h16{height:16px;} .h18{height:18px;} .h20{height:20px;} .h22{height:22px;} .h24{height:24px;} /* line-height */ .lh14{line-height:14px;} .lh16{line-height:16px;} .lh18{line-height:18px;} .lh20{line-height:20px;} .lh22{line-height:22px;} .lh24{line-height:24px;} /* margin */ .ml5{margin-left:5px;} .mt5{margin-top:5px;} .mr5{margin-right:5px;} .mb5{margin-bottom:5px;} .ml10{margin-left:10px;} .mr10{margin-right:10px;} .mt10{margin-top:10px;} .mb10{margin-bottom:10px;} .ml15{margin-left:15px;} .mt15{margin-top:15px;} .mr15{margin-right:15px;} .mb15{margin-bottom:15px;} .ml20{margin-left:20px;} .mr20{margin-right:20px;} .mt20{margin-top:20px;} .mb20{margin-bottom:20px;} /* padding */ .p5{padding:5px;} .pl5{padding-left:5px;} .pt5{padding-top:5px;} .pr5{padding-right:5px;} .pb5{padding-bottom:5px;} .p10{padding:10px;} .pl10{padding-left:10px;} .pt10{padding-top:10px;} .pr10{padding-right:10px;} .pb10{padding-bottom:10px;} .p15{padding:15px;} .pl15{padding-left:15px;} .pt15{padding-top:15px;} .pr15{padding-right:15px;} .pb15{padding-bottom:15px;} .p20{padding:20px;} .pl20{padding-left:20px;} .pt20{padding-top:20px;} .pr20{padding-right:20px;} .pb20{padding-bottom:20px;} /* font-size */ .f0{font-size:0;} .f10{font-size:10px;} .f12{font-size:12px;} .f13{font-size:13px;} .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;} .f20{font-size:20px;} .f24{font-size:24px;} /* font-style */ i{font-style:normal;} b{font-weight:normal;} /* text-align */ .tc{text-align: center;} .tj{text-align:justify;} /* vertical-align */ .vm{vertical-align:middle;} .vt{vertical-align:top;} /* position */ .rel{position:relative;} /* cursor */ .poi{cursor:pointer;} .def{cursor:default;} /* ------------------- multiply CSS ------------------ */ /* 塊狀元素水平居中 */ .auto{margin-left:auto; margin-right:auto;} /* 單行文字溢位虛點顯 示...*/ .ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} /* 無框文字框文字域 */ .bd_none{border:0; outline:none;} /*.no{display:inline-block; width:100%; height:0; overflow:hidden;}*/ /*最後一排兩端對齊*/ .noo{display:inline-block; width:100%; height:0; overflow:hidden;} /*最後一排左對齊 (用的時候要有多個同級空標籤並加空格)*/ .no{height:0!important; padding:0; overflow:hidden;} /*html{ background: url(img/blurredbg.png)no-repeat; /*background: red; }*/ /*.ztree{ height: 450px; width: 200px;background: rgba(0,0,0,.15); }*/ 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: #fff; line-height: 20px; font-size: 12px; } </style> <link rel="stylesheet" href="zTreecss/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/common/jquery.ztree.core.js"></script> <script type="text/javascript" src="js/common/jquery.ztree.exedit.min.js"></script> <SCRIPT type="text/javascript"> // var urls = "http://192.168.10.129:8086/app/"; // var urls = "http://192.168.10.171:8085/app/"; var setting = { view: { dblClickExpand: false }, edit: { enable: true, showRemoveBtn: false, showRenameBtn: false, drag:{ isCopy:false, isMove:false } }, data: { key: { children: "children", name: "name", title: "id", url: "link" }, simpleData: { enable: true } }, callback: { beforeRename: beforeRename, onRightClick: OnRightClick } }; var oldarr = [];//同級的名稱 var oldarr2 = [];//下一級的名稱 function beforeRename(treeId, treeNode, newName) { //編輯後 if (newName.length == 0) { alert("節點名稱不能為空."); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); setTimeout(function(){zTree.editName(treeNode)}, 10); return false; } var id = treeNode.id.toString(); oldarr=[]; $(istwoname_obj).parent().parent().parent().find(">li").each(function(){ var txts = $(this).find(">a>span:last-child").text(); oldarr.push(txts); }) if(oldarr.indexOf(newName) == -1){ console.log('編輯更新成功'); // $.ajax({ // type: "post", // url: urls + "directory/update", // async: true, // dataType: "json", // contentType: "application/json", // data: JSON.stringify({ // "id": id, // "name": newName // }), // success: function (data) { // alert("更新成功"); // }, // error: function(){ // alert("請求失敗"); // } // }); }else if(oldarr.indexOf(newName) > -1){ alert("節點名稱不能重名."); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); setTimeout(function(){zTree.editName(treeNode)}, 10); return false; } return true; } var namelastname=''; var istwoname_obj; function OnRightClick(event, treeId, treeNode) {//右鍵選單相關 var sd = event.target.id; var istitleid = $("#"+sd).parent().attr("title"); istwoname_obj = $("#"+sd); var sdlength = $("#"+sd).parent('a').next().find(">li").length; namelastname = sdlength+1; oldarr2=[]; $(istwoname_obj).parent().next().find(">li").each(function(){ var txts = $(this).find(">a>span:last-child").text(); oldarr2.push(txts); }) if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { zTree.cancelSelectedNode(); setTimeout(function(){ showRMenu("root", event.clientX, event.clientY,istitleid); },110) } else if (treeNode && !treeNode.noR) { zTree.selectNode(treeNode); setTimeout(function(){ showRMenu("node", event.clientX, event.clientY,istitleid); },110) } } function showRMenu(type, x, y,istitleid) {//右鍵選單相關 $("#rMenu ul").show(); if (type=="root") { $("#rMenu").hide(); } else { if(istitleid == '0' || istitleid == ''){ $("#m_del").hide(); $("#edit").hide(); }else{ $("#rMenu").show(); $("#m_del").show(); $("#edit").show(); } } y += document.body.scrollTop; x += document.body.scrollLeft; 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 onBodyMouseDown(event){//右鍵選單相關 if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) { rMenu.css({"visibility" : "hidden"}); } } var gettime = function(){ var timestamp=new Date().getTime(); return timestamp } var addCount = 1; function addTreeNode() { //增加 ok hideRMenu(); var name = "增加" + namelastname; var id = gettime()+''; id=id.substr(-10); var parentid=zTree.getSelectedNodes()[0].id+""; if(oldarr2.indexOf(name)>-1){ alert('新增加的名稱為 "'+ name +'" 與原列表中的名稱有重複，請先修改原名稱') return false; } if (zTree.getSelectedNodes()[0]) { console.log('增加'); // $.ajax({ // type: "post", // url: urls + "directory/insert", // async: true, // dataType: "json", // contentType: "application/json", // data: JSON.stringify({ // "id":id, // "parentid": parentid, // "name": name // }), // success: function (data) { // console.log(data); // if(data.code==0){ // alert("新增成功"); // zTree.addNodes(zTree.getSelectedNodes()[0], {id:id, pId:parentid, name:name}); // }else{ // alert("請展開目錄後新增"); // } // }, // error: function(){ // alert("請求失敗"); // } // }); } else { zTree.addNodes(zTree.getSelectedNodes()[0], {id:id, pId:0, name:newNode.name}); } } function removeTreeNode() { //刪除 ok hideRMenu(); var nodes = zTree.getSelectedNodes(); if (nodes && nodes.length>0) { if(confirm("確認刪除 節點嗎？")){ console.log('刪除'); // $.ajax({ // type: "post", // url: urls + "directory/delete", // async: true, // dataType: "json", // contentType: "application/json", // data: JSON.stringify({ // "id": nodes[0].id // }), // success: function (data) { // if (nodes[0].children && nodes[0].children.length > 0) { // var msg = "要刪除的節點是父節點，如果刪除將連同子節點一起刪掉。\n\n請確認！"; // if (confirm(msg)==true){ // zTree.removeNode(nodes[0]); // alert("刪除成功"); // } // } else { // zTree.removeNode(nodes[0]); // alert("刪除成功"); // } // }, // error: function(){ // alert("請求失敗"); // } // }); } } } function edit() { //編輯 hideRMenu(); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = zTree.getSelectedNodes(); treeNode = nodes[0]; if (nodes.length == 0) { alert("請先選擇一個節點"); return; } zTree.editName(treeNode); }; var zTree, rMenu; $(document).ready(function(){ var zNodes =[]; // $.ajax({ // type: "post", // url: urls+"directory/list", // async: false, // dataType: "json", // contentType: "application/json", // data: JSON.stringify({ }), // success:function(data){ // if(data.code==0){ // var tree = data.data; // for(var i=0,len=tree.length;i<len;i++){ // if(i==0){ // zNodes.push({ // id:tree[i].id, // pId:tree[i].parentid, // name:tree[i].name, // open:true, //// noR:true // }); // }else{ // zNodes.push({ // id:tree[i].id, // pId:tree[i].parentid, // name:tree[i].name, // }); // } // } // } // } // }); var zNodes=[//測試資料 {id: 0, pId: null, name: "/", open: true, noR: true}, {id: 2, pId: 0, name: "data",noR: true}, {id: 1, pId: 0, name: "ETL-商城資料",noR: true}, {id: 3, pId: 0, name: "ETL-日誌資料",noR: true}, {id: 5, pId: 0, name: "tmp",noR: true}, {id: 4, pId: 3, name: "demo",noR: true} ] $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTree = $.fn.zTree.getZTreeObj("treeDemo"); rMenu = $("#rMenu"); $("#treeDemo").on("click","a",function(){ console.log(this.title); }) }); </SCRIPT> </HEAD> <BODY> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> <div id="rMenu"> <ul> <li id="m_add" onclick="addTreeNode();">增加節點</li> <li id="edit" onclick="edit();">編輯名稱</li> <li id="m_del" onclick="removeTreeNode();">刪除節點</li> </ul> </div> </BODY> </HTML>