最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。
1、通过官网下载demo或者下载zTree相关的插件；
官网地址：zTree官网
2、页面文件引入需要的zTree插件：
主要引入的对象有：zTreeStyle.css、 jquery-1.4.4.min.js、 jquery.ztree.all.js。
引入示例：
-
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
-
<script type="text/javascript" src="jquery-1.4.4.min.js">
</script>
-
<script type="text/javascript" src="jquery.ztree.all.js">
</script>
3、编写js脚本，设定树形结构的一些属性值以及加载文件位置：
页面内容：
-
<BODY>
-
<div>
-
<ul id="treeDemo" class="ztree">
</ul>
-
</div>
-
</BODY>
js脚本文件：
-
<SCRIPT LANGUAGE="JavaScript">
-
//js方法
-
function test(event, treeId, treeNode){
-
alert(treeNode.tId +
", " + treeNode.name +
"," + treeNode.checked);
-
}
-
-
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
-
var setting = {
-
check:{
-
enable:
true,
-
autoCheckTrigger:
true,
-
chkStyle:
"checkbox"
-
},
-
callback:{
-
onCheck:test
-
}
-
};
-
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
-
var zNodes = [
-
{
name:
"test1",
open:
true,
"checked":
"true",
children:[
-
{
name:
"test1_1",
"checked":
"true"}, {
name:
"test1_2"}]},
-
{
name:
"test2",
open:
true,
children:[
-
{
name:
"test2_1"}, {
name:
"test2_2"}]}
-
];
-
$(
document).ready(
function(){
-
//页面加载成功后,开始加载树形结构
-
$.fn.zTree.init($(
"#treeDemo"), setting, zNodes);
-
});
-
</SCRIPT>
至此,一个完整的树形结构完成,如果需要对树进行其他操作可以参考官网API文档.
运行结果如下:
