JQuery树插件——ztree

　　API与Demo:http://www.treejs.cn/v3/api.php

使用插件，第一步依然是引入：

<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>

　　//详细的引入请参见API——如果有较多地方需要引入，请将引入部分抽取为专门的JSP页面，使用 <include />，例如，引入的页面：

<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>

　　　　如何引入：

<%@include file="/WEB-INF/views/include/treeview.jsp" %>

　　接下来看实例：

zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

　　大致分析：

　　其中，$.fn.zTree.init为初始化树的方法，它接收三个参数，第一个为ztree的DOM容器，通常为 <ul> 或 <div>，例如：

<ul id="treeDemo" class="ztree"></ul>
<div id="ztree" class="ztree"></div>

//请务必设置class为 ztree，以指定为ztree的容器。

　　第二个参数为ztree的配置，用于显示树的显示样式，例如：

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};

//详细配置后续补充

　　第三个参数为ztree的数据源，格式为JSON：

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"}]}  
  ];

　　这样，一个最简单的树便可以加载了：

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
  <script src="js/jquery-1.4.4.min.js"></script>
  <script src="js/jquery.ztree.all.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {};
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [  
  {name:"test1111", open:true,"checked":"true", children:[  
     {name:"test1_1","checked":"true"}, {name:"test1_2"}]},  
  {name:"test2222", open:true, children:[  
     {name:"test2_1"}, {name:"test2_2"}]}  
  ]; 
     
      $(function(){
         zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

View Code