利用jQuery的ajax得到的数据动态创建树，然后点击数节点，把对应的节点的节点信息赋值给某一个div，是上一篇的升级版

 利用jQuery的ajax得到的数据动态创建树，然后点击数节点，把对应的节点的节点信息赋值给某一个div，是上一篇的升级版

<span style="font-size:24px;color:#ff0000;">上一篇是固定创建，这一篇是动态创建。人有点笨，慢慢来<img alt="大笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif" /></span>

</script>
    <!--表格树js -->
    <script>
        $(function(){
              
            var setting = {
               
                view:{showLine:true, showIcon: false}, //有没有连线和显不示显示图标
               //下面语句可以让pid相同的分层
                data: {
                    simpleData: {
                        enable: true //自动成圣树结构
                    }
                },
                callback: {
            onClick: zTreeOnClick //回调点击函数
        }

            };    
           
            //动态获取数据自动生成树
            $.ajax({
                type: "post",
                url: "../tools/admin_ajax.ashx?action=GetCallContent&time=" + Math.random(),//链接地址
                dataType: "html",
                success: function (data) {
                    //转换一下json
                    var myNodes = JSON.parse(data);
                    var zNodes = [];

                  //  alert(myNodes);
                    for (var i = 0; i < myNodes.length; i++) {    //判断                 
                        if (myNodes[i].open != null) {
                            if (myNodes[i].checked != null && myNodes[i].checked )
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, open: true, checked: true };
                            else
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, open: true };
                        }
                        else {
                            if (myNodes[i].checked != null && myNodes[i].checked )
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, checked: true };
                            else
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer,};

                        }
                    }
                    $.fn.zTree.init($("#demoZtree"), setting, zNodes);//初始化树
                    $.fn.zTree.getZTreeObj("#demoZtree");//把得到的树赋给div
                }


            });

           //动态生成树的 ztree子节点点击事件
            function zTreeOnClick(event, treeId, treeNode) {
                // alert(treeNode.tId + ", " + treeNode.name);
                $("#eventProblemDesc1").html(treeNode.name);//把标题赋值给div
               
               //插入节点到右边的框内   $("#tab_content_ztree_explain").html(treeNode.name+':');
                $.ajax({
                    type: "get",
                    url: "../tools/admin_ajax.ashx?action=GetCallContent&time=" + Math.random(),
                    dataType: "html",
                    success: function (data) {
                        //转换一下
                        var myNodes = JSON.parse(data);
                        var zNodes = [];
                        //利用Selected获取 zTree 当前被选中的节点数据集合
                        var treeObj = $.fn.zTree.getZTreeObj("demoZtree");
                        var nodes = treeObj.getSelectedNodes();
                       
                       // console.log(nodes);
                        for (var i = 0; i < myNodes.length; i++) { 
                            var item = myNodes[i];
                            if(item.id == nodes[0].id){  //<span style="font-family: Arial, Helvetica, sans-serif;">判断树节点与点击的节点对应的id是否相等</span>

                                   //  alert(item);
                                    var cont = ''; 
                                    cont+=item.answer; 
                                    $('#tab_content_ztree_explain').html(cont); //赋值给div
                         
                                   
                                   // $('treeNode.name').html(answ); 

                            }
                        }
                    }


                });
            };

      
        });

    </script>

<span style="font-size:48px;color:#ff0000;">上面代码点击的时候得次次从服务器加载数据，所以</span>

<span style="font-size:48px;color:#ff0000;">就定义一个全局变量shuju，就搞定了</span>

<pre name="code" class="javascript"><span style="font-size:14px;">$(function(){
              
            var setting = {
               
                view:{showLine:true, showIcon: false}, //有没有连线和显不示显示图标
               //下面语句可以让pid相同的分层
                data: {
                    simpleData: {
                        enable: true //自动成圣树结构
                    }
                },
                callback: {
            onClick: zTreeOnClick //回调点击函数
        }

            }; 
            //
            ///  设置全局变量进行优化代码，相当于只进行一次数据加载 ，然后使用数据，不用一直请求数据
            ///
            var shuju = '';//设置全局变量

            //动态获取数据自动生成树
            $.ajax({
                type: "post",
                url: "../tools/admin_ajax.ashx?action=GetCallContent&time=" + Math.random(),//链接地址
                dataType: "html",
                success: function (data) {
                    //转换一下json
                    var myNodes = JSON.parse(data);
                    var zNodes = [];

                    
                  //  alert(myNodes);
                    for (var i = 0; i < myNodes.length; i++) {    //判断                 
                        if (myNodes[i].open != null) {
                            if (myNodes[i].checked != null && myNodes[i].checked )
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, open: true, checked: true };
                            else
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, open: true };
                        }
                        else {
                            if (myNodes[i].checked != null && myNodes[i].checked )
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, checked: true };
                            else
                                zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer,};

                        }
                    }
                    async : false,//设置为同步操作就可以给全局变量赋值成功
                   shuju = myNodes;//shuju为前面声明的全局变量 

                    $.fn.zTree.init($("#demoZtree"), setting, zNodes);//初始化树
                    $.fn.zTree.getZTreeObj("#demoZtree");//把得到的树赋给div
                }


            });

        
            //动态生成树的 ztree子节点点击事件
            function zTreeOnClick(event, treeId, treeNode) {
                // alert(treeNode.tId + ", " + treeNode.name);
                $("#eventProblemDesc1").html(treeNode.name);
               
                        //转换一下
                        //var myNodes = JSON.parse(data);
                        var zNodes = [];
                        //利用Selected获取 zTree 当前被选中的节点数据集合
                        var treeObj = $.fn.zTree.getZTreeObj("demoZtree");
                        var nodes = treeObj.getSelectedNodes();
                       
                        // console.log(nodes);
                        for (var i = 0; i < shuju.length; i++) {
                            var item = shuju[i];
                            if(item.id == nodes[0].id){
                                //  alert(item);
                                var cont = ''; 
                                cont+=item.answer; 
                                $('#tab_content_ztree_explain').html(cont); 
                         
                                   
                                // $('treeNode.name').html(answ); 

                            }
                        }
                    


               
            };




      
        });</span>