zTree的使用

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="js/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
var setting = {
data: {
key: {
name: "cName"
}
},
async: {
enable: true,
url:"search_child"
},
callback: {
beforeAsync: beforeAsync,
onAsyncError: onAsyncError,
onAsyncSuccess: onAsyncSuccess,
onClick: onClick
}
};
function onClick(event, treeId, treeNode, clickFlag) {
$.ajax(
{
url:"to_edit_category.action?id="+treeNode.id,
dataType:"html",
success:function(data)
{
document.getElementById("displayId").innerHTML=data;
}
})
}
var log, className = "dark";
function beforeAsync(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
//showLog("[ "+getTime()+" beforeAsync ]    " + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
return true;
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
//showLog("[ "+getTime()+" onAsyncError ]    " + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
//showLog("[ "+getTime()+" onAsyncSuccess ]    " + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
</script>

<div>
<ul id="treeDemo" class="ztree"></ul>
<ul id="log" class="log"></ul>
</div>
<br />
<div id="displayId">
Please click on any of the tree nodes.
</div>