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);
   });

完成！