?? bsctreeview_old.js
字號(hào):
// TreeView 構(gòu)件1.0(JavaScript版)
// 使用步驟：
// # 在Html文檔中包含div：<div id="div1"></div>
// # 聲明代表樹的全局變量： var t;
// # 創(chuàng)建樹： t = new bscTreeView("div1", "t");
// # (可選)設(shè)定圖片目錄：t.imgPath = "treeimg/"; // 缺省同目錄
// # (可選)設(shè)定TreeView的Header： t.header = "<center><b>標(biāo)題</b></center>";
// # (可選)設(shè)定TreeView的Footer： t.footer = "<center><b>腳注</b></center>";
// # (可選)設(shè)定TreeView顯示Table的其他屬性：t.style = "width='100%'";
// # (可選)設(shè)定縮進(jìn)空格數(shù)：t.indent = 6; // 缺省3
// # 創(chuàng)建根節(jié)點(diǎn)：var a = t.addRootNode("根節(jié)點(diǎn)1", OpenedNode);
// # 創(chuàng)建子節(jié)點(diǎn)：var b = t.addSubNode(a, "子節(jié)點(diǎn)1", ClosedNode);
// # 創(chuàng)建葉節(jié)點(diǎn)：t.addLeafNode(b, "葉節(jié)點(diǎn)1", "http://www.263.net", "_blank"); 鏈接可以為空，target缺省為_self
// # 創(chuàng)建根級(jí)葉節(jié)點(diǎn)：t.addRootLeafNode("根級(jí)葉節(jié)點(diǎn)1", "http://www.263.net", "_blank");
// # (可選)定制節(jié)點(diǎn)圖片：b.nodeImg = "Web.gif";
// # (可選)控制節(jié)點(diǎn)是否自動(dòng)換行：b.autoWrap = false; // 缺省true
// # (可選)節(jié)點(diǎn)是否能關(guān)閉：b.canClose = false; // 缺省true
// # (可選)圖片：t.imgOpen = "tt.gif"; imgClose imgLeaf imgLastLeaf
// # (可選)設(shè)置提示：a.hint = "the hint"; // 缺省節(jié)點(diǎn)名稱
// # (可選)顯示提示：a.showHint = true; // 缺省false
// # 繪制樹：t.drawTreeView();
// 常量
var Open_Image_Name = "nodeopen.gif";
var Close_Image_Name = "nodeclose.gif";
var Leaf_Image_Name = "nodeleaf.gif";
var LastLeaf_Image_Name = "nodelastleaf.gif";
var OpenedNode = 0;
var ClosedNode = 1;
// TreeView 對(duì)象
function bscTreeView(ADivName, AInstanceName){
// property
this.divName = ADivName;
this.instName = AInstanceName; // 實(shí)例名稱，必須是全局變量
this.imgPath = "";
this.indent = 3; // 縮進(jìn)(空格數(shù))
this.nodes = new Array();
this.lastLeaf = null; // 最后點(diǎn)擊的葉節(jié)點(diǎn)
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;
}
// 新增一個(gè)節(jié)點(diǎn)
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];
}
// 添加根節(jié)點(diǎn)(可以有多個(gè)根節(jié)點(diǎn))
function bscTreeView_addRootNode(ANodeName, ANodeState){
return this.addSubNode(null, ANodeName, ANodeState);
}
// 添加子節(jié)點(diǎn)
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;
}
// 添加根級(jí)葉節(jié)點(diǎn)
function bscTreeView_addRootLeafNode(ANodeName, ANodeLink, ALinkTarget){
return this.addLeafNode(null, ANodeName, ANodeLink, ALinkTarget);
}
// 添加葉節(jié)點(diǎn)
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;
}
// 刪除節(jié)點(diǎn)
function bscTreeView_removeNode(ANodeId){
var node = this.findNode(ANodeId);
if(node == null) return;
// treeview的node和parent的node指向同一個(gè)對(duì)象，所以只需修改一個(gè)即可
node.isValid = false;
this.drawTreeView();
}
// 查找節(jié)點(diǎn)
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;
}
//打開節(jié)點(diǎn)
function bscTreeView_openNode(ANodeId){
var node = this.findNode(ANodeId);
if(node == null) return;
node.nodeState = 0;
this.drawTreeView();
}
// 關(guān)閉節(jié)點(diǎn)
function bscTreeView_closeNode(ANodeId){
var node = this.findNode(ANodeId);
if(node == null) return;
node.nodeState = 1;
this.drawTreeView();
}
// 執(zhí)行葉節(jié)點(diǎn)的功能
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();
}
// 寫內(nèi)容
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 對(duì)象
function bscTreeNode(ANodeName){
// 屬性
this.nodeId; // 在本樹中的唯一編號(hào)
this.nodeLevel; // 層次(根節(jié)點(diǎn)為0)
this.nodeName = ANodeName; // 節(jié)點(diǎn)名稱
this.nodeState = OpenedNode;// 節(jié)點(diǎn)狀態(tài)(0打開 1關(guān)閉)
this.nodeImg = ""; // 節(jié)點(diǎn)圖片名稱
this.nodeLink = ""; // 鏈接(只有葉節(jié)點(diǎn)有)
this.linkTarget = "_self"; // 鏈接目標(biāo)
this.treeView; // 樹對(duì)象
this.parent; // 父節(jié)點(diǎn)
this.nodes = new Array(); // 子節(jié)點(diǎn)數(shù)組
this.isLeaf = false; // 是否葉節(jié)點(diǎn)
this.autoWrap = false; // 超出是否自動(dòng)折行
this.canClose = true; // 是否能關(guān)閉
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 += " ";
}
}
// 節(jié)點(diǎn)
// 葉節(jié)點(diǎn)
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 + ")";
}
}
// 普通節(jié)點(diǎn)
else{
// 節(jié)點(diǎn)是打開狀態(tài)
if(this.isOpened()){
strImgSrc = this.treeView.imgClose;
if(this.nodeImg != ""){
strImgSrc = this.nodeImg;
}
// 可以關(guān)閉的節(jié)點(diǎn)
if(this.canClose){
strLink = "javascript:" + this.treeView.instName + ".closeNode(" + this.nodeId + ")";
}
}
// 節(jié)點(diǎn)是關(guān)閉狀態(tài)
else{
strImgSrc = this.treeView.imgOpen;
if(this.nodeImg != ""){
strImgSrc = this.nodeImg;
}
strLink = "javascript:" + this.treeView.instName + ".openNode(" + this.nodeId + ")";
}
}
// 調(diào)整
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 + ">" + "<a href='" + strLink + "' " + strHint + ">" + strTitle + "</a></td>";
result += "</tr></table></td></tr>";
// 子節(jié)點(diǎn)
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;
}?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -