📄 tree_level_1.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 = "/framework_ext/framework/public/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";
}
function tree() {
/** 根节点 *///~~
this.root = null;
/** 节点个数 *///~~
this.length = 0;
/** 节点数组 *///~~
this.nodes = new Array();
/** 兄弟节点数组 *///~~
this.brothers = new Array();
/** 孩子节点数组 *///~~liuhr
this.childrens = new Array();
/** 添加根节点 *///~~
this.addRoot = addRoot;
/** 添加节点 *///~~
this.addNode = addNode;
/** 画出根节点 *///~~
this.drawRoot = drawRoot;
/** 画出根节点(分层展示) *///~~
this.drawRootLevel = drawRootLevel;
/** 画出节点前的空白图片或连接线图片 *///~~
this.drawFrontLine = drawFrontLine;
/** 画出节点 *///~~
this.drawNode = drawNode;
/** 画出节点(分层展示) *///~~
this.drawNodeLevel = drawNodeLevel;
/** 画出符合查询条件的第一个节点 *///~~
this.drawFirstSearchNode = drawFirstSearchNode;
/** 画出所有节点 *///~~
this.drawNodes = drawNodes;
/** 画出所有节点(分层展示) *///~~
this.drawNodesLevel = drawNodesLevel;
/** 初始载入页面后，自动展开第一级子目录(分层展示) *///~~
this.clickOnFolderLevelInf = clickOnFolderLevelInf;
/** 展开符合查询条件的目录树 *///~~
this.searchFolder = searchFolder;
/** 得到节点的父节点 *///~~
this.getParent = getParent;
/** 由当前节点Id得到父节点Id *///~~
this.getParentId = getParentId;
/** 由当前节点Id得到子节点Id *///~~liuhr
this.getChildId = getChildId;
this.addChildId = addChildId;
/** 添加节点时，将同一层的其他节点的isLast属性设置为false *///~~
this.setOtherIsLast = setOtherIsLast;
/** 第一个符合查询条件的节点Id *///~~
this.firstSearchNodeId="";
}
/**
* 根节点对象
* @param id 根节点的id号
* @param name 根节点名称,显示在页面的连接的名字
* @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;
}
/**
* 节点对象
* @param id 节点id号
* @param name 节点名称,显示在页面上的链接的名字
* @param parentId 父节点id号
* @param type 节点的类型(folder|file)
* @param url 节点的链接
* @param target 节点链接的目标页面
*///~~
function node(id,name,parentId,type,orgname,code) {
/** 节点id号 *///~~
this.id = id;
/** 节点名称,显示在页面上的链接的名字 *///~~
this.name =name;
/** 父节点id号 *///~~
this.parentId = parentId;
/** 节点的类型(folder|file) *///~~
this.type = type;
/** 节点的链接 *///~~
this.orgname = orgname;
/** 节点链接的目标页面 *///~~
this.code = code;
/** 节点的图片(目录或文件等) *///~~
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;
}
/*
返回当前节点的子节点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)
}
}
}
/** 当添加一个新节点后，将与它处在同一层的其它元素的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;
}
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;
rStrTree += "</td></tr>";
rStrTree += "</table>";
}
var strTree = "";
var rStrTree = ""; // 根节点对应html代码(分层展示)
/***/
/* 通过每个节点img部分的Id来得到其srcIndex，以用于该节点的展开
modify by yancj 2004-1-5
*/
var fID = 0;
/** 画出节点 */
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>";
// 对所有符合查询条件的节点
for(i = 0; i < ids.length; i++) {
if (ids[i] == node.id) {
// 将该节点img对应的Id写到数组里去，当页面节点树建立后，对所有符合条件的节点展开
srcids[idx++] = fIDid;
}
}
}
/** 画出节点(分层展示)，clickOnFolderLevel事件需要参数，并且实现方式不同
* 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;
// 对所有符合查询条件的节点
for(i = 0; i < ids.length; i++) {
if (ids[i] == node.id) {
// alert(node.id);\
// 将该节点img对应的Id写道数组里去，当页面节点树建立后，对所有符合条件的节点展开
srcids[idx++] = fIDid;
// 展开符合条件的节点的父节点
addParentID(node);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -