Ztree的简单使用方法

ztree是用来生成树的，详细内容可以点击下面链接

http://www.treejs.cn/v3/main.php#_zTreeInfo

 

简单使用方法如下：

1.下载插件：

       上面网址里面有，整个下下来就好了

2.引用js:

 <link href="~/assets/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 <script src="~/assets/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script src="~/assets/zTree_v3-master/js/jquery.ztree.excheck.js"></script>

  前两个必选，第三个是决定他可不可以有复选框

3.html中给z-tree一个容器：

  <ul id="ReportTree" class="ztree"></ul>

4.js:

 var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
                        check: {
                            chkStyle: "checkbox",//复选框类型
                            enable:true
                        },
                        data: {
                            simpleData: {
                                enable:true
                            }
                        },
                        callback: {
                            beforeCheck: true,
                            onCheck:zTreeOnClick    
                        }
   // 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);
   });

完成！