最近弄的项目中有用到z-tree就趁机研究一下，都是一些官方的小例子，这里记录一下，以后用的时候可以直接用。
1、标准模式：基本页面和引入的文件与官网demo相同：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>z-tree实例，标准模式</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
<style type="text/css">
.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
Z-tree结构中用到的JS:
<SCRIPT type="text/javascript">
var setting = {
async:{
},
edit: {
//editNameSelectAll:true,
enable:false,//是否能够编辑，默认为false，设置为true时表示可以编辑，false不能编辑，不能重命名、删除和添加
removeTitle:"删除",//删除按钮提示信息
renameTitle:"重命名",//重命名按钮提示信息
showRemoveBtn:true,//表示 显示 / 隐藏 删除按钮,默认为true
showRenameBtn:true//表示 显示 / 隐藏 重命名按钮,默认为true
},
data: {
keep: {
parent: true,//true / false 分别表示 锁定 / 不锁定 父节点属性,如果设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态，否则就是基本节点状态。
leaf:false//true / false 分别表示 锁定 / 不锁定 叶子节点属性,默认为false,如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点。
},
key: {
url: "xUrl"
}
},
view:{
/*
fontCss:{//个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
color:"red", //设置全部字体为红色
fontSize:"18px",//修改字体大小无效，因为css文件中有相关设置，需要修改css文件，且其他设置如行高、图片大小也需要进行相应设置，比较麻烦
fontWeight:"bold"
},
*/
fontCss:getFont,//字体样式函数
nameIsHTML: true,//设置 name 属性是否支持 HTML 脚本,默认为false
showTitle:true,//显示或隐藏提示信息，默认为true
showIcon:showIconForTree,//显示或隐藏图标，默认为true
showLine:true//显示或隐藏连接线，默认为true
}
};
var zNodes =[
{ name:"父节点1 - 展开", open:true,
iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png",//打开时使用图标
iconClose:"../../../css/zTreeStyle/img/diy/1_close.png",//关闭时使用图标（两个属性必须一起使用，否则无效）
children: [
{ name:"父节点11 - 折叠", iconSkin:"pIcon01",//iconSkin：自定义图标
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
font:{"font-weight":"bold","font-style":"italic","color":"red"},//自定义样式
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"<span style='color:blue;margin-right:0px;font-weight:bold'>父节点13</span><span style='color:red;margin-right:0px;font-weight:bold'>- 没有子节点</span>"//名称设置为html脚本，前提条件是view中需要设置nameIsHTML的属性为true，否则无效
, isParent:true,
}
]},
{ name:"父节点2 - 折叠",
icon:"../../../css/zTreeStyle/img/diy/3.png",//打开关闭时图标相同
children: [
{ name:"父节点21 - 展开", open:true,
children: [
{ name:"叶子节点211"},
{ name:"叶子节点212"},
{ name:"叶子节点213"},
{ name:"叶子节点214"}
]},
{ name:"父节点22 - 折叠",
children: [
{ name:"叶子节点221"},
{ name:"叶子节点222"},
{ name:"叶子节点223"},
{ name:"叶子节点224"}
]},
{ name:"父节点23 - 折叠",
children: [
{ name:"叶子节点231"},
{ name:"叶子节点232"},
{ name:"叶子节点233"},
{ name:"叶子节点234"}
]}
]},
{ name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//字体样式修改
function getFont(treeId, treeNode) {
//有样式使用原来的样式，没样式使用新样式
//若使用新样式，1级节点蓝色并加粗，其他的为常规黑色
return treeNode.font ? treeNode.font :
treeNode.level == 0 ? {"color":"blue","font-weight":"bold"} : {'color':'black'};
;
}
//图标显示情况修改:三级节点不显示图标
function showIconForTree(treeId,treeNode){
return treeNode.level!=2;//level的值从0开始
//return !treeNode.isParent;父级节点不显示图标
}
</SCRIPT>
2、简单模式：
<SCRIPT type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true,//是否使用简单数据模式，默认为false,如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
idKey:"id",//节点数据中保存唯一标识的属性名称，默认值id，开启简单数据模式时有效
pIdKey:"pId",//节点数据中保存其父节点唯一标识的属性名称。默认值pId，开启简单数据模式时有效
rootPId:0//用于修正根节点父节点数据，即 pIdKey 指定的属性值,默认值为null，开启简单数据模式时有效
}
}
};
var zNodes=[
{"id":1,"pId":0,"name":"河北",open:true,isParent:true,
//节点链接的目标URL,类似于A标签中href属性，编辑模式 (setting.edit.enable = true) 下此属性功能失效（在非简单模式下使用时好像也无效）
url:"http://www.baidu.com",
//设置点击节点后在何处打开 url。[treeNode.url 存在时有效]。同超链接target属性: "_blank", "_self"或 其他指定窗口名称省略此属性，则默认为 "_blank"(在新窗口中打开)
target:"_blank"
},
{"id":2,"pId":1,"name":"石家庄",open:true},
{"id":21,"pId":2,"name":"化皮镇"},
{"id":22,"pId":2,"name":"承安镇"},
{"id":23,"pId":2,"name":"正莫镇"},
{"id":3,"pId":1,"name":"邯郸",url:"http://www.baidu.com",target:"_self"},
{"id":4,"pId":1,"name":"保定"},
{"id":5,"pId":1,"name":"沧州"},
{"id":6,"pId":0,"name":"河南",open:true,isParent:true},
{"id":7,"pId":6,"name":"郑州"},
{"id":8,"pId":6,"name":"开封"},
{"id":9,"pId":6,"name":"洛阳"},
{"id":10,"pId":6,"name":"南阳"},
{"id":11,"pId":0,"name":"山东",open:false,isParent:true},
{"id":12,"pId":11,"name":"济南"},
{"id":13,"pId":11,"name":"济宁"},
{"id":14,"pId":11,"name":"淄博"},
{"id":15,"pId":11,"name":"德州"},
{"id":16,"pId":0,"name":"山西",open:false,isParent:true},
{"id":17,"pId":16,"name":"太原"},
{"id":18,"pId":16,"name":"大同"},
{"id":19,"pId":16,"name":"朔州"},
{"id":20,"pId":16,"name":"阳泉"}
]
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>