jquery ztree 3.4 基本使用

1、一般来说，一棵树总是放在一个单独的页面中。所以需要建立一个单独的页面。

 

2、引入jquery的基本库，jquery-ui库，ztree的样式表。

 

    <link type="text/css" rel="stylesheet" href="<%=path %>/css/style.css" />

    <link type="text/css" rel="stylesheet" href="<%=path %>/css/zTreeStyle/zTreeStyle.css" />

    <script type="text/javascript" src="<%=path %>/js/jquery-1.8.1.min.js"></script>

    <script type="text/javascript" src="<%=path %>/js/jquery-ui-1.9.0.custom.js"></script>

    <script type="text/javascript" src="<%=path %>/js/jstree/jquery.ztree.core-3.4.min.js"></script>

    <script type="text/javascript" src="<%=path %>/js/jstree/jquery.ztree.excheck-3.4.min.js"></script>

 

3、在页面中建立div

 

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

 

4、初始化树，以下beforeModuleCheck等几个方法并不完全支持，是因为我们只引入了jquery.ztree.excheck-3.4.min.js一个扩展包，还有很多，

    视需要引 入。 

 

       var setting = {

                   view: {

                             expandSpeed: "fast",

                             showIcon: true

                   },

                   data: {

                            simpleData: {

                            enable: true,

                            idKey:"id",

                            pIdKey:"pId",

                            rootPId: null

                           }

                },

                check: {

                          enable: true

                           },

                callback: {

                          beforeCheck:beforeModuleCheck,

                          onCheck:onModuleCheck

                         }

               };

 

               function beforeModuleCheck(treeId, treeNode) {

                        return true;

               }

 

               function onModuleCheck(treeId, treeNode) {

               }

 

               function beforeAsync(treeId, treeNode) {

                   return true;

               }

 

               function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

               }

 

               function onAsyncSuccess(event, treeId, treeNode, msg) {

               }

                

               $(document).ready(function(){

 

                  $.ajax({

                  type: "post",

                  url: "<%=path %>/pages/system/getSysModule.action",

                  dataType: "json",

                  success: function(data){

                                var zNodes = eval(data);

                                $.fn.zTree.init($("#moduleTree"), setting, zNodes);

                   }});

             });

              

5、实际应用中这棵树既可以通过iframe嵌入到页面，也可以通过iframe配合jquery dialog单独形成窗口。

      详细的api地址:http://www.ztree.me/v3/api.php

      请注意里面的这句话    注释： core 核心包 excheck 扩展 exedit 扩展 exhide 扩展