?? tree_level_code.js
字號:
/**
* 使用方法：
1.生成一個新的樹對象 var tree = new tree();
2.生成一個新的根對象 var root = new root(1,"根目錄","#","");
3.為樹對象添加根對象 tree.addRoot(root);
4.為樹對象添加節點,節點的順序應該按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 = "../images";
/** 文件節點的圖片 *///~~
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";
/** 無節點線條的圖片 *///~~
img_line = imageDir+"/line.gif";
/** 最后節點的線條圖片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中間節點的線條圖片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白區域的圖片 *///~~
img_blank = imageDir+"/blank.gif";
/*******************************************設置公共的圖片變量結束**************************************************/
function setImageFiles() {
/** 文件節點的圖片 *///~~
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";
/** 無節點線條的圖片 *///~~
img_line = imageDir+"/line.gif";
/** 最后節點的線條圖片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中間節點的線條圖片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白區域的圖片 *///~~
img_blank = imageDir+"/blank.gif";
/**節點修改圖片 *///~~
img_edit = imageDir+"/codeedit.gif"
/**增加子節點圖片 *///~~
img_add = imageDir+"/codeadd.gif"
/**刪除子節點圖片 *///~~
img_del = imageDir+"/codedel.gif"
}
function tree() {
/** 根節點 *///~~
this.root = null;
/** 節點個數 *///~~
this.length = 0;
/** 節點數組 *///~~
this.nodes = new Array();
/** 兄弟節點數組 *///~~
this.brothers = new Array();
/** 添加根節點 *///~~
this.addRoot = addRoot;
/** 添加節點 *///~~
this.addNode = addNode;
/** 畫出根節點 *///~~
this.drawRoot = drawRoot;
/** 畫出根節點(分層展示) *///~~
this.drawRootLevel = drawRootLevel;
/** 畫出節點前的空白圖片或連接線圖片 *///~~
this.drawFrontLine = drawFrontLine;
/** 畫出節點 *///~~
this.drawNode = drawNode;
/** 畫出節點(全部展開) *///~~liuhr
this.drawAllNode = drawAllNode;
/** 畫出節點(分層展示) *///~~
this.drawNodeLevel = drawNodeLevel;
/** 畫出符合查詢條件的第一個節點 *///~~
this.drawFirstSearchNode = drawFirstSearchNode;
/** 畫出所有節點 *///~~
this.drawNodes = drawNodes;
/** 畫出所有節點(全部展開) *///~~liuhr
this.drawAllNodes = drawAllNodes;
/** 畫出所有節點(分層展示) *///~~
this.drawNodesLevel = drawNodesLevel;
/** 初始載入頁面后，自動展開第一級子目錄(分層展示) *///~~
this.clickOnFolderLevelInf = clickOnFolderLevelInf;
/** 展開符合查詢條件的目錄樹 *///~~
this.searchFolder = searchFolder;
/** 得到節點的父節點 *///~~
this.getParent = getParent;
/** 由當前節點Id得到父節點Id *///~~
this.getParentId = getParentId;
/** 得到節點的兄弟點集合 *///~~
this.getBrothers = getBrothers;
/** 返回點擊節點的name *///~~liuhr
this.returnValue = returnValue;
/** 添加節點時，將同一層的其他節點的isLast屬性設置為false *///~~
this.setOtherIsLast = setOtherIsLast;
/** 第一個符合查詢條件的節點Id *///~~
this.firstSearchNodeId="";
this.openSelect=openSelect;
}
/**
* 根節點對象
* @param id 根節點的id號
* @param name 根節點名稱,顯示在頁面的連接的名字
* @param url 鏈接
* @param target 指示鏈接的目標頁面
*/
function openSelect(id) {
try {
ids[0] = id;
tree.searchFolder()
} catch(e) {}
}
function root(id,name,orgname,code,addUrl) {
this.id = id;
this.name = name;
this.parentId = null;
this.type = "root";
this.orgname = orgname;
this.code = code;
this.addUrl = addUrl;
}
function addRoot(root) {
this.root = root;
this.length = 1;
this.nodes[0] = root;
this.root.addImage = img_add;
}
/**
* 節點對象
* @param id 節點id號
* @param name 節點名稱,顯示在頁面上的鏈接的名字
* @param parentId 父節點id號
* @param type 節點的類型(folder|file)
* @param url 節點的鏈接
* @param target 節點鏈接的目標頁面
*///~~
function node(id,name,parentId,type,orgname,code,editUrl,addUrl,delUrl) {
/** 節點id號 *///~~
this.id = id;
/** 節點名稱,顯示在頁面上的鏈接的名字 *///~~
this.name =name;
/** 父節點id號 *///~~
this.parentId = parentId;
/** 節點的類型(folder|file) *///~~
this.type = type;
/** 節點的鏈接 *///~~
this.orgname = orgname;
/** 節點鏈接的目標頁面 *///~~
this.code = code;
/** 節點的修改頁面 *///~~
this.editUrl = editUrl;
/** 子節點的增加頁面 *///~~
this.addUrl = addUrl;
/** 節點的刪除頁面 *///~~
this.delUrl = delUrl;
/** 節點內容修改圖片 *///~~
this.editImage = "";
/** 增加子節點圖片 *///~~
this.addImage = "";
/** 刪除節點圖片 *///~~
this.delImage = "";
/** 節點的圖片(目錄或文件等) *///~~
this.image = "";
/** 節點的前導圖片(加號或減號或線條等) *///~~
this.fImage = "";
/** 是否是同層中最后節點 *///~~
this.isLast = false;
}
/** 判斷一個節點是否有父節點，如果有則返回其父節點，如果沒有返回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;
}
/** 返回當前節點Id的父節點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;
}
/** 判斷一個節點是否有兄弟節點，如果有則返回其兄弟節點集合，如果沒有返回null
add by yancj 2004.6.2
*/
function getBrothers(node) {
// alert("1111");
this.brothers = new Array();
if (tree.getParent(node) != null) //如果有父節點
{
// 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;
}
/** 當添加一個新節點后，將與它處在同一層的其它元素的isLast標志設置為false */
function setOtherIsLast(node) {
for (var i=1;i<this.length;i++) //i=1,表示不包括根節點在內的循環
{
if (this.nodes[i].parentId == node.parentId && this.nodes[i].isLast) //如果找到父節點相同的，并且isLast為true的節點
{
this.nodes[i].isLast = false; //設置該節點的isLast為false
if (this.nodes[i].type == "folder") //設置圖片為非末節點圖片
{
this.nodes[i].fImage = img_plus;
} else {
this.nodes[i].fImage = img_line_mid;
}
return true;
}
}
return false;
}
/** 為樹的節點組nodes[]添加一個新的節點 */
function addNode(node) {
if (this.getParent(node) != null) //如果有父節點
{
this.setOtherIsLast(node); //設置同層中的其他元素為非末節點
node.isLast = true; //設置本節點為末節點
if (node.type == "folder") //根據節點類型設置圖片
{
node.image = img_folder_close;
node.fImage = img_plus_last;
} else {
node.image = img_file;
node.fImage = img_line_last;
}
node.editImage = img_edit;
node.addImage = img_add;
node.delImage = img_del;
this.nodes[this.length] = node; //添加該節點到樹的節點組nodes[]
this.length++; //節點數加1
} else {
// alert("沒有找到該節點的父節點，這是一個非法節點!");
}
}
/** 畫出根節點 */
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>";
}
/** 畫出根節點(分級展示方式)
* 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;
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -