当前位置: 编程技术>java/j2ee
JSP 动态树的实现
来源: 互联网 发布时间:2014-10-17
本文导语: 第一步:在开始之前我们需要准备这么一个js文件,代码如下。我姑且将它命名为tree.js。 代码如下:function Node(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr) { this.id = id; this.pid = pid; this.name = name; ...
第一步:在开始之前我们需要准备这么一个js文件,代码如下。我姑且将它命名为tree.js。
function Node(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr) {
this.id = id;
this.pid = pid;
this.name = name;
this.url = url;
this.title = title;
this.target = target;
this.icon = icon;
this.iconOpen = iconOpen;
this.appendedStr = appendedStr;
this._io = open || false;
this._is = false;
this._ls = false;
this._hc = false;
this._ai = 0;
this._p;
};
// Tree object
function tree(objName,path) {
this.path = path;
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false
}
this.icon = {
root : path + 'TreeDemo/images/tree_base.gif',
folder : path + 'TreeDemo/images/tree_folder.gif',
folderOpen : path + 'TreeDemo/images/tree_folderopen.gif',
node : path + 'TreeDemo/images/tree_folder.gif',
empty : path + 'TreeDemo/images/tree_empty.gif',
line : path + 'TreeDemo/images/tree_line.gif',
join : path + 'TreeDemo/images/tree_join.gif',
joinBottom : path + 'TreeDemo/images/tree_joinbottom.gif',
plus : path + 'TreeDemo/images/tree_plus.gif',
plusBottom : path + 'TreeDemo/images/tree_plusbottom.gif',
minus : path + 'TreeDemo/images/tree_minus.gif',
minusBottom : path + 'TreeDemo/images/tree_minusbottom.gif',
nlPlus : path + 'TreeDemo/images/tree_nolines_plus.gif',
nlMinus : path + 'TreeDemo/images/tree_nolines_minus.gif'
};
this.obj = objName;
this.aNodes = [];
this.aIndent = [];
this.root = new Node(-1);
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
};
// Adds a new node to the node array
tree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr) {
this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr);
};
// Open/close all nodes
tree.prototype.openAll = function() {
this.oAll(true);
};
tree.prototype.closeAll = function() {
this.oAll(false);
};
// Outputs the tree to the page
tree.prototype.toString = function() {
var str = '
if (!this.selectedFound) this.selectedNode = null;
this.completed = true;
return str;
};
// Creates the tree structure
tree.prototype.addNode = function(pNode) {
var str = '';
var n=0;
if (this.config.inOrder) n = pNode._ai;
for (n; n
d = new tree('d','../');
d.add(,,'')
d.add(,,'',parent.getUrlByCatalogId(''),null,'list');
document.write(d);
第八步:创建一个框架页面,index.html代码如下,和list_default.htm。
function getUrlByCatalogId(catalogId) {
return "TreeDemo/content_add.jsp?catalogId="+catalogId;
}
function getUrlByCatalogId(catalogId) {
return "TreeDemo/content_add.jsp?catalogId="+catalogId;
}
第九步:运行效果
备注:如有需要源码的请直接联系QQ398349538。
代码如下:
function Node(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr) {
this.id = id;
this.pid = pid;
this.name = name;
this.url = url;
this.title = title;
this.target = target;
this.icon = icon;
this.iconOpen = iconOpen;
this.appendedStr = appendedStr;
this._io = open || false;
this._is = false;
this._ls = false;
this._hc = false;
this._ai = 0;
this._p;
};
// Tree object
function tree(objName,path) {
this.path = path;
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false
}
this.icon = {
root : path + 'TreeDemo/images/tree_base.gif',
folder : path + 'TreeDemo/images/tree_folder.gif',
folderOpen : path + 'TreeDemo/images/tree_folderopen.gif',
node : path + 'TreeDemo/images/tree_folder.gif',
empty : path + 'TreeDemo/images/tree_empty.gif',
line : path + 'TreeDemo/images/tree_line.gif',
join : path + 'TreeDemo/images/tree_join.gif',
joinBottom : path + 'TreeDemo/images/tree_joinbottom.gif',
plus : path + 'TreeDemo/images/tree_plus.gif',
plusBottom : path + 'TreeDemo/images/tree_plusbottom.gif',
minus : path + 'TreeDemo/images/tree_minus.gif',
minusBottom : path + 'TreeDemo/images/tree_minusbottom.gif',
nlPlus : path + 'TreeDemo/images/tree_nolines_plus.gif',
nlMinus : path + 'TreeDemo/images/tree_nolines_minus.gif'
};
this.obj = objName;
this.aNodes = [];
this.aIndent = [];
this.root = new Node(-1);
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
};
// Adds a new node to the node array
tree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr) {
this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open, appendedStr);
};
// Open/close all nodes
tree.prototype.openAll = function() {
this.oAll(true);
};
tree.prototype.closeAll = function() {
this.oAll(false);
};
// Outputs the tree to the page
tree.prototype.toString = function() {
var str = '
n';
if (document.getElementById) {
if (this.config.useCookies) this.selectedNode = this.getSelected();
str += this.addNode(this.root);
} else str += 'Browser not supported.';
str += '
'; if (document.getElementById) {
if (this.config.useCookies) this.selectedNode = this.getSelected();
str += this.addNode(this.root);
} else str += 'Browser not supported.';
str += '
if (!this.selectedFound) this.selectedNode = null;
this.completed = true;
return str;
};
// Creates the tree structure
tree.prototype.addNode = function(pNode) {
var str = '';
var n=0;
if (this.config.inOrder) n = pNode._ai;
for (n; n
d = new tree('d','../');
d.add(,,'')
d.add(,,'',parent.getUrlByCatalogId(''),null,'list');
document.write(d);
第八步:创建一个框架页面,index.html代码如下,和list_default.htm。
代码如下:
function getUrlByCatalogId(catalogId) {
return "TreeDemo/content_add.jsp?catalogId="+catalogId;
}
function getUrlByCatalogId(catalogId) {
return "TreeDemo/content_add.jsp?catalogId="+catalogId;
}
第九步:运行效果
备注:如有需要源码的请直接联系QQ398349538。