利用jQuery的ajax点击ztree节点把json里面的数据放到指定的div中

哎，就是点击ztree树上的节点，通过id来对应，然后把想要的东西插入到div中，用的jq，方便，哈哈。div什么的样式不用我来调了吧，我是把项目中的代码直接弄过来了


参考文档：jq ajax： http://www.w3school.com.cn/jquery/ajax_ajax.asp

 ztree的API：http://www.jyvtc.com/dzb/uiFramework/js/zTree-v3.2/api/API_cn.html



引用部分：

<span style="font-size:12px;"><!--表格树引用的js -->
<script type="text/javascript" src="../js/ztree/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.exedit-3.5.js"></script>
<link rel="stylesheet" href="../css/css_tree/zTreeStyle/zTreeStyle.css" type="text/css"></span>

<span style="font-size:12px;">
</span>

<span style="font-size:12px;">自己可以去下载文档，然后根据位置引用文件，不要搞忘哦→_→</span>

html：

<span style="font-size:14px;">css我就直接写在里面了，有的样式没写，嫌麻烦→_→自己调整</span>

<span style="font-size:14px;"> </span><span style="font-size:14px;font-weight: normal;"><div class="tab-content" style="min-width: 376px; height: 258px; float: left; overflow: hidden; margin: -8px 0 0 0; padding: 0;">
<!--知识库左边树形结构 -->
<div class="tab_content_ztree" style=" width: 170px; height: 260px;overflow: auto;color: yellow;float: left;">
<ul id="demoZtree" class="ztree">
<li>111</li>
</ul>
</div>
<!--知识库右边→_→说明 -->
<div class="tab_content_ztree_explain" style="  width: 183px;
            height: 250px;
            overflow: auto;
            color: #7e7e7e;
            float: left;
            border-left: 1px solid #E2E2E5;
            padding: 4px;
            font-size: 12px;
            line-height: 14px;">
<p><b id="tab_content_ztree_explain_title">参考答案</b> </p>
<p id="tab_content_ztree_explain">
<frame src="share002_tree.do" name="treeFrame" id="treeFrame" frameborder="0" scrolling="auto" noresize="noresize" marginwidth="0" marginheight="0" />

</p>
</div>
</div></span>

js

<script>

//这部分是直接创建的ztree树结构，当然还可以动态创建，~~~~(>_<)~~~~
$(function(){
var zNodes = [
{ "id":0, "name":"供热质量",
children: [
{ "id":1, "name":"供热系统"},
{ "id":2, "name":"供热设施"},
{ "id":3, "name":"用热户"}
]
},
{ "id":4, "name":"服务质量",
children: [
{ "id":5, "name":"供热温度"},
{ "id":6, "name":"用户室温检测"},
{ "id":7, "name":"供热水质"}
]
},
{ "id":8, "name":"报修",
children: [
{ "id":9, "name":"test3"},
{ "id":10, "name":"test4"},
{ "id":11, "name":"test5"}
]
},
{ "id":12, "name":"咨询",
children: [
{ "id":13, "name":"test3"},
{ "id":14, "name":"test4"},
{ "id":15, "name":"test5"}
]
},
{ "id":16, "name":"建议",
children: [
{ "id":17, "name":"test3"},
{ "id":18, "name":"test4"},
{ "id":19, "name":"test5"}
]
},
]

//模拟数据
var MoNidata = [
[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]
]
//ztree子节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
// alert(treeNode.tId + ", " + treeNode.name);
$("#eventProblemDesc1").html(treeNode.name);

//插入节点到右边的框内   $("#tab_content_ztree_explain").html(treeNode.name+':');
//利用ajax获取ztree对应节点的信息
$.ajax({
type:"GET",
url:"../music.txt", //从服务器拿东西，地址自己写
dataType:"json",
success:function(data){
//利用Selected获取 zTree 当前被选中的节点数据集合（下面两个语句根据ztreeAPI写的）
var treeObj = $.fn.zTree.getZTreeObj("demoZtree");
var nodes = treeObj.getSelectedNodes();

// console.log(nodes); 下面通过ID对比循环判断，把txt里面的json数据的id拿来和树的id进行比较
for (var i = 0; i < data.length; i++) {
var item = data[i];
if(item.id == nodes[0].id){
// alert(item.name);
var music="<p>";
music+=item.answer+"</p>";
$('#tab_content_ztree_explain').html(music); //把json里想要的值赋给变量music，然后插入到div中

}
}

}
});
return false;

};

//ztree设置常规的东西
var setting = {
callback: {
onClick: zTreeOnClick
},

view:{showLine:true, showIcon: false}

};

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

});
</script>

txt里的json数据

<span style="font-size:12px;">[
{"id":"0", "content":"Canon in D Canon in D Canon in D","answer":"hellow"},
{"id":"1", "content":"C","answer":"yellow"},
{"id":"2", "content":"123","answer":"cool"},
{"id":"3", "content":"Wings","answer":"father"},
{"id":"4", "content":"abC","answer":"uncle"},
{"id":"5", "content":"qwe123","answer":"baby"},
{"id":"6", "content":"zxcWings","answer":"luagh"}
] </span><span style="font-size:32px;">
</span>