`

javascript树

JavaScriptEXTAjaxjsonXML 
阅读更多
<html> 
<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.push( 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>
分享到：
| java 乱码处理注意编码顺序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics