作者:
tianshi0253
鏈接：
http://tianshi0253.javaeye.com/blog/204998
發表時間: 2008年06月18日
聲明：本文系JavaEye網站發布的原創博客文章，未經作者書面許可，嚴禁任何網站轉載本文，否則必將追究法律責任！
<htm>
<head>
</head>
<body>
<div id="treeArea"></div>
<script language="javascript">
function Node(parentId, id, openStatus, text, url, color){
this.parentId = parentId; // 父節點的id
this.id = id; // 自身id
this.href = url;
this.color = color;
this.openStatus = openStatus; // 當前的打開狀態
this.haveChild = false; // 為了便于顯示，增加了該屬性，判斷該節點是否有子節點，默認為沒有
this.text = text; // 顯示的文本信息
}
// 定義一個數組用來保存所有的節點(Node)包括根節點(RootNode), 也可以用其他的方式來保存
var arrTree = new Array();
//為了在使得創建節點更方便點，定義了下面的函數：
function createNode(parentId, id, openStatus, text, url, color){
// 這里檢驗一下輸入的parentId是否存在，不存在則提示錯誤
// checkParent(parentId);
// 檢驗輸入的id是否已經存在,如果存在做相應的處理， 這里我就不寫了
// checkId(id);
// 設置該parentId有子節點
if( parentId > -1 ){
if(!arrTree[parentId].hasChild)
arrTree[parentId].hasChild = true;
}
var node = new Node(parentId, id, openStatus, text, url, color);
arrTree[arrTree.length] = node;
}
/*-1這里定義為根節點的父節點，不存在這樣的節點，所以，判斷節點的父節點為-1時，標識當前節點時父節點*/
createNode(-1/*上面的注釋*/, 0/*節點id*/, true/*關閉*/, "ExtJs2.02實例教程", '','green');
createNode(0, 1, true, "1.ExtJs簡介");
createNode(0, 2, true, "2.網格(Grids)");
createNode(0, 3, true, "3.標簽(tabs)");
createNode(0, 4, true, "4.窗體(Windows)");
createNode(0, 5, true, "5.樹(Trees)");
createNode(0, 6, true, "6.布局管理器");
createNode(0, 7, true, "7.組合框(ComboBox)");
createNode(0, 8, true, "8.表單(Forms)");
createNode(0, 9, true, "9.工具條和菜單");
createNode(0, 10, true, "10.其他分類");
createNode(1, 11, false, "1.1 ExtJs簡介", "http://onlyaa.com/html/project/extjs/200805/21-2146.html", "blue");
createNode(1, 12, false, "1.2 ExtJs入門");
createNode(2, 21, false, "2.1 基本數組網格(Basic Array Grid)");
createNode(2, 22, false, "2.2 XML網格(XML Grid)");
createNode(2, 23, false, "2.3 JSON網格(JSON Grid)");
createNode(2, 24, false, "2.4 可編輯的網格(Editable Grid))");
createNode(2, 25, false, "2.5 分頁(Paging)");
createNode(2, 26, false, "2.6 分組(Grouping)");
createNode(2, 27, false, "2.7 實時分組統計(Live Group Summary)");
createNode(2, 28, false, "2.8 定制:網格插件(Customizing: Grid Plugins)");
createNode(3, 31, false, "3.1 基本標簽(Basic Tabs)");
createNode(3, 32, false, "3.2 實時標簽");
createNode(4, 41, false, "4.1 Hello World");
createNode(4, 42, false, "4.2 對話框(MessageBox)");
createNode(4, 43, false, "4.3 布局窗口(Layout Window)");
createNode(5, 51, false, "5.1 拖放排列(Drag and Drop Reordering)");
createNode(5, 52, false, "5.2 多棵樹(Multiple trees)");
createNode(5, 53, false, "5.3 定制:列樹(Customizing: Column Tree)");
createNode(6, 61, false, "6.1 區域布局(Border Layout)");
createNode(6, 62, false, "6.2 固定布局(Anchor Layout)");
createNode(6, 63, false, "6.3 定制:門戶網站(Customizing: Portals)");
createNode(7, 71, false, "7.1 基本組合框(Basic ComboBox)");
createNode(7, 72, false, "7.2 定制:組合框模板(Customizing: ComboBox Templates)");
createNode(8, 81, false, "8.1 動態表單(Dynamic Forms)");
createNode(8, 82, false, "8.2 AJAX生成的XML表單(Ajax with XML Forms)");
createNode(8, 83, false, "8.3 定制:搜索框(Customizing: Search Field)");
createNode(9, 91, false, "9.1 基本工具條(Basic Toolbar)");
createNode(9, 92, false, "9.2 Ext 動作(Ext Actions)");
createNode(10, 101, false, "10.1 數據視圖(DataView)");
createNode(10, 102, false, "10.2 數據視圖(Advanced DataView)");
createNode(10, 103, false, "10.3 進度條(Progress Bar)");
createNode(10, 104, false, "10.4 模版(Templates)");
createNode(10, 105, false, "10.5 面板(Panels)");
createNode(10, 106, false, "10.6 調整大小(Resizable)");/*
這里簡單的創建了一棵樹，但是還沒有顯示，下面要做的就是怎么顯示:
可能方法是有點笨拙，不要見怪
…. 顯示樹
// 這個思路很容易理解，就是從根節點開始， 在arrTree數組超找該根節點的子節點并顯示，
這里用的是遞歸方式去遍歷每棵樹， 由于簡單的結構很簡單的想法，所以沒有考慮算法的效率問題
*/
function doRender(){
var r = appendNode(0)
treeArea.appendChild(r);
}
// AppendNode(node), 將該節點的子節點加載到container里面， 就是div對象
function appendNode(id){
node = arrTree[id]
var id = node.id;
var area = document.createElement("div");
var expand = document.createElement("span");
var textNode = document.createElement("span");
var subarea = document.createElement("div");
var str = ''
if( node.href ){
str += '<a href="'+node.href+'" target="_blank" ';
if( node.color )
str += ' style="color:'+node.color+';"';
str += '>'+ node.text + '</a> ';
} else {
if( node.color )
str += '<font color="'+node.color+'">'+ node.text+'</font>';
else
str = node.text;
}
textNode.innerHTML = str;
expand.style.fontFamily = 'Fixedsys';
expand.style.cursor = 'hand';
expand.style.color = 'red';
expand.style.padding = '5px';
expand.innerText = '-';
subarea.style.paddingLeft = '30px';
subarea.style.lineHeight = '2';
if( !node.openStatus ){
subarea.style.display = 'none';
}
area.style.padding = '4px';
area.appendChild(expand);
area.appendChild(textNode);
area.appendChild(subarea);
if(node.hasChild){
expand.innerText = '+';
if( node.openStatus ) {expand.innerText = '-'; }
expand.onclick = function(){
if( subarea.style.display == '' ){
node.openStatus = false;
this.innerHTML = '+';
subarea.style.display = 'none';
} else {
node.openStatus = true;
this.innerHTML = '-';
subarea.style.display = '';
}
}
for(var i=1/*因為根節點在0位置，所以從1開始查找*/; i < arrTree.length; i++ ){
if( arrTree[i].parentId == id ){
var c = appendNode(i);
subarea.appendChild(c);
}
}
}
return area; // 返回div對象，里面包含了子樹的信息
}
doRender();
</script>
</body>
</html>
本文的討論也很精彩，瀏覽討論>>
JavaEye推薦
文章來源:
http://tianshi0253.javaeye.com/blog/204998
posted on 2008-06-18 09:11
姚文超 閱讀(300)
評論(0) 編輯 收藏