目的及实现结果: 建立一个简单的tree树
需要引入的 js 包有:TreeStyle.css,jquery-1.4.4.min.js,jquery.ztree.core-3.5.js,jquery.ztree.excheck-3.5.js
ztree建立树级结构:使用其ztree的初始化方法:$.fn.zTree.init( $(" 区域") , setting ,treenode ),重点就是这三个参数的配置
参数说明:setting:用于设置ztree的属性; treenode 用于设置节点 具体可以参考:ZtreeAPI 文档:http://www.treejs.cn/v3/api.php
其中遇到的问题:其中css样式,img图片引入,再设计谁checkbox的使用
整体程序:
<!DOCTYPE html>
<html>
<head>
<title>Ztree实例</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="jquery.ztree.excheck-3.5.js"></script>
</head>
<body>
<div>
<ul id="tree" class="ztree"></ul>
</div>
<script>
var setting = {
isSimpleData : true, //数据是否采用简单 Array,默认false
treeNodeKey : "id", //isSimpleData格式下,当前节点id属性
treeNodeParentKey : "pId", //isSimpleData格式下,当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
check:{
enable:true
} //每个节点上是否显示 CheckBox
};
var treeNodes = [
{"id":1,"pId":0,"name":"test1",open:true,children:[{"name":"test1-1","id":11},{"name":"test1-2","id":12}]},
{"id":2, "name":"test2",open:true,children:[{"name":"test2-1","id":21},{"name":"test2-2","id":22}]},
{"id":3, "name":"test3",open:true,children:[{"name":"test3-1","id":31},{"name":"test3-2","id":32}]},
{"id":4, "name":"test4",open:true,children:[{"name":"test4-1","id":41},{"name":"test3-2","id":42}]},
]
var zTree;
$(function() {
$.fn.zTree.init(
$("#tree"),
setting,
treeNodes
)
});
</script>
</body>
</html>
结果显示: