Ztree使用入门

来源：互联网发布：剑灵灵剑捏脸数据图编辑：程序博客网时间：2024/06/10 08:54

目的及实现结果：建立一个简单的tree树

需要引入的 js 包有：TreeStyle.css，jquery-1.4.4.min.js，jquery.ztree.core-3.5.js，jquery.ztree.excheck-3.5.js

ztree建立树级结构：使用其ztree的初始化方法：$.fn.zTree.init( $(" 区域") , setting ,treenode ),重点就是这三个参数的配置

参数说明：setting：用于设置ztree的属性； treenode 用于设置节点具体可以参考：ZtreeAPI 文档：http://www.treejs.cn/v3/api.php

其中遇到的问题：其中css样式，img图片引入，再设计谁checkbox的使用

整体程序：

<!DOCTYPE html><html><head>     <title>Ztree实例</title>     <meta charset="UTF-8">    <link rel="stylesheet" href="zTreeStyle.css" type="text/css">    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>     <script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>    <script type="text/javascript" src="jquery.ztree.excheck-3.5.js"></script></head><body>     <div>     <ul id="tree" class="ztree"></ul>     </div>     <script>     var setting = {         isSimpleData : true,              //数据是否采用简单 Array，默认false          treeNodeKey : "id",               //isSimpleData格式下，当前节点id属性          treeNodeParentKey : "pId",        //isSimpleData格式下，当前节点的父节点id属性          showLine : true,                  //是否显示节点间的连线         check:{            enable:true          }          //每个节点上是否显示 CheckBox          };         var treeNodes = [           {"id":1,"pId":0,"name":"test1",open:true,children:[{"name":"test1-1","id":11},{"name":"test1-2","id":12}]},           {"id":2, "name":"test2",open:true,children:[{"name":"test2-1","id":21},{"name":"test2-2","id":22}]},           {"id":3, "name":"test3",open:true,children:[{"name":"test3-1","id":31},{"name":"test3-2","id":32}]},           {"id":4, "name":"test4",open:true,children:[{"name":"test4-1","id":41},{"name":"test3-2","id":42}]},           ]        var zTree;           $(function() {            $.fn.zTree.init(                  $("#tree"),                  setting,                  treeNodes          )          });      </script></body></html>

结果显示：

0 0