ZTree 使用范例

http://www.treejs.cn/v3/api.php zTree v3.x 入门指南 Api 文档

https://github.com/zTree/zTree_v3 下载ZTree v3

1、加载css js 文件

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

2、使用

view 页面

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

js 代码

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

这样就可以生成一个简单的树了。

接下来，我们要给这个树增加别的功能。

例如，如果你想实现增删改、只需要对Setting配置信息进行修改。

 var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: true,
            editNameSelectAll:true,
            removeTitle:'删除',
            renameTitle:'编辑'
        },
        callback:{
            beforeRemove:beforeRemove,//点击删除时触发
            beforeEditName: beforeEditName,//点击编辑时触发
            onRemove:onRemove,//删除节点后触发，用户后台操作
            beforeDrag:beforeDrag,//用户禁止拖动节点
            onClick:clickNode//点击节点触发的事件
        }
    };
//再对每个方法进行处理就可以了

至于各种类型树的实现，大家看 官网的demo 一下就能掌握了！

http://www.treejs.cn/v3/demo.php#_101