<!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>
扫一扫
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
