ztree高级配置之新增节点
功能展示：
实现代码：
js:
var zTree;
var setting = {
edit: {
enable: true,
selectedMulti: false,
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
},
data: {
key: {
name: "Name",
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: "0"
}
},
callback: {
beforeRename: bfRename,
onRename: onRename,
beforeRemove: beforeRemove,
onRemove: onRemove,
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
},
}
}
function bfRename(treeId, treeNode, newName, isCancel) {
//新名称为空时提示名称不能为空
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 200);
return false;
}
var Cnodes = getPeerNodes(treeNode);
//获取当前节点的同级兄弟节点，不包含本节点
function getPeerNodes(targetNode) {
if (targetNode == null) {
return null;
} else {
if (targetNode.getParentNode() != null) {
return targetNode.getParentNode().children;
}
return null;
}
}
console.log(Cnodes);
for (var n in Cnodes) {
if (Cnodes[n].Name == newName) {
if (Cnodes[n].id == treeNode.id) return;
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.cancelEditName();
alert("编目名称已存在！");
}, 200)
return false;
}
}
return true;
};
function onRename(e, treeId, treeNode, isCancel) {
if (isCancel) return;
}
function beforeRemove(treeId, treeNode) {
if (confirm("删除 " + treeNode.Name + "?"))
return true;
else
return false;
};
function onRemove(e, treeId, treeNode) {
};
function find_name(num, nodes) {
for (var n in nodes) {
var name = "new_node" + num;
// console.log(nodes[n].name);
if (nodes[n].name == name) {
num = num + 1;
return num;
}
else if (nodes[n].bmid == name) {
num = num + 1;
return num;
};
};
return name;
}
//生成id
function make_id() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4";
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
uuid = uuid.replace(/-/g, "");
return uuid;
};
function getTime() {
var now = new Date(),
y = now.getFullYear(),
mt = now.getMonth() + 1,
d = now.getDate(),
h = now.getHours(),
m = now.getMinutes(),
s = now.getSeconds()
return (y + "-" + mt + "-" + d + " " + h + ":" + m + ":" + s);
};
function addHoverDom(treeId, treeNode) {
// console.log(treeNode.name);
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();' ></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
// var nodes = zTree.transformToArray(zTree.getNodes());
// 返回值不是字符串时进入循环
var nname = find_name(1, zNodes);
while (!isNaN(nname)) {
nname = find_name(nname, zNodes);
// console.log(nname);
};
name = nname;
var id = make_id();
for (var n in zNodes) {
if (zNodes[n].id == id) {
}
}
var createTime = getTime();
random = Math.ceil(Math.random() * 100);
var creator = "unknow";
var new_node = {
"id":id,
"Name": name,
"parentId": treeNode.id,
"creator": "",
"createTime": "createTime",
"bmid": name,
"fullbmid": name
};
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.addNodes(treeNode,new_node);
zNodes.push(new_node);
});
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
var zNodes = [
{
"id": 0,
"Name": "A组",
"parentId": -1,
},
{
"id": 265,
"Name": "俄罗斯",
"parentId": 0,
},
{
"id": 266,
"Name": "埃及",
"parentId": 0,
},
{
"id": 267,
"Name": "乌拉圭",
"parentId": 0,
},
{
"id": 268,
"Name": "沙特阿拉伯",
"parentId": 0,
},
{
"id": 2,
"Name": "B组",
"parentId": -2,
},
{
"id": 21,
"Name": "葡萄牙",
"parentId": 2,
},
{
"id": 22,
"Name": "西班牙",
"parentId": 2,
},
{
"id": 23,
"Name": "摩洛哥",
"parentId": 2,
},
{
"id": 24,
"Name": "伊朗",
"parentId": 2,
},];
$(document).ready(function () {
$.fn.zTree.init($("#first"), setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("tree");
});
html:
<html>
<head>
<!-- ztree -->
<link rel="stylesheet" type="text/css" href="./css//metroStyle/metroStyle.css" />
<style type="text/css">
.main {
text-align: center;
/*让div内部文字居中*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<title>ztree高级功能1</title>
<div class="main">
<div class="box-body">
<ul id="first" class="ztree" style="width:100%"></ul>
</div>
</div>
</body>
</html>
<!-- <script type="text/javascript" src="./forin.js"> </script> -->
<script type="text/javascript" src="./jquery.min.js"> </script>
<script type="text/javascript" src="./jquery.ztree.all.min.js"> </script>
<script type="text/javascript" src="./myztree.js"> </script>