?? tree_level_1.js
字號:
/**
* 使用方法：
1.生成一個新的樹對象 var tree = new tree();
2.生成一個新的根對象 var root = new root(1,"根目錄","#","");
3.為樹對象添加根對象 tree.addRoot(root);
4.為樹對象添加節(jié)點,節(jié)點的順序應該按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>
/*******************************************設置公共的圖片變量開始**************************************************/
/** 圖片所在目錄 *///~~
imageDir = "/framework_ext/framework/public/images";
/** 文件節(jié)點的圖片 *///~~
img_file = imageDir+"/close.gif";
/** 關閉的目錄的圖片 *///~~
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é)點線條的圖片 *///~~
img_line = imageDir+"/line.gif";
/** 最后節(jié)點的線條圖片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中間節(jié)點的線條圖片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白區(qū)域的圖片 *///~~
img_blank = imageDir+"/blank.gif";
/*******************************************設置公共的圖片變量結束**************************************************/
function setImageFiles() {
/** 文件節(jié)點的圖片 *///~~
img_file = imageDir+"/file.gif";
/** 關閉的目錄的圖片 *///~~
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é)點線條的圖片 *///~~
img_line = imageDir+"/line.gif";
/** 最后節(jié)點的線條圖片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中間節(jié)點的線條圖片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白區(qū)域的圖片 *///~~
img_blank = imageDir+"/blank.gif";
}
function tree() {
/** 根節(jié)點 *///~~
this.root = null;
/** 節(jié)點個數(shù) *///~~
this.length = 0;
/** 節(jié)點數(shù)組 *///~~
this.nodes = new Array();
/** 兄弟節(jié)點數(shù)組 *///~~
this.brothers = new Array();
/** 孩子節(jié)點數(shù)組 *///~~liuhr
this.childrens = new Array();
/** 添加根節(jié)點 *///~~
this.addRoot = addRoot;
/** 添加節(jié)點 *///~~
this.addNode = addNode;
/** 畫出根節(jié)點 *///~~
this.drawRoot = drawRoot;
/** 畫出根節(jié)點(分層展示) *///~~
this.drawRootLevel = drawRootLevel;
/** 畫出節(jié)點前的空白圖片或連接線圖片 *///~~
this.drawFrontLine = drawFrontLine;
/** 畫出節(jié)點 *///~~
this.drawNode = drawNode;
/** 畫出節(jié)點(分層展示) *///~~
this.drawNodeLevel = drawNodeLevel;
/** 畫出符合查詢條件的第一個節(jié)點 *///~~
this.drawFirstSearchNode = drawFirstSearchNode;
/** 畫出所有節(jié)點 *///~~
this.drawNodes = drawNodes;
/** 畫出所有節(jié)點(分層展示) *///~~
this.drawNodesLevel = drawNodesLevel;
/** 初始載入頁面后，自動展開第一級子目錄(分層展示) *///~~
this.clickOnFolderLevelInf = clickOnFolderLevelInf;
/** 展開符合查詢條件的目錄樹 *///~~
this.searchFolder = searchFolder;
/** 得到節(jié)點的父節(jié)點 *///~~
this.getParent = getParent;
/** 由當前節(jié)點Id得到父節(jié)點Id *///~~
this.getParentId = getParentId;
/** 由當前節(jié)點Id得到子節(jié)點Id *///~~liuhr
this.getChildId = getChildId;
this.addChildId = addChildId;
/** 添加節(jié)點時，將同一層的其他節(jié)點的isLast屬性設置為false *///~~
this.setOtherIsLast = setOtherIsLast;
/** 第一個符合查詢條件的節(jié)點Id *///~~
this.firstSearchNodeId="";
}
/**
* 根節(jié)點對象
* @param id 根節(jié)點的id號
* @param name 根節(jié)點名稱,顯示在頁面的連接的名字
* @param url 鏈接
* @param target 指示鏈接的目標頁面
*/
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é)點對象
* @param id 節(jié)點id號
* @param name 節(jié)點名稱,顯示在頁面上的鏈接的名字
* @param parentId 父節(jié)點id號
* @param type 節(jié)點的類型(folder|file)
* @param url 節(jié)點的鏈接
* @param target 節(jié)點鏈接的目標頁面
*///~~
function node(id,name,parentId,type,orgname,code) {
/** 節(jié)點id號 *///~~
this.id = id;
/** 節(jié)點名稱,顯示在頁面上的鏈接的名字 *///~~
this.name =name;
/** 父節(jié)點id號 *///~~
this.parentId = parentId;
/** 節(jié)點的類型(folder|file) *///~~
this.type = type;
/** 節(jié)點的鏈接 *///~~
this.orgname = orgname;
/** 節(jié)點鏈接的目標頁面 *///~~
this.code = code;
/** 節(jié)點的圖片(目錄或文件等) *///~~
this.image = "";
/** 節(jié)點的前導圖片(加號或減號或線條等) *///~~
this.fImage = "";
/** 是否是同層中最后節(jié)點 *///~~
this.isLast = false;
}
/** 判斷一個節(jié)點是否有父節(jié)點，如果有則返回其父節(jié)點，如果沒有返回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;
}
/** 返回當前節(jié)點Id的父節(jié)點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é)點的子節(jié)點liuhr
*/
var chN;
function getChildId(nodeId) {
for (var i=0;i<this.length;i ++)
{
if ("Ck"+this.nodes[i].parentId == nodeId)
{
tree.childrens[chN++] = "Ck"+this.nodes[i].id;
//alert("Ck"+this.nodes[i].id);
tree.getChildId("Ck"+this.nodes[i].id)
}
}
}
/** 當添加一個新節(jié)點后，將與它處在同一層的其它元素的isLast標志設置為false */
function setOtherIsLast(node) {
for (var i=1;i<this.length;i++) //i=1,表示不包括根節(jié)點在內(nèi)的循環(huán)
{
if (this.nodes[i].parentId == node.parentId && this.nodes[i].isLast) //如果找到父節(jié)點相同的，并且isLast為true的節(jié)點
{
this.nodes[i].isLast = false; //設置該節(jié)點的isLast為false
if (this.nodes[i].type == "folder") //設置圖片為非末節(jié)點圖片
{
this.nodes[i].fImage = img_plus;
} else {
this.nodes[i].fImage = img_line_mid;
}
return true;
}
}
return false;
}
/** 為樹的節(jié)點組nodes[]添加一個新的節(jié)點 */
function addNode(node) {
if (this.getParent(node) != null) //如果有父節(jié)點
{
this.setOtherIsLast(node); //設置同層中的其他元素為非末節(jié)點
node.isLast = true; //設置本節(jié)點為末節(jié)點
if (node.type == "folder") //根據(jù)節(jié)點類型設置圖片
{
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é)點到樹的節(jié)點組nodes[]
this.length++; //節(jié)點數(shù)加1
} else {
// alert("沒有找到該節(jié)點的父節(jié)點，這是一個非法節(jié)點!");
}
}
/** 畫出根節(jié)點 */
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é)點(分級展示方式)
* 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>";
rStrTree += "</table>";
}
var strTree = "";
var rStrTree = ""; // 根節(jié)點對應html代碼(分層展示)
/***/
/* 通過每個節(jié)點img部分的Id來得到其srcIndex，以用于該節(jié)點的展開
modify by yancj 2004-1-5
*/
var fID = 0;
/** 畫出節(jié)點 */
function drawNode(node) {
strTree += "<table border='0' cellspacing='0' cellpadding='0'>";
strTree += "<tr ><td id='" + node.id + "'>";
var fIDid = fID++;
this.drawFrontLine(node);
if (node.type == "folder")
{
strTree += "<a onFocus='this.blur()' style='cursor:hand;'><img id='" + (fIDid) + "' border='0' src='"+node.fImage+"'></a>";
strTree += "<input id='Ck" + node.id + "' type='checkbox' value='1' ><a onFocus='this.blur()' href='#'><img border='0' src='"+node.image+"'></a>";
strTree += "</td><td valign='middle'>";
strTree += "<a onFocus='this.blur()' id='folderLink' href='"+node.orgname+"' target='"+node.code+"' >"+node.name+"</a>";
} else {
strTree += "<img border='0' src='"+node.fImage+"'>";
strTree += "<input id='Ck" + node.id + "' type='checkbox' value='checkbox' ><a onFocus='this.blur()' href='"+node.orgname+"' target='"+node.code+"')><img border='0' src='"+node.image+"'></a>";
strTree += "</td><td valign='middle'>";
strTree += "<a onFocus='this.blur()' href='"+node.orgname+"' target='"+node.code+"') >"+node.name+"</a>";
}
strTree += "</td></tr>";
strTree += "</table>";
// 對所有符合查詢條件的節(jié)點
for(i = 0; i < ids.length; i++) {
if (ids[i] == node.id) {
// 將該節(jié)點img對應的Id寫到數(shù)組里去，當頁面節(jié)點樹建立后，對所有符合條件的節(jié)點展開
srcids[idx++] = fIDid;
}
}
}
/** 畫出節(jié)點(分層展示)，clickOnFolderLevel事件需要參數(shù)，并且實現(xiàn)方式不同
* add by yancj 2004.2.9
*/
function drawNodeLevel(node) {
strTree += "<table border='0' cellspacing='0' cellpadding='0'>";
strTree += "<tr ><td nowrap id='" + node.id + "'>";
var fIDid = fID++;
this.drawFrontLine(node);
if (node.type == "folder")
{
var norgname=node.orgname;
strTree += "<a onClick=\"clickOnFolderLevel('" +node.id+"','"+node.name+"', '"+node.parentId+"','"+node.type+"','"+norgname+"','"+node.code+"')\"";
strTree += " onFocus='this.blur()' href='#'><img id='" + fIDid + "' border='0' src='"+node.fImage+"'></a>";
strTree += "<a onFocus='this.blur()' href='#'><img border='0' src='"+node.image+"'></a>";
strTree += "</td><td nowrap valign='middle'>";
strTree += "<a onFocus='this.blur()' id='folderLink' href='"+node.orgname+"' target='"+node.code+"' >"+node.name+"</a>";
} else {
strTree += "<img border='0' src='"+node.fImage+"'>";
strTree += "<a onFocus='this.blur()' href='"+node.orgname+"' target='"+node.code+"')><img border='0' src='"+node.image+"'></a>";
strTree += "</td><td nowrap valign='middle'>";
strTree += "<a onFocus='this.blur()' href='"+node.orgname+"' target='"+node.code+"') >"+node.name+"</a>";
}
strTree += "</td></tr>";
strTree += "</table>";
levelids[lidx++] = fIDid;
// 對所有符合查詢條件的節(jié)點
for(i = 0; i < ids.length; i++) {
if (ids[i] == node.id) {
// alert(node.id);\
// 將該節(jié)點img對應的Id寫道數(shù)組里去，當頁面節(jié)點樹建立后，對所有符合條件的節(jié)點展開
srcids[idx++] = fIDid;
// 展開符合條件的節(jié)點的父節(jié)點
addParentID(node);
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -