关于zTree的简单学习

老实说，这东西其实是我看的培训项目上的讲解，我也只是照搬而已，我会把资料都上传，有想看的就自己看吧。

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

         <scripttype="text/javascript"src="../../../js/jquery-1.4.4.min.js"></script>

         <scripttype="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

 

1.1    使用标准json数据构造ztree（了解）

                                     <!-- 展示ztree效果 :使用标准json数据构造ztree-->

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

                                     <script type="text/javascript">

                                               $(function(){

                                                        //页面加载完成后，执行这段代码----动态创建ztree

                                                        var setting = {};

                                                        //构造节点数据

                                                        var zNodes = [

                                                                      {"name":"节点一","children":[

                                                                                                    {"name":"节点一_1"},

                                                                                                    {"name":"节点一_2"}

                                                                                                ]},//每个json对象表示一个节点数据

                                                                      {"name":"节点二"},

                                                                      {"name":"节点三"}

                                                                      ];

                                                        //调用API初始化ztree

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

                                               });

                                     </script>

效果：

1.2    使用简单json数据构造ztree（重点）

                                     <!-- 展示ztree效果 :使用简单json数据构造ztree-->

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

                                     <script type="text/javascript">

                                               $(function(){

                                                        //页面加载完成后，执行这段代码----动态创建ztree

                                                        var setting2 = {

                                                                           data:{

                                                                                    simpleData:{

                                                                                             enable:true//使用简单json数据构造ztree节点

                                                                                    }

                                                                           }

                                                        };

                                                        //构造节点数据

                                                        var zNodes2 = [

                                                                               {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据

                                                                               {"id":"2","pId":"3","name":"节点二"},

                                                                               {"id":"3","pId":"0","name":"节点三"}

                                                                      ];

                                                        //调用API初始化ztree

                                                        $.fn.zTree.init($("#ztree2"), setting2, zNodes2);

                                               });

                                     </script>

 

效果：

1.3    发送ajax请求获取json数据构造ztree

                                     <!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->

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

                                     <script type="text/javascript">

                                               $(function(){

                                                        //页面加载完成后，执行这段代码----动态创建ztree

                                                        var setting3 = {

                                                                           data:{

                                                                                    simpleData:{

                                                                                             enable:true//使用简单json数据构造ztree节点

                                                                                    }

                                                                           }

                                                        };

                                                       

                                                        //发送ajax请求，获取json数据

                                                        //jQuery提供的ajax方法：ajax、post、get、load、getJSON、getScript

                                                        var url = "${pageContext.request.contextPath}/json/menu.json";

                                                        $.post(url,{},function(data){

                                                                 //调用API初始化ztree

                                                                 $.fn.zTree.init($("#ztree3"), setting3, data);

                                                        },'json');

                                               });

                                     </script>

 

1.4    使用ztree提供的API为节点绑定事件

                                     <!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->

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

                                     <script type="text/javascript">

                                               $(function(){

                                                        //页面加载完成后，执行这段代码----动态创建ztree

                                                        var setting3 = {

                                                                           data:{

                                                                                    simpleData:{

                                                                                             enable:true//使用简单json数据构造ztree节点

                                                                                    }

                                                                           },

                                                                           callback:{

                                                                                    //为ztree节点绑定单击事件

                                                                                    onClick:function(event, treeId, treeNode){

                                                                                             if(treeNode.page !=undefined){

                                                                                                       //判断选项卡是否已经存在

                                                                                                       var e = $("#mytabs").tabs("exists",treeNode.name);

                                                                                                       if(e){

                                                                                                                //已经存在，选中

                                                                                                                $("#mytabs").tabs("select",treeNode.name);

                                                                                                       }else{

                                                                                                                //动态添加一个选项卡

                                                                                                                $("#mytabs").tabs("add",{

                                                                                                                         title:treeNode.name,

                                                                                                                         closable:true,

                                                                                                                         content:'<iframeframeborder="0" height="100%" width="100%"src="'+treeNode.page+'"></iframe>'

                                                                                                                });

                                                                                                       }

                                                                                             }

                                                                                    }

                                                                           }

                                                        };

                                                       

                                                        //发送ajax请求，获取json数据

                                                        //jQuery提供的ajax方法：ajax、post、get、load、getJSON、getScript

                                                        var url = "${pageContext.request.contextPath}/json/menu.json";

                                                        $.post(url,{},function(data){

                                                                 //调用API初始化ztree

                                                                 $.fn.zTree.init($("#ztree3"), setting3, data);

                                                        },'json');

                                               });

                                     </script>