<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.all-3.5.js"></script>
<script>
$(function () {
var data = [
{"id": 0, "name": "根节点"},
{"id": 1, "name": "节点1", "pid": 0},
{"id": 2, "name": "节点2", "pid": 0},
{"id": 3, "name": "节点3", "pid": 0},
{"id": 4, "name": "节点4", "pid": 0},
{"id": 21, "name": "节点21", "pid": 2},
{"id": 22, "name": "节点22", "pid": 2},
{"id": 23, "name": "节点23", "pid": 2}
];
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPid: 0
}
}
};
var zTree = $.fn.zTree.init($("#tree"), setting, data);
zTree.expandAll(true);
});
</script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
1.使用上面的代码之后,你会发现添加了jquery、css、js ,树还是不能正常显示,你需要:
<div id="tree"></div>
添加class,改成下面这样:
<div id="tree" class="ztree"></div>