您的位置：首页 > 其它

使用zTree制作简单异步加载树形结构,支持增删改拖动

2018-02-28 14:10 465 查看

ztree版本 v3.5.34,数据交互格式为json.
ztreeAPI : 点击打开链接
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>ztree test</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
</style>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.all.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
var oldName;
var setting = {
async: {
enable: true,
type: 'post',
dataType: "json",
url: "接口地址",
autoParam: ["id"],
dataFilter: filter
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
},

},
view: {
expandSpeed: "",
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
drag: {
autoExpandTrigger: true,
prev: false,
next: false,
inner: true
}
},
callback: {
onRename: zTreeOnRename,
beforeRename: beforeRename,
beforeEditName: zTreeBeforeEditName,
onRemove: zTreeOnRemove,
beforeRemove: beforeRemove,
onDrop: zTreeOnDrop,
beforeDrop: zTreeBeforeDrop
}
};
$(document).ready(function () {
var rootEles;
//获取父节点
$.ajax({
url: "接口地址",
type: "post",
data: {},
success: function (res) {
rootEles = res.parent;
console.log(rootEles)
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, rootEles);
}
});
});

function drewRoots(rootEles) {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, rootEles);
}

// 过滤异步加载ztree时返回的数据
function filter(treeId, parentNode, childNodes) {
console.log(parentNode)
if (!childNodes)
return null;
return childNodes.childs;
}
// rename
function zTreeOnRename(event, treeId, treeNode, isCancel) {
console.log(treeNode)
var name = treeNode.name;
if (name.indexOf("_") != -1) {
name = treeNode.name.substring(0, treeNode.name.indexOf("_"))
}
var data = {
id: treeNode.id,
pId: treeNode.pId,
name: name
}
// 判断名称是否经过修改
var editFlag = false;
if (oldName) {
if (oldName.indexOf("_") != -1) {
oldName = oldName.substring(0, oldName.indexOf("_"))
}
editFlag = oldName != name
}
console.log(editFlag)
if (!isCancel && editFlag) {
$.ajax({
type: 'post',
url: '接口地址',
data: data,
success: function (res) {
alert(res.msg);
if (treeNode.id == -1) {
//刷新id
window.location.reload();
}
}
});
} else {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
}
}
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}
return true;
}
function zTreeBeforeEditName(treeId, treeNode) {
oldName = treeNode.name;
console.log("old name : " + oldName)
return true;
}
// remove
function zTreeOnRemove(event, treeId, treeNode) {
console.log(treeNode);
$.ajax({
type: 'post',
url: '接口地址',
data: {
id: treeNode.id
},
success: function (res) {
alert(res.msg);
}
});

}
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除节点 -- " + treeNode.name + " 吗？");
}
// drop
function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
return confirm("确认移动节点 -- " + treeNodes[0].name + " 吗？");
};
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
if (targetNode == null) {
console.log('drag give up!')
} else {
console.log('from node :' + treeNodes[0])
console.log('to node :' + targetNode)
var data = {
id: treeNodes[0].id,
targetId: targetNode.id
}
console.log(data)
$.ajax({
type: 'post',
url: '接口地址',
data: data,
success: function (res) {
alert(res.msg)
}
});
}
};
// add hover dom
var newCount = -1;
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='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id: (newCount), pId: treeNode.id, name: "请重新命名新节点-"});
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};

</SCRIPT>
</HTML>

ztree查询功能参考//用按钮查询节点

function searchNodes(){
var treeObj = $.fn.zTree.getZTreeObj("tree-obj");
var keywords=$("#keyword").val();
var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null);
if (nodes.length>0) {
treeObj.selectNode(nodes[0]);
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ztree

相关文章推荐

新的分享

章节导航