http://www.treejs.cn/v3/demo.php#_101
1) "<!DOCTYPE html>" 是必需的!
2) zTree 的容器 className 别忘了设置为 "ztree"
3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj; // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {}; // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [ {
name:"test1",
open:true,
children:[ {name:"test1_1"}, {name:"test1_2"}]},
{
name:"test2",
open:true,
children:[ {name:"test2_1"}, {name:"test2_2"}]} ];
$(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); });
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>