写在开头：这个本来是我一年多之前写的，当时刚开始接触到了layer和zTree这两个插件。就当做笔记一样，记录在了这里，没想到这么多的程序员朋友可以看到。当时文章里写的一些有的设计到项目，就没有拿出来详细说明。现在做了一个简单的demo，有兴趣的朋友可以看下。文末附上了完整demo的github地址
先看效果图
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tree</title>
<!--引入zTree的css-->
<link rel="stylesheet" href="js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
<div class="content_wrap" hidden="hidden">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<button onclick="closeLayer();">关闭layer</button>
</div>
<button onclick="openLayer();">弹出layer</button>
</body>
</html>
<!--引入layer之前需要引入jquery-->
<script src="js/jquery-3.2.1.js"></script>
<!--引入layer-->
<script src="js/layer/layer.js"></script>
<!--引入zTree-->
<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script>
/*
* 更详细的zTree属性配置可以去zTree官网查看
* 地址：http://www.treejs.cn/v3/faq.php#_206
*/
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "level"
},
data: {
simpleData: {
enable: true
}
}
};
/*将数据拼接成如下格式*/
var zNodes =[
{ id:1, pId:0, name:"can check 1", open:true},
{ id:11, pId:1, name:"can check 1-1", open:true},
{ id:111, pId:11, name:"no radio 1-1-1", nocheck:true},
{ id:112, pId:11, name:"can check 1-1-2"},
{ id:12, pId:1, name:"no radio 1-2", nocheck:true, open:true},
{ id:121, pId:12, name:"no radio 1-2-1"},
{ id:122, pId:12, name:"no radio 1-2-2"},
{ id:2, pId:0, name:"can check 2", checked:true, open:true},
{ id:21, pId:2, name:"can check 2-1"},
{ id:22, pId:2, name:"can check 2-2", open:true},
{ id:221, pId:22, name:"can check 2-2-1", checked:true},
{ id:222, pId:22, name:"can check 2-2-2"},
{ id:23, pId:2, name:"can check 2-3"}
];
/*初始化zTree*/
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
var index; // 命名layer弹出层
openLayer = function () {
index = layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: $('.content_wrap')
});
}
closeLayer = function () {
// 关闭layer弹出层
layer.close(index)
}
</script>
github地址：https://github.com/ljhe/OrganizeTree
2330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
