bsctreeview.js

建立《编译原理网络课程》的目的不仅使学生掌握构造编译程序的原理和技术

// TreeView 构件1.0(JavaScript版)


// 使用步骤：
// # 在Html文档中包含div：<div id="div1"></div>
// # 声明代表树的全局变量： var t;
// # 创建树： t = new bscTreeView("div1", "t");
// # (可选)设定图片目录：t.imgPath = "treeimg/"; // 缺省同目录
// # (可选)设定TreeView的Header： t.header = "<center><b>标题</b></center>";
// # (可选)设定TreeView的Footer： t.footer = "<center><b>脚注</b></center>";
// # (可选)设定TreeView显示Table的其他属性：t.style = "width='100%'";
// # (可选)设定缩进空格数：t.indent = 6; // 缺省3
// # 创建根节点：var a = t.addRootNode("根节点1", OpenedNode);
// # 创建子节点：var b = t.addSubNode(a, "子节点1", ClosedNode);
// # 创建叶节点：t.addLeafNode(b, "叶节点1", "http://www.263.net", "_blank"); 链接可以为空，target缺省为_self
// # 创建根级叶节点：t.addRootLeafNode("根级叶节点1", "http://www.263.net", "_blank");
// # (可选)定制节点图片：b.nodeImg = "Web.gif";
// # (可选)控制节点是否自动换行：b.autoWrap = false; // 缺省true
// # (可选)节点是否能关闭：b.canClose = false; // 缺省true
// # (可选)图片：t.imgOpen = "tt.gif";  imgClose  imgLeaf  imgLastLeaf
// # (可选)设置提示：a.hint = "the hint"; // 缺省节点名称
// # (可选)显示提示：a.showHint = true; // 缺省false
// # 绘制树：t.drawTreeView();

// 常量
var Open_Image_Name  = "plus2.gif";
var Close_Image_Name = "minus2.gif";
var Leaf_Image_Name  = "leaf.gif";
var LastLeaf_Image_Name = "leaf2.gif";

var OpenedNode = 0;
var ClosedNode = 1;

// TreeView 对象
function bscTreeView(ADivName, AInstanceName){
        // property
        this.divName = ADivName;
        this.instName = AInstanceName;	// 实例名称，必须是全局变量
        this.imgPath = "";
        this.indent = 3;				// 缩进(空格数)
        this.nodes = new Array();
        this.lastLeaf = null;			// 最后点击的叶节点
        this.header = "";				// 头
        this.footer = "";				// 尾
        this.style = "";				// table的属性
        
        this.imgOpen = Open_Image_Name;
        this.imgClose = Close_Image_Name;
        this.imgLeaf = Leaf_Image_Name;
        this.imgLastLeaf = LastLeaf_Image_Name;
				
        // public method
        this.addRootNode = bscTreeView_addRootNode;
        this.addSubNode = bscTreeView_addSubNode;
        this.addRootLeafNode = bscTreeView_addRootLeafNode;
        this.addLeafNode = bscTreeView_addLeafNode;
        this.removeNode = bscTreeView_removeNode;
        this.drawTreeView = bscTreeView_drawTreeView;
        
        // private method
        this.newNode = bscTreeView_newNode;
        this.findNode = bscTreeView_findNode;
        this.write = bscTreeView_write;
        this.openNode = bscTreeView_openNode;
        this.closeNode = bscTreeView_closeNode;
        this.transform = bscTreeView_transform;
}

// 新增一个节点
function bscTreeView_newNode(ANodeName){
        var i = this.nodes.length;
        this.nodes[i] = new bscTreeNode(ANodeName);
        this.nodes[i].nodeId = i;
        this.nodes[i].treeView = this;
        return this.nodes[i];
}

// 添加根节点(可以有多个根节点)
function bscTreeView_addRootNode(ANodeName, ANodeState){
	return this.addSubNode(null, ANodeName, ANodeState);
}

// 添加子节点
function bscTreeView_addSubNode(AParentNode, ANodeName, ANodeState){
		var node = this.newNode(ANodeName);
		node.parent = AParentNode;
		if(node.parent == null){
			node.nodeLevel = 0;
		}
		else{
			node.nodeLevel = node.parent.nodeLevel + 1;
		}
		node.nodeState = ANodeState;

        if(node.parent != null){
			var i = node.parent.nodes.length;
			node.parent.nodes[i] = node;
        }

		return node;
}

// 添加根级叶节点
function bscTreeView_addRootLeafNode(ANodeName, ANodeLink, ALinkTarget){
	return this.addLeafNode(null, ANodeName, ANodeLink, ALinkTarget);
}

// 添加叶节点
function bscTreeView_addLeafNode(AParentNode, ANodeName, ANodeLink, ALinkTarget){
		var node = this.newNode(ANodeName);
		node.parent = AParentNode;
		if(node.parent == null){
			node.nodeLevel = 0;
		}
		else{
			node.nodeLevel = node.parent.nodeLevel + 1;
		}
		node.nodeLink = ANodeLink;
		node.isLeaf = true;
        if(ALinkTarget != ""){
			node.linkTarget = ALinkTarget;
        }

        if(node.parent != null){
			var i = node.parent.nodes.length;
			node.parent.nodes[i] = node;
        }

		return node;
}

// 删除节点
function bscTreeView_removeNode(ANodeId){
        var node = this.findNode(ANodeId);
        if(node == null) return;
        // treeview的node和parent的node指向同一个对象，所以只需修改一个即可
        node.isValid = false;
        this.drawTreeView();
}

// 查找节点
function bscTreeView_findNode(ANodeId){
        for(var i = 0; i < this.nodes.length; i++){
                if(this.nodes[i].nodeId == ANodeId){
                        if(this.nodes[i].isValid){
							return this.nodes[i];
						}
						else{
							return null;
						}
                }
        }
        return null;
}

//打开节点
function bscTreeView_openNode(ANodeId){
        var node = this.findNode(ANodeId);
        if(node == null) return;
        node.nodeState = 0;
        this.drawTreeView();
}

// 关闭节点
function bscTreeView_closeNode(ANodeId){
        var node = this.findNode(ANodeId);
        if(node == null) return;
        node.nodeState = 1;
        this.drawTreeView();
}

// 执行叶节点的功能
function bscTreeView_transform(ANodeId){
	var node = this.findNode(ANodeId);
    if(node == null) return;
    this.lastLeaf = node;
    var s = new String(node.nodeLink);
    if(s.indexOf("javascript:", 0) == 0){
		eval(node.nodeLink);
    }
    else if(node.linkTarget == "_self"){
	    document.location = node.nodeLink;
    }
    else if(node.linkTarget == "_blank"){
		open(node.nodeLink);
    }
    else if(node.linkTarget == "_parent"){
		eval("parent.location = \"" + node.nodeLink + "\"");
    }
    else if(node.linkTarget == "_top"){
		eval("top.location = \"" + node.nodeLink + "\"");
    }
    else{
		eval("parent." + node.linkTarget + ".location = \"" + node.nodeLink + "\"");
    }
    this.drawTreeView();
}

// 写内容
function bscTreeView_write(AContent){
	if(document.all){
        document.all[this.divName].innerHTML = AContent;
    }
    else{
		var s = "document." + this.divName;
		eval(s + ".open();");
		eval(s + ".write(" + AContent + ");");
		eval(s + ".close();");
    }
}

// 绘制TreeView
function bscTreeView_drawTreeView(){
        var s = "<table border=0 cellspacing=0 " + this.style + ">";
        if(this.header != ""){
			s += "<tr><td>" + this.header + "</td></tr>";
        }
        for(var i = 0; i < this.nodes.length; i++){
                if(this.nodes[i].isRoot() && this.nodes[i].isValid){
                        s += this.nodes[i].drawNode();
                }
        }
        if(this.footer != ""){
			s += "<tr><td>" + this.footer + "</td></tr>";
        }
        s += "</table>";
        this.write(s);
}

// TreeNode 对象
function bscTreeNode(ANodeName){
        // 属性
        this.nodeId;				// 在本树中的唯一编号
        this.nodeLevel;				// 层次(根节点为0)
        this.nodeName = ANodeName;	// 节点名称
        this.nodeState = OpenedNode;// 节点状态(0打开 1关闭)
        this.nodeImg = "";			// 节点图片名称
        this.nodeLink = "";			// 链接(只有叶节点有)
        this.linkTarget = "_self";	// 链接目标
        this.treeView;				// 树对象
        this.parent;				// 父节点
        this.nodes = new Array();	// 子节点数组
        this.isLeaf = false;		// 是否叶节点
        this.autoWrap = false;		// 超出是否自动折行
        this.canClose = true;		// 是否能关闭
        this.isValid = true;		// 是否有效
        this.hint = this.nodeName;  // 提示
        this.showHint = true;		// 是否显示提示

        this.drawNode = bscTreeNode_drawNode;
        this.isRoot = bscTreeNode_isRoot;
        this.isOpened = bscTreeNode_isOpened;
}
			
function bscTreeNode_drawNode(){
        if(!this.isValid) return "";

        var strSpace = "";
		var strImgSrc = "";
		var strLink = "";
		var strTitle = this.nodeName;
        // 空格
        for(var i = 0; i < this.nodeLevel; i++){
                for(var k = 0; k < this.treeView.indent; k++){
					strSpace += "&nbsp;";
                }
        }
		// 节点
        // 叶节点
        if(this.isLeaf){
                strImgSrc = this.treeView.imgLeaf;
                if(this == this.treeView.lastLeaf){
					strImgSrc = this.treeView.imgLastLeaf;
                }
                if(this.nodeImg != ""){
					strImgSrc = this.nodeImg;
                }
                // 有链接
                if(this.nodeLink != ""){
					strLink = "javascript:" + this.treeView.instName + ".transform(" + this.nodeId + ")";
                }
        }
        // 普通节点
        else{
                // 节点是打开状态
                if(this.isOpened()){
                        strImgSrc = this.treeView.imgClose;
		                if(this.nodeImg != ""){
							strImgSrc = this.nodeImg;
		                }
                        // 可以关闭的节点
                        if(this.canClose){
							strLink = "javascript:" + this.treeView.instName + ".closeNode(" + this.nodeId + ")";
                        }
                }
                // 节点是关闭状态
                else{
                        strImgSrc = this.treeView.imgOpen;
		                if(this.nodeImg != ""){
							strImgSrc = this.nodeImg;
		                }
		                strLink = "javascript:" + this.treeView.instName + ".openNode(" + this.nodeId + ")";
                }
        }
                
        // 调整
        strImgSrc = this.treeView.imgPath + strImgSrc;
        if(strLink == ""){
			strLink = "javascript:void(null)";
        }
        
        var result = "<tr><td><table width='100%' border=0><tr>";
        // 空格
        if(strSpace != ""){
			result += "<td width=1>" + strSpace + "</td>";
        }
        // 图片
		result += "<td width=1 valign='top'>" + "<a href='" + strLink + "'>" + "<img border=0 src='" + strImgSrc + "'></a></td>";
		// 文本
		var strIsWrap = "nowrap";
		if(this.autoWrap){
			strIsWrap = "";
		}
		var strHint = "";
		if(this.showHint){
			strHint = " title=" + this.hint;
		}
		result += "<td " + strIsWrap + ">" + "&nbsp;&nbsp;" + "<a href='" + strLink + "' " + strHint + ">" + strTitle + "</a></td>";

        result += "</tr></table></td></tr>";
        
        // 子节点
        if(this.isOpened()){
                for(var k = 0; k < this.nodes.length; k++){
                        result += this.nodes[k].drawNode();
                }
        }
        // 返回
        return result;
}
			
function bscTreeNode_isRoot(){
        return this.nodeLevel == 0;
}
			
function bscTreeNode_isOpened(){
        return this.nodeState == 0;
}