jquery ztree插件使用 (使用ztree构造节点树)

1. 在页面中引入ztree相关的文件：

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

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

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

 2.使用标准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>

效果图:

 3.使用简单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>

效果图:

4.发送ajax请求获取json数据构造ztree,使用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:'<iframe frameborder="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>

效果图: