ztree异步加载树节点

最近写程序需要一颗可以一步加载的树,发现ztree功能很强大。搞了好久才知道怎么实现树节点的异步加载,在这里记录下来以方便以后自己忘记了。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<#global path = request.getContextPath() >

<!--以下为,需要引入的css和js类库-->
<link rel="stylesheet" href="${path}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
 <script type="text/javascript" src="${path}/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}/ztree/js/jquery.ztree.core-3.1.js"></script>
<script>

 <!--
  var zTree;
  var productIframe;
 
  var setting = {
   async: {
    enable: true,//启用异步加载
    url:"${path}/pmproductAction!producttree.action", //异步请求地址
    autoParam:["id", "str1"], //需要传递的参数,为你在ztree中定义的参数名称
    otherParam:{"chk":"chk"}
   },
   view: {
    dblClickExpand: false,
    showLine: true,
    selectedMulti: false,
    expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
   },
   data: {
    simpleData: {
     enable: true
    }
   },
   callback: {
    onAsyncSuccess: onAsyncSuccess,
    beforeClick: function(treeId, treeNode) 

    var zTree = $.fn.zTree.getZTreeObj("ztree");
     if (treeNode.isParent) {
      zTree.expandNode(treeNode);
      return false;
     } else {
      productIframe.attr("src",treeNode.url);
      return true;
     }
    }
   }
  };
 
  function onAsyncSuccess(event, treeId, treeNode, msg) {
   cancelHalf(treeNode);
  }
  function cancelHalf(treeNode) {
   var zTree = $.fn.zTree.getZTreeObj("ztree");
   treeNode.halfCheck = false;
   zTree.updateNode(treeNode);   //异步加载成功后刷新树节点
  }
 
   $(document).ready(function(){
    //以下为第一次要加载的一级节点

    $.post("${path}/pmproductAction!producttree.action",{id:0,str1:"type"},function(result){
         $.fn.zTree.init($("#ztree"), setting, result);
    });
    productIframe = $("#products");
    productIframe.bind("load", loadReady);
  });
  
  function loadReady() {
   var bodyH = productIframe.contents().find("body").get(0).scrollHeight,
   htmlH = productIframe.contents().find("html").get(0).scrollHeight,
   maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
   h = productIframe.height() >= maxH ? minH:maxH ;
   if (h < 530) h = 530;
   productIframe.height(h);
  }
 
  //-->
 
</script>
</head>

<body>
<table border=0 height=500px align=left>
  <tr>
    <td width="20%" align="left" valign="top" style="BORDER-RIGHT: #999999 1px dashed">
  <ul id="ztree" class="ztree" style="overflow:auto;"></ul>
    </td>
    <td width="80%" align="left" valign="top">
     <iframe name="products" id="products" scrolling="auto" width="100%" height="500px" frameborder="0"></iframe>
    </td>
  </tr>
</table>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值