zTree v3.2 API 文档==>点击进入
所有demo展示地址==>点击进入
新增-编辑-删除demo==>点击进入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="./css/demo.css">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="./js/jquery.ztree.all-3.5.min.js"
type="text/javascript"></script>
<script src="./js/jquery.ztree.exhide-3.5.min.js"
type="text/javascript"></script>
<script src="./js/MtrSearchZTree.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
.treeBox{
display: inline-block;
min- 220px;
}
#treeDemoKeyword{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="row" style="margin: 50px;">
<div class="treeBox">
<ul id="treeDemo" class="ztree">
</ul>
</div>
</div>
<script>
var setting = {
async: {
enable: true,
url: "http://127.0.0.1:8080/getData.json",
type: 'get',
dataFilter: filter
},
view: {
expandSpeed: "",
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false,
showIcon: false
},
edit: {
enable: true,
renameTitle: "编辑",
removeTitle: "删除"
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
}
},
callback: {
beforeRemove: beforeRemove,
beforeRename: beforeRename
}
};
var treeData
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/.n/g, '.');
}
setLevel(childNodes)
treeData = childNodes
return childNodes;
}
// 给数据设置层级
function setLevel(childNodes, level=0){
for(var i = 0; i < childNodes.length; i++){
if(!childNodes[i].children){
childNodes[i].level = level
} else {
childNodes[i].level = level
setLevel(childNodes[i].children, level+1)
}
}
}
// 删除的事件
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
if(confirm("确认删除 节点 -- " + treeNode.name + " 吗？")){
deleteTreeData(treeData, treeNode)
console.log('treeData:', treeData)
}
return ;
}
// 编辑后的事件
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}
editTreeData(treeData, treeNode, newName)
console.log('treeData:', treeData)
return true;
}
var newCount = 1;
// hover事件
function addHoverDom(treeId, treeNode) {
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='新增' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
// 新增点击事件
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var newName = "new node" + (newCount++)
zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: newName});
addTreeData(treeData, treeNode, newName)
console.log('treeData:', treeData)
return false;
});
};
// 编辑-改变源数据
function editTreeData(arr, treeNode, newName){
for(let i = 0; i < arr.length; i++) {
if(arr[i].id === treeNode.id || (arr[i].level === treeNode.level && arr[i].name === treeNode.name)){
arr[i].name = newName
return
} else {
if(arr[i].children){
editTreeData(arr[i].children, treeNode, newName)
}
}
}
}
// 新增-改变源数据
function addTreeData(arr, treeNode, newName){
for(let i = 0; i < arr.length; i++) {
if(arr[i].id === treeNode.id || (arr[i].level === treeNode.level && arr[i].name === treeNode.name)){
if(arr[i].children){
arr[i].children.push({level: arr[i].level+1,pId: arr[i].id, name: newName})
} else {
// 如果在新增的数据上再次新增数据 原来就没有id 所以下级得不了pId，除非动态添加并回显id
arr[i].children = [{level: arr[i].level+1,pId: arr[i].id, name: newName}]
}
return
} else {
if(arr[i].children){
addTreeData(arr[i].children, treeNode, newName)
}
}
}
}
// 删除-改变源数据
function deleteTreeData(arr, treeNode) {
for(let i = 0; i < arr.length; i++) {
if(arr[i].id === treeNode.id){
arr.splice(i, 1)
} else {
if(arr[i].children){
deleteTreeData(arr[i].children, treeNode)
}
}
}
}
// hover 移除事件
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
$(function () {
$.fn.zTree.init($("#treeDemo"), setting);
// 展示搜索框
new MtrSearchZTree();
});
</script>
</body>
</html>