zTree 异步加载 添加子节点重复问题 .
最近寫程序需要一顆可以一步加載的樹，發現ztree功能很強大。搞了好久才知道怎么實現樹節點的異步加載，
在這里記錄下來以方便以后自己忘記了。代碼如下：
<spanstyle="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=GBK"/>
<title></title>
<#global path = request.getContextPath() >
<!--以下為,需要引入的css和js類庫-->
<linkrel="stylesheet"href="${path}/ztree/css/zTreeStyle/zTreeStyle.css"type="text/css"/>
<scripttype="text/javascript"src="${path}/ztree/js/jquery-1.4.4.min.js"></script>
<scripttype="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>
<tableborder=0height=500pxalign=left>
<tr>
<tdwidth="20%"align="left"valign="top"style="BORDER-RIGHT: #999999 1px dashed">
<ulid="ztree"class="ztree"style="overflow:auto;"></ul>
</td>
<tdwidth="80%"align="left"valign="top">
<iframename="products"id="products"scrolling="auto"width="100%"height="500px"frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
</span>
轉載于:https://blog.51cto.com/5367224/1323982
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的zTree 异步加载 添加子节点重复问题 .的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【C++基础】++i和i++
- 下一篇： 网易有道的产品总监王焱：如何利用数据分析