zTree的使用

zTree的使用

js函数：

<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 ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
   return true;
  }
  function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
   //showLog("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
  }
  function onAsyncSuccess(event, treeId, treeNode, msg) {
   //showLog("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!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>

分析：通过setting加载树节点数据，通过onClick函数，为节点加载函数。