步骤
引入ztree的css与js
代码
<!DOCTYPE html>
<html>
<head>
<title>系统安装</title>
<link href="/style/v3/layui/css/layui.css" type="text/css" rel="stylesheet" />
<link href="/style/v3/ztree/css/zTreeStyle.css" type="text/css" rel="stylesheet" />
<script src="/style/v3/layui/layui.js"></script>
<script src="/style/v3/js/jquery.min.js?t=287"></script>
<script src="/style/v3/js/adfutil.js?t=287"></script>
<script src="/style/v3/ueditor/ueditor.config.js?t=287"></script>
<script src="/style/v3/ueditor/ueditor.all.js"></script>
<script src="/style/v3/ztree/js/jquery.ztree.all.js?t=287"></script>
<script>
var table = layui.table;
</script>
<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 class="layui-form" id="curForm" lay-filter="curForm">
<div class="layui-row">
Ztree使用
</div>
<div class="layui-row">
<div class="layui-col-md2">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="layui-col-md10"></div>
</div>
</div>
<script>
$(function() {
var setting = {
view: {expandSpeed:"",
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeRemove: beforeRemove,
beforeRename: beforeRename
}
};
var zNodes =[
{ id:1, pId:0, name:"随意拖拽 1", open:true},
{ id:11, pId:1, name:"随意拖拽 1-1"},
{ id:12, pId:1, name:"随意拖拽 1-2", open:true},
{ id:121, pId:12, name:"随意拖拽 1-2-1"},
{ id:122, pId:12, name:"随意拖拽 1-2-2"},
{ id:123, pId:12, name:"随意拖拽 1-2-3"},
{ id:13, pId:1, name:"禁止拖拽 1-3", open:true, drag:false},
{ id:131, pId:13, name:"禁止拖拽 1-3-1", drag:false},
{ id:132, pId:13, name:"禁止拖拽 1-3-2", drag:false},
{ id:133, pId:13, name:"随意拖拽 1-3-3"},
{ id:2, pId:0, name:"随意拖拽 2", open:true},
{ id:21, pId:2, name:"随意拖拽 2-1"},
{ id:22, pId:2, name:"禁止拖拽到我身上 2-2", open:true, drop:false},
{ id:221, pId:22, name:"随意拖拽 2-2-1"},
{ id:222, pId:22, name:"随意拖拽 2-2-2"},
{ id:223, pId:22, name:"随意拖拽 2-2-3"},
{ id:23, pId:2, name:"随意拖拽 2-3"}
];
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, '.');
}
return childNodes;
}
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
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;
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
layer.msg("增加一个子节点...");
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(){
layer.msg("这里做一个弹窗，进行节点所有的属性的控制，下面是模拟弹窗");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var form = layui.form;
form.render();
});
</script>
</body>
</html>重点说明
增加、修改、删除等可以结合相关的业务进行动态调整