浠婂ぉ鍏堣涓媃UI鐨勬暟鎹〃鏍間腑,浠庢湇鍔$鑾峰彇鏁版嵁鍜屾牴鎹湇鍔$鏁版嵁鎺掑簭鐨勬柟娉?瀹樻柟紺轟緥鐨勫湴鍧:http://developer.yahoo.com/yui/treeview/
棣栧厛鏄繀澶囩殑js,css鏂囦歡鐨勫紩鍏?鍙互浠庝互涓嬪湴鍧閰嶇疆:http://developer.yahoo.com/yui/articles/hosting/?treeview#configure
JSON鏁版嵁鏍煎紡
[
'Label 0',

{type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'},

{type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[
'Label 1-0'
]},

{type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'},

{type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'},

{type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[
'Label 3-0',
'Label 3-1'
]}
]
褰撶劧,瀹為檯鎯呭喌鏄綘涓嶄竴瀹氳繑鍥炰竴妯′竴鏍風殑鏍煎紡,浣嗗彲浠ユ牴鎹嚜宸辯殑緇撴瀯鏉ョ敓鎴愯繖鏍風殑鏍煎紡!
涓嬮潰鏄」鐩腑鐢ㄥ埌鐨勪竴涓敤鏉ヨ幏鍙栬繖縐嶆牸寮忕殑鏂規硶(娉?鎴戠殑鏂規硶灞炰簬姣旇緝絎ㄧ殑鏂規硶,鐢ㄧ殑鏄掑綊寰幆)
YAHOO.uunav.getCatalogTree = function(root){
var str;
$.ajax({
url:"${contextPath}/ajax/catalog!initTree.act", //浠庢湇鍔″櫒鑾峰彇鏁版嵁
dataType:"json",
async :false,
success:function(data){
if(typeof(data.records)!="undefined" ){
str=createNodes(data.records,"menu"); //涓涓掑綊鐨勫嚱鏁?鐢ㄤ簬鐢熸垚絎﹀悎YUI鏍戞爣鍑嗙殑JSON瀵硅薄
}
}
});
return eval(str); //鍏跺疄鍒氬垰鐨凷TR閭e彧鏄釜瀛楃涓?鏈鍚庨氳繃eval鏂規硶鍙互杞垚瀵硅薄.
}
鏁版嵁鍑嗗濂戒簡,涓嬩竴姝ュ氨鏄瀯寤烘爲浜?br />
//鏋勫緩鏍戠粨鏋?/span>
YAHOO.uunav.buildTree=function(treeContent){
var treeNodes = YAHOO.uunav.getCatalogTree(0);
var tree=new YAHOO.widget.TreeView(treeContent,treeNodes);
tree.render();
return tree;
}
涓婇潰鐨勫彧鏄釜鏂規硶,闇瑕佸湪欏甸潰load鐨勬椂鍊欏姞杞?YUI鏈夊畠鑷繁鐨刲oad浜嬩歡,浣嗘垜鏇村枩嬈QUERY鐨?鍐欐硶姣旇緝綆鍗?鍛靛懙

$(document).ready(function()
{
var tree = YAHOO.uunav.buildTree("catalogTree");
});
濡傛灉浣犵殑鏍戝彧鏄兂鍋氳彍鍗?榪炴帴涔嬬敤,鍒拌繖閲屽氨鍙互浜?浣嗗鏋滃笇鏈涜兘澶熷湪鍝嶅簲鍗曞嚮浜嬩歡鐨勬椂鍊欏仛鍑虹偣鍏朵粬鍔ㄤ綔,閭h繕闇瑕佺粰tree娉ㄥ唽浜嬩歡
tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});
鍚堣搗鏉ュ簲璇ユ槸涓嬮潰榪欎釜鏍峰瓙
$(document).ready(function(){
var tree = YAHOO.uunav.buildTree("catalogTree");
//娣誨姞緇撶偣鍗曞嚮浜嬩歡
tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});
});
瀵瑰弬鏁板仛涓嬭В閲?
oArgs.node.data:琛ㄧず鐨勬槸榪欎釜緇撶偣甯︾殑鏁版嵁,鑰岃繖浜涙暟鎹氨鏄湪鐢熸垚鏍戠殑JSON瀵硅薄閲岄潰鐨?浜嬪疄涓?榛樿鐨勬渶綆鍗曠殑鏍戠粨鐐瑰茍娌℃湁oArgs.node.data.id榪欎釜鏁版嵁,榪欎釜鏁版嵁鏄湪鐢熸垚鏍戠粨鐐笿SON瀵硅薄鏃跺姞榪涘幓鐨?瑙佸涓嬩唬鐮?
function createNodes(list,nodeType){ //榪欏氨鏄墠闈㈢殑閫掑綊鐢熸垚緇撶偣JSON瀵硅薄鐨勫嚱鏁?br />
var treeNodeStr="[";
$(list).each(function(i){
if(i>0) treeNodeStr+=",";
treeNodeStr+="{\"label\":\""+this.names+"\",\"id\":"+this.id+","; //榪欓噷鐨刬d灝辨槸data瀵硅薄閲岀殑id
if(this.children.length>0){
treeNodeStr+="\"children\":"+createNodes(this.children,nodeType)+",";
}
treeNodeStr+="\"type\":\""+nodeType+"\"}";
});
treeNodeStr+="]";
return treeNodeStr;
}
鍚屾牱鍙互閫氳繃oArgs.node.data.label璁塊棶緇撶偣鍚嶅瓧,涓嶈繃涔熷彲浠ョ洿鎺ラ氳繃oArgs.node.label鐩存帴璁塊棶label,鑷充簬浠涔堝師鍥?鐪嬩簡API灝辯煡閬撲簡
鐪嬩笂鍘昏矊浼艱繕鏄湁浜涘鏉?澶у鍙綋鏄釜鍙傝冨惂!

]]>