|
|
Posted on 2005-05-30 16:10 FlyPig Lin 阅读(895) 评论(0) 编辑 收藏 所属分类: 脚本
在网上发现了一个很不错的树的例子。是外国人写的，可以免费使用和修改（商用或个人使用都成）。
上星期正好没什么事情，本着拿来主义的精神，就研究了一下，写了一个使用说明也给原代码加了点注释。
Tigra Tree Menu scipt包含三个文件:
tree.js 构造树的js代码
tree_items.js 树结构文件.构造树的数组及一些配置被定义在此
tree_tpl.js 默认的图标配置文件-可以被替换为用户自定义图标
tree_items.js中的数组是类似:
var TREE_ITEMS = [
["A0",null,
["A00",null,
["A000"]
],
["A01",null,
["A010","javascript:alert("A010")"]
],
["A02"]
],
["A1",null,
["A10"],
["A11",null,
["A110"]
]
]
];
一、每个树节点都是包含一个或多个元素的数组.
1、如果节点是叶子节点,它对应的数组类似:
["A010","javascript:alert("A010")"]
其中第一个元素是节点显示的text,第二个元素是点击节点时执行的js代码,也可以是一个链接地址,如果在tree_tpl.js里面有配target的话,点击节点将会在target所指位置打开这个链接地址,
如果不需要点击时有执行js代码或有链接,第二个元素可以不写.
2、如果节点是个树节点,它对应的数组类似:
["A1",null,
["A10"], <----A1的下级结点,叶子结点
["A11",null, <----A1的下级结点,树结点
["A110"]
]
]
其中第一个元素是节点显示的text,第二个元素显示的是点击节点时执行的js代码,也可以是一个链接地址,如果在tree_tpl.js里面有配target的话,点击节点将会在target所指位置打开这个链接地址,
如果不需要点击时有执行js代码或有链接,第二个元素必须写成null(不能不写),之后的元素是数组,存放这个元素的下级节点信息.
二、trees数组存放每一棵树的信息.
例,如果页面上有两棵树,则第一棵树的信息存放在trees[0]中,第二棵树的信息存放在trees[1]中.
三、每个节点的信息即存放在其上级的a_children数组中,同时也存放在整棵树a_index数组中.
例如,结点A000,其信息对象即存放在其上级的a_children数组的第0位,也存放在整棵树的a_index数组的第2位
tree.js的代码：
 // Title: Tigra Tree
// Description: See the demo at url
// URL: http://www.softcomplex.com/products/tigra_menu_tree/
// Version: 1.1
// Date: 11-12-2002 (mm-dd-yyyy)
// Notes: This script is free. Visit official site for further details.
function tree (a_items, a_template) {
this.a_tpl = a_template;
this.a_config = a_items;
this.o_root = this;
this.a_index = [];
this.o_selected = null;
this.n_depth = -1;
this.n_id = trees.length;
trees[this.n_id] = this;
//图像预装载
var o_icone = new Image(),
o_iconl = new Image();
//icon_e,和icon_l是一定有配的
o_icone.src = a_template['icon_e'];
o_iconl.src = a_template['icon_l'];
a_template['im_e'] = o_icone;
a_template['im_l'] = o_iconl;
for (var i = 0; i < 64; i++)
if (a_template['icon_' + i]) {//如果配置文件里面有配图像地址,则需预装载
var o_icon = new Image();
a_template['im_' + i] = o_icon;
o_icon.src = a_template['icon_' + i];
}
//折叠/展开节点
this.toggle = function (n_id) { var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened) };
//选中节点
this.select = function (n_id) { return this.a_index[n_id].select(); };
//从节点上移开
this.mout = function (n_id) { this.a_index[n_id].upstatus(true) };
//移到节点上
this.mover = function (n_id) { this.a_index[n_id].upstatus() };
this.a_children = [];
for (var i = 0; i < a_items.length; i++)
new tree_item(this, i);
//开始生成结点
for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children[i].init()); //根结点
this.a_children[i].open();//展开,如果希望折叠到根结点调用this.a_children[i].open(true);
//需要全部展开节点时,调用以下这一段代码,add by linxf
if(this.a_children[i].a_children.length > 0){
openChildNode(this.a_children[i]);
}
}
}
/*
* 生成并打开o_parent的所有子节点
* add by linxf
*/
function openChildNode(o_parent){
for (var i = 0; i < o_parent.a_children.length; i++) {
o_parent.a_children[i].open();
if(o_parent.a_children[i].a_children.length > 0){
openChildNode(o_parent.a_children[i]);
}
}
}
function tree_item (o_parent, n_order) {
this.n_depth = o_parent.n_depth + 1;//节点的深度
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 2 : 0)];//每个节点对应的数组
if (!this.a_config) return;
this.o_root = o_parent.o_root; //trees数组中放置这棵树信息的对应元素,trees[x]
this.o_parent = o_parent;
this.n_order = n_order;
this.b_opened = !this.n_depth;
//在整棵树的a_index数组的最末位放置自身
this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
//在上级的a_children数组的相应位置(n_order)放置自身
o_parent.a_children[n_order] = this;
this.a_children = [];
//递归构造
for (var i = 0; i < this.a_config.length - 2; i++)
new tree_item(this, i);
this.get_icon = item_get_icon;
this.open = item_open;
this.select = item_select;
this.init = item_init;
this.upstatus = item_upstatus;
this.is_last = function () {//是否是(父结点的所有子结点中的)最后一个结点
return this.n_order == this.o_parent.a_children.length - 1
};
}
/*
* 展开/折垒节点
*/
function item_open (b_close) {
var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
if (!o_idiv) return;
if (!o_idiv.innerHTML) {//下级结点(用div圈起来的),如果里面没有内容,生成内容,如果有内容,则展开(折叠)div
var a_children = [];
for (var i = 0; i < this.a_children.length; i++)
a_children[i]= this.a_children[i].init();
o_idiv.innerHTML = a_children.join('');
}
o_idiv.style.display = (b_close ? 'none' : 'block');
this.b_opened = !b_close;
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_jicon) o_jicon.src = this.get_icon(true);
if (o_iicon) o_iicon.src = this.get_icon();
this.upstatus();
}
/*
* 选择结点
*/
function item_select (b_deselect) {
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;//取上一次被选中的节点
this.o_root.o_selected = this;//把当前被选中的节点存入this.o_root.o_selected
if (o_olditem) o_olditem.select(true);//将上次选中的节点字体变为normal
}
var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_iicon) o_iicon.src = this.get_icon();
get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : 'bold';
this.upstatus();
return Boolean(this.a_config[1]);
}
function item_upstatus (b_clear) {
window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}
/*
* 结点初始化
*/
function item_init () {
var a_offset = [],
o_current_item = this.o_parent;
for (var i = this.n_depth; i > 1; i--) {
a_offset[i] = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absbottom">';
o_current_item = o_current_item.o_parent;
}
//返回构造的html语句,this.a_config[1]为href的值,this.a_config[0]为节点的内容
return '<table cellpadding="0" cellspacing="0" border="0"><tr><td nowrap>' + (this.n_depth ? a_offset.join('') + (this.a_children.length
? '<a href="javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absbottom" name="j_img' + this.o_root.n_id + '_' + this.n_id + '">a>'
: '<img src="' + this.get_icon(true) + '" border="0" align="absbottom">') : '')
+ '<a href="' + this.a_config[1] + '" target="' + this.o_root.a_tpl['target'] + '" onclick="return trees[' + this.o_root.n_id + '].select(' + this.n_id + ')" ondblclick="trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')" class="t' + this.o_root.n_id + 'i" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absbottom" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] + 'a>td>tr>table>'
+ (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none">div>' : '');
//节点this.a_config[0]所有的下级都被此层包围起来
}
function item_get_icon (b_junction) {
return this.o_root.a_tpl['icon_' + ((this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}
var trees = [];
get_element = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };
function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 0; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[i];
o_item.open(b_collapse);
}
}
tree_tpl.js的代码：
var TREE_TPL = {
//超链接的target,可能的值有:_blank, _parent, _search, _self and _top
'target' : 'frameset',
//空的图标和竖线图标
'icon_e' : 'icons/empty.gif', // empty image
'icon_l' : 'icons/line.gif', // vertical line
//以4叠加
'icon_32' : 'icons/base.gif', // root leaf icon normal
'icon_36' : 'icons/base.gif', // root leaf icon selected
'icon_48' : 'icons/base.gif', // root icon normal
'icon_52' : 'icons/base.gif', // root icon selected
'icon_56' : 'icons/base.gif', // root icon opened
'icon_60' : 'icons/base.gif', // root icon selected
'icon_16' : 'icons/folder.gif', // node icon normal
'icon_20' : 'icons/folderopen.gif', // node icon selected
'icon_24' : 'icons/folderopen.gif', // node icon opened
'icon_28' : 'icons/folderopen.gif', // node icon selected opened
'icon_0' : 'icons/page.gif', // leaf icon normal
'icon_4' : 'icons/page.gif', // leaf icon selected
//以bottom结尾的图标都有一个向下的竖线尾巴
'icon_2' : 'icons/joinbottom.gif', // junction for leaf
'icon_3' : 'icons/join.gif', // junction for last leaf
'icon_18' : 'icons/plusbottom.gif', // junction for closed node
'icon_19' : 'icons/plus.gif', // junctioin for last closed node
'icon_26' : 'icons/minusbottom.gif',// junction for opened node
'icon_27' : 'icons/minus.gif' // junctioin for last opended node tree.html的代码：
<html>
<head>
  <style>
 a, A:link, a:visited, a:active, A:hover
  {}{color: #000000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 12px}
 style>
<script language="JavaScript" src="tree.js">script>
<script language="JavaScript" src="tree_items.js">script>
<script language="JavaScript" src="tree_tpl.js">script>
<script language="JavaScript" src="strUtil.js">script>
head>
<body>
<SCRIPT LANGUAGE="JavaScript">
new tree (TREE_ITEMS, TREE_TPL);
SCRIPT>
<button onClick="expand_or_collapse_all(trees[0],true)">Collapse Tree1button>
<button onClick="expand_or_collapse_all(trees[0],false)">Expand Tree1button><br>
<SCRIPT LANGUAGE="JavaScript">
new tree (TREE_ITEMS, TREE_TPL);
SCRIPT>
<button onClick="expand_or_collapse_all(trees[1],true)">Collapse Tree2button>
<button onClick="expand_or_collapse_all(trees[1],false)">Expand Tree2button>
body>
html>
|