ztree实现树的异步加载
因为工作,需两棵树,然后可以对除了根的所有节点进行比较,而且这棵树要求是异步加载的,要实现选择比较节点,我想在除了根的每个节点之前加一个单选框。我在网上查了很多资料实现异步加载树结构的框架,通过比较,感觉ztree特别强大,至少能实现我要的功能,而且操作方便。
首先到ztree的官网上去下了一个最新的版本,好像是3.5的吧,减压后看到里面不仅有demo,还有API,我是先看的demo,看到不懂的然后查API,好像API不支持chrome浏览器,我用的是firefox,可能是我太孤陋寡闻了,这个API文档是我用过的所有API中最方便的一个,而且界面效果也不错。看demo的时候觉得挺简单的,但是具体做起来就不那么简单了。
我自己写了一些树节点的静态数据,数据是JSON格式,因为树以这种格式加载树节点,但是页面上树的效果怎么也做不出来,但我把数据换成是demo里面的数据就可以显示出来了,后来反复查看,原来是在json中,name的value没有加双引号,悲剧。一个小细节的问题,举个例子。
<script type="text/javascript">
$(document).ready(function(){
//树需要做的设置,API里面都有
var setting = {
async:{//异步加载需要做的设置
enable:true,
//异步请求服务器地址
url:"/firefly/project/branch_report",
autoParam:["id"],
otherParam: ["pid",pid,"isFirstLoad""false"],
},
check:{//有单选框的设置
enable:true,
chkStyle:"radio",
radioType:"all"
}
};
//页面 打开时我就能获得根节点的json数据,{id:1,name:”aaa”}形式,
//这是后台传给我的,${script}是用模板形式获得数据,直接在页面输出//是json格式数据
var firstData = ${script};
var zNodes = firstData;
};
//初始化树,这里初始化了两棵树,”#sourceTree”是页面ul标//签的id,页面必须写一个<ul id=” sourceTree”></ul> 才行,必须是ul标签
$.fn.zTree.init($("#sourceTree"), setting, zNodes);
$.fn.zTree.init($("#targetTree"), setting, zNodes);
//初始化树对象,可用该对象条用它的方法,实现对树的操作,//"sourceTree"同上是<ul>标签的id
var sourceTreeObj = $.fn.zTree.getZTreeObj("sourceTree");
var targetTreeObj = $.fn.zTree.getZTreeObj("targetTree");
$("#confirm").click(function(){
//获取单选框选中的所有节点,具体看API
var sourceNodes = sourceTreeObj.getCheckedNodes(true);
var targetNodes = targetTreeObj.getCheckedNodes(true);
var temSourceTree = sourceNodes[0];
var temTargetTree = targetNodes[0];
//可以获得节点的ID,NAME等,然后存到页面上的一个隐藏域里
$("#sourceId").val(temSourceTree.id);
$("#sourceName").val(temSourceTree.name);
$("#targetId").val(temTargetTree.id);
$("#targetName").val(temTargetTree.name);
//获得所有表单数据
var b = $("#allForm").serialize();
//通过ajax把数据传到后台
$.ajax({
url:"/firefly/project/show_branch_report",
type:"post",
data:b,
success:function(data){
alert("sucess");
}
});
});
</script>
说明:我后台是java语言写的servelet程序,直接print.write出来的是json数据,就可以实现点击树节点左边的“+“,去异步请求文件,然后把请求的JSON数据显示到树上。在这过程中遇到一个特别头疼的问题,json数据中有中文显示的是乱码,后来查明原因是因为后台java代码用的是gbk编码,而前端页面用的是UTF-8,如果能报持前后端编码一致乱码就没问题了,最后的解决办法是,servelet在响应response的时候,用response.setContentType("text/html; charset=utf-8")把响应的编码设成UTF-8就可以了
问题:我不知道如果开始页面上没有根节点,ztree是否能自动根据异步加载配置的URL去请求服务器?