zTree入门教程
一、首先需要去官网下载相关的文件http://www.treejs.cn/v3/main.php#_zTreeInfo
二、在html导入资源文件
<link href="js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
<script src="js/zTree_v3/js/jquery-1.4.4.min.js" type="application/javascript"></script>
<script src="js/zTree_v3/js/jquery.ztree.all.js"></script>
三、在html中定义一个zTree的容器
<div>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;">
</ul>
</div>
四、编写js代码生成zTree
<script type="text/javascript">
$(function(){
var setting={
check: {
enable: true,
chkStyle: "checkbox"//显示 checkbox 选择框，默认checkbox可选择值radio
},
//添加回调函数
callback:{
onCheck:zTreeOnCheck
}
};
var zTreeNodes=[
{"name":"北京","open":true,children:[
{"name":"东城区"},
{"name":"朝阳区"}
]},//open:true表示默认展开
{"name":"重庆","open":false,children:[
{"name":"巴南区",children:[
{"name":"南泉"},
{"name":"界石"}
]},
{"name":"渝中区"}
]},
{"name":"江西","open":false,children:[
{"name":"南昌",children:[
{"name":"湾里"},
{"name":"瑶湖"}
]},
{"name":"赣州"}
]}
];
var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
//第一个参数为zTree的DOM容器，第二个为zTree设置详情可见官网api,第三个为zTree的节点数据
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.name);//弹出城市名字
}
});
</script>
运行效果：
五、异步获取数据（在实际项目中适用）
<!doctype html>
<html>
<head>
<title> ztree demo </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
<script src="js/zTree_v3/js/jquery-1.4.4.min.js" type="application/javascript"></script>
<script src="js/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
$(function(){
var setting={
check: {
enable: true,
chkStyle: "checkbox"//显示 checkbox 选择框，默认checkbox可选择值radio
},
callback:{
onCheck:zTreeOnCheck
},
async: {
enable: true,//要开启async功能必须设置为true,其他地方同理
dataType: "json",
type: "get",
url: "city.json"
},
data: {
simpleData: {
enable: true,
idKey: "id",//节点id名
pIdKey: "pid",//父节点id名
rootPId: 0//默认根节点为0
}
}
};
var zTreeNodes=[];
var city = $.fn.zTree.init($("#tree"),setting, zTreeNodes);
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.name);//弹出城市名字
}
});
</script>
</head>
<body>
<div>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;">
</ul>
</div>
</body>
</html>
其中的city.join文件如下
[
{"name":"北京","open":true,"id":1,"pid":0},
{"name":"东城区","id":11,"pid":1},
{"name":"朝阳区","id":12,"pid":1},
{"name":"重庆","open":false,"id":2,"pid":0},
{"name":"巴南区","open":false,"id":21,"pid":2},
{"name":"南泉","id":211,"pid":21},
{"name":"界石","id":212,"pid":21},
{"name":"渝中区","id":22,"pid":2},
{"name":"江西省","open":false,"id":3,"pid":0},
{"name":"赣州市","id":31,"pid":3},
{"name":"宁都县","id":311,"pid":31},
{"name":"定南县","id":312,"pid":31},
{"name":"于都县","id":313,"pid":31},
{"name":"龙南县","id":314,"pid":31},
{"name":"南昌市","id":32,"pid":3},
{"name":"南昌县","id":321,"pid":32},
{"name":"湾里区","id":322,"pid":32},
{"name":"瑶湖区","id":323,"pid":32},
{"name":"青山湖区","id":324,"pid":32}
]
然后，在city.json文件中添加城市的简单json数据(与上面的json数据有所区别，
这里不再有子节点children，需要设置该节点的父节点pid,根节点pid为0。)
需要注意的是
data: {
simpleData: {
enable: true,
idKey: "id",//节点id名
pIdKey: "pid",//父节点id名
rootPId: 0//默认根节点为0
}
}
~~
其中的idkey和pidkey需要join数据中的名称对应起来。
~~
更多技术交流，可以添加本人微信
