?? tree_level3.js
字號:
/**
* 使用方法：
1.生成一個新的樹對象 var tree = new tree();
2.生成一個新的根對象 var root = new root(1,"根目錄","#","");
3.為樹對象添加根對象 tree.addRoot(root);
4.為樹對象添加節(jié)點(diǎn),節(jié)點(diǎn)的順序應(yīng)該按id先后來排列
5.畫出根對象 tree.drawRoot();
6.畫出整個樹 tree.drawNodes(tree.root);
例子:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="FKtree.js"></script>
</HEAD>
<BODY>
<script type="text/javascript">
var tree = new tree();
var root = new root(1,"根目錄","#","");
tree.addRoot(root);
tree.addNode(new node(2,"第一層目錄a",1,"folder","#",""));
tree.addNode(new node(4,"第二層目錄***",2,"folder","#",""));
tree.addNode(new node(6,"第三層目錄",4,"folder","#",""));
tree.addNode(new node(7,"第一層目錄b",1,"folder","#",""));
tree.addNode(new node(8,"第一層目錄c",1,"folder","#",""));
tree.addNode(new node(9,"第二層目錄a",8,"folder","#",""));
tree.addNode(new node(10,"第三層文件",9,"file","#",""));
tree.addNode(new node(11,"第四層文件",6,"file","#",""));
tree.addNode(new node(12,"第三層目錄",4,"folder","#",""));
tree.addNode(new node(13,"第二層文件",9,"file","#",""));
tree.addNode(new node(14,"第三層文件",7,"file","#",""));
tree.addNode(new node(15,"第三層文件",8,"file","#",""));
tree.addNode(new node(16,"第三層文件",4,"file","#",""));
tree.addNode(new node(17,"第三層文件",2,"file","#",""));
tree.addNode(new node(18,"第三層文件",1,"file","#",""));
tree.addNode(new node(19,"第三層文件",9,"file","#",""));
tree.drawRoot();
tree.drawNodes(tree.root);
</script>
</BODY>
</HTML>
/*******************************************設(shè)置公共的圖片變量開始**************************************************/
/** 圖片所在目錄 *///~~
imageDir = "/framework_ext/framework/public/images";
/** 文件節(jié)點(diǎn)的圖片 *///~~
img_file = imageDir+"/close.gif";
/** 關(guān)閉的目錄的圖片 *///~~
img_folder_close = imageDir+"/close.gif";
/** 在中間的加號的圖片 *///~~
img_plus = imageDir+"/plusnode.gif";
/** 在樹末尾的加號的圖片 *///~~
img_plus_last = imageDir+"/pluslastnode.gif";
/** 打開的目錄的圖片 *///~~
img_folder_open = imageDir+"/open.gif";
/** 在樹末尾的減號的圖片 *///~~
img_minus_last = imageDir+"/minuslastnode.gif";
/** 在中間的減號的圖片 *///~~
img_minus = imageDir+"/minusnode.gif";
/** 無節(jié)點(diǎn)線條的圖片 *///~~
img_line = imageDir+"/line.gif";
/** 最后節(jié)點(diǎn)的線條圖片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中間節(jié)點(diǎn)的線條圖片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白區(qū)域的圖片 *///~~
img_blank = imageDir+"/blank.gif";
/*******************************************設(shè)置公共的圖片變量結(jié)束**************************************************/
function setImageFiles() {
/** 文件節(jié)點(diǎn)的圖片 *///~~
img_file = imageDir+"/file.gif";
/** 關(guān)閉的目錄的圖片 *///~~
img_folder_close = imageDir+"/close.gif";
/** 在中間的加號的圖片 *///~~
img_plus = imageDir+"/plusnode.gif";
/** 在樹末尾的加號的圖片 *///~~
img_plus_last = imageDir+"/pluslastnode.gif";
/** 打開的目錄的圖片 *///~~
img_folder_open = imageDir+"/open.gif";
/** 在樹末尾的減號的圖片 *///~~
img_minus_last = imageDir+"/minuslastnode.gif";
/** 在中間的減號的圖片 *///~~
img_minus = imageDir+"/minusnode.gif";
/** 無節(jié)點(diǎn)線條的圖片 *///~~
img_line = imageDir+"/line.gif";
/** 最后節(jié)點(diǎn)的線條圖片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中間節(jié)點(diǎn)的線條圖片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白區(qū)域的圖片 *///~~
img_blank = imageDir+"/blank.gif";
}
function tree() {
/** 根節(jié)點(diǎn) *///~~
this.root = null;
/** 節(jié)點(diǎn)個數(shù) *///~~
this.length = 0;
/** 節(jié)點(diǎn)數(shù)組 *///~~
this.nodes = new Array();
/** 兄弟節(jié)點(diǎn)數(shù)組 *///~~
this.brothers = new Array();
/** 添加根節(jié)點(diǎn) *///~~
this.addRoot = addRoot;
/** 添加節(jié)點(diǎn) *///~~
this.addNode = addNode;
/** 畫出根節(jié)點(diǎn) *///~~
this.drawRoot = drawRoot;
/** 畫出根節(jié)點(diǎn)(分層展示) *///~~
this.drawRootLevel = drawRootLevel;
/** 畫出節(jié)點(diǎn)前的空白圖片或連接線圖片 *///~~
this.drawFrontLine = drawFrontLine;
/** 畫出節(jié)點(diǎn) *///~~
this.drawNode = drawNode;
/** 畫出節(jié)點(diǎn)(全部展開) *///~~liuhr
this.drawAllNode = drawAllNode;
/** 畫出節(jié)點(diǎn)(分層展示) *///~~
this.drawNodeLevel = drawNodeLevel;
/** 畫出符合查詢條件的第一個節(jié)點(diǎn) *///~~
this.drawFirstSearchNode = drawFirstSearchNode;
/** 畫出所有節(jié)點(diǎn) *///~~
this.drawNodes = drawNodes;
/** 畫出所有節(jié)點(diǎn)(全部展開) *///~~liuhr
this.drawAllNodes = drawAllNodes;
/** 畫出所有節(jié)點(diǎn)(分層展示) *///~~
this.drawNodesLevel = drawNodesLevel;
/** 初始載入頁面后，自動展開第一級子目錄(分層展示) *///~~
this.clickOnFolderLevelInf = clickOnFolderLevelInf;
/** 展開符合查詢條件的目錄樹 *///~~
this.searchFolder = searchFolder;
/** 得到節(jié)點(diǎn)的父節(jié)點(diǎn) *///~~
this.getParent = getParent;
/** 由當(dāng)前節(jié)點(diǎn)Id得到父節(jié)點(diǎn)Id *///~~
this.getParentId = getParentId;
/** 得到節(jié)點(diǎn)的兄弟點(diǎn)集合 *///~~
this.getBrothers = getBrothers;
/** 返回點(diǎn)擊節(jié)點(diǎn)的name *///~~liuhr
this.returnValue = returnValue;
/** 添加節(jié)點(diǎn)時，將同一層的其他節(jié)點(diǎn)的isLast屬性設(shè)置為false *///~~
this.setOtherIsLast = setOtherIsLast;
/** 第一個符合查詢條件的節(jié)點(diǎn)Id *///~~
this.firstSearchNodeId="";
this.clickItemA = clickItemA;
}
/**
* 根節(jié)點(diǎn)對象
* @param id 根節(jié)點(diǎn)的id號
* @param name 根節(jié)點(diǎn)名稱,顯示在頁面的連接的名字
* @param url 鏈接
* @param target 指示鏈接的目標(biāo)頁面
*/
function root(id,name,orgname,code) {
this.id = id;
this.name = name;
this.parentId = null;
this.type = "root";
this.orgname = orgname;
this.code = code;
}
function addRoot(root) {
this.root = root;
this.length = 1;
this.nodes[0] = root;
}
/**
* 節(jié)點(diǎn)對象
* @param id 節(jié)點(diǎn)id號
* @param name 節(jié)點(diǎn)名稱,顯示在頁面上的鏈接的名字
* @param parentId 父節(jié)點(diǎn)id號
* @param type 節(jié)點(diǎn)的類型(folder|file)
* @param url 節(jié)點(diǎn)的鏈接
* @param target 節(jié)點(diǎn)鏈接的目標(biāo)頁面
*///~~
function node(id,name,parentId,type,orgname,code) {
/** 節(jié)點(diǎn)id號 *///~~
this.id = id;
/** 節(jié)點(diǎn)名稱,顯示在頁面上的鏈接的名字 *///~~
this.name =name;
/** 父節(jié)點(diǎn)id號 *///~~
this.parentId = parentId;
/** 節(jié)點(diǎn)的類型(folder|file) *///~~
this.type = type;
/** 節(jié)點(diǎn)的鏈接 *///~~
this.orgname = orgname;
/** 節(jié)點(diǎn)鏈接的目標(biāo)頁面 *///~~
this.code = code;
/** 節(jié)點(diǎn)的圖片(目錄或文件等) *///~~
this.image = "";
/** 節(jié)點(diǎn)的前導(dǎo)圖片(加號或減號或線條等) *///~~
this.fImage = "";
/** 是否是同層中最后節(jié)點(diǎn) *///~~
this.isLast = false;
}
/** 判斷一個節(jié)點(diǎn)是否有父節(jié)點(diǎn)，如果有則返回其父節(jié)點(diǎn)，如果沒有返回null */
function getParent(node) {
for (var i=0;i<this.length;i++)
{
if (this.nodes[i].id == node.parentId)
{
return this.nodes[i];
}
}
return null;
}
/** 返回當(dāng)前節(jié)點(diǎn)Id的父節(jié)點(diǎn)Id，如果沒有返回null
* add by yancj 2004.2.10
*/
function getParentId(nodeId) {
for (var i=0;i<this.length;i++)
{
if (this.nodes[i].id == nodeId)
{
return this.nodes[i].parentId;
}
}
return null;
}
/** 判斷一個節(jié)點(diǎn)是否有兄弟節(jié)點(diǎn)，如果有則返回其兄弟節(jié)點(diǎn)集合，如果沒有返回null
add by yancj 2004.6.2
*/
function getBrothers(node) {
// alert("1111");
this.brothers = new Array();
if (tree.getParent(node) != null) //如果有父節(jié)點(diǎn)
{
// alert("2222");
// Node parent = this.getParent(node);
var j=0;
// alert(" node length: "+tree.length);
// alert(" parent id: "+tree.getParent(node).id+", node id: "+node.id);
for (var i=0;i<tree.length;i++)
{
// alert("node parent id: "+tree.nodes[i].parentId+", node id "+tree.nodes[i].id);
if ( (tree.nodes[i].parentId == tree.getParent(node).id) && (tree.nodes[i].id != node.id) )
{
// alert("hi");
tree.brothers[j] = tree.nodes[i];
// alert(" the brother id: "+tree.brothers[j].id);
j = j+1;
}
}
// alert(" the j: "+j);
return tree.brothers;
}
return null;
}
/** 當(dāng)添加一個新節(jié)點(diǎn)后，將與它處在同一層的其它元素的isLast標(biāo)志設(shè)置為false */
function setOtherIsLast(node) {
for (var i=1;i<this.length;i++) //i=1,表示不包括根節(jié)點(diǎn)在內(nèi)的循環(huán)
{
if (this.nodes[i].parentId == node.parentId && this.nodes[i].isLast) //如果找到父節(jié)點(diǎn)相同的，并且isLast為true的節(jié)點(diǎn)
{
this.nodes[i].isLast = false; //設(shè)置該節(jié)點(diǎn)的isLast為false
if (this.nodes[i].type == "folder") //設(shè)置圖片為非末節(jié)點(diǎn)圖片
{
this.nodes[i].fImage = img_plus;
} else {
this.nodes[i].fImage = img_line_mid;
}
return true;
}
}
return false;
}
/** 為樹的節(jié)點(diǎn)組nodes[]添加一個新的節(jié)點(diǎn) */
function addNode(node) {
if (this.getParent(node) != null) //如果有父節(jié)點(diǎn)
{
this.setOtherIsLast(node); //設(shè)置同層中的其他元素為非末節(jié)點(diǎn)
node.isLast = true; //設(shè)置本節(jié)點(diǎn)為末節(jié)點(diǎn)
if (node.type == "folder") //根據(jù)節(jié)點(diǎn)類型設(shè)置圖片
{
node.image = img_folder_close;
node.fImage = img_plus_last;
} else {
node.image = img_file;
node.fImage = img_line_last;
}
this.nodes[this.length] = node; //添加該節(jié)點(diǎn)到樹的節(jié)點(diǎn)組nodes[]
this.length++; //節(jié)點(diǎn)數(shù)加1
} else {
// alert("沒有找到該節(jié)點(diǎn)的父節(jié)點(diǎn)，這是一個非法節(jié)點(diǎn)!");
}
}
/** 畫出根節(jié)點(diǎn) */
function drawRoot() {
strTree += "<table border='0' cellspacing='0' cellpadding='0'>";
strTree += "<tr><td>";
strTree += "<a onFocus='this.blur()' href='#' ><img border='0' src='"+img_folder_close+"'></a>";
strTree += "</td><td valign='middle' style='FONT-SIZE: 12px'>";
strTree += this.root.name;
strTree += "</td></tr>";
strTree += "</table>";
}
/** 畫出根節(jié)點(diǎn)(分級展示方式)
* add by yancj 2004.2.9
*/
function drawRootLevel() {
rStrTree += "<table border='0' cellspacing='0' cellpadding='0'>";
rStrTree += "<tr ><td>";
rStrTree += "<a onFocus='this.blur()' href='#' ><img border='0' src='"+img_folder_close+"'></a>";
rStrTree += "</td><td valign='middle' style='FONT-SIZE: 12px'>";
rStrTree += this.root.name;
rStrTree += "</td></tr>";
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -