我用js读取数据库生成一个树形目录,树形目录做好了,可是不知道怎么把节点的id传到jsp页面或action里,最好action能通过request.getAttribute()得到所点节点的id,还有就是不知道如何像有些论坛上一个,点不同的节点,右面显示不同的jsp,小弟第一次做,请指教,谢谢,下面是我用的js代码:
var Tree = new function() {
this._url = "tree.jsp"; //用于请求数据的服务器页面地址
this._openMark = "<img src='images/nolines_minus.gif'/>"+"<img src='images/folderopen.gif'/>"; //目录节点处于展开状态时的标识
this._closeMark = "<img src='images/nolines_plus.gif'/>"+"<img src='images/folder.gif'/>"; //目录节点处于关闭状态时的标识
this._itemMark = "<img src='images/page.gif'/>"; //非目录节点标识
this._initId = "treeInit"; //树形目录初始div标识
this._rootData = "IS安全等级保护基础库"; //根节点文字信息
this._boxSuffix = "_childrenBox"; //子节点容器后缀
this._folderType = "folder"; //目录节点类型变量
this._itemType = "item"; //非目录节点类型变量
//初始化根节点
this.init = function() {
var initNode = document.getElementById(this._initId); //获取初始div
var _node = document.createElement("div"); //创建新div作为根节点
_node.id = "1"; //根节点id为0
_node.innerHTML = this.createItemHTML(_node.id, this._folderType, this._rootData);
initNode.appendChild(_node); //将根节点加入初始div
}
//获取给定节点的子节点
this.getChildren = function(_parentId) {
//获取页面子节点容器box
var childBox = document.getElementById(_parentId + this._boxSuffix);
//如果子节点容器已存在则直接设置显示状态,否则从服务器获取子节点信息
if (childBox) {
var isHidden = (childBox.style.display == "none"); //判断当前状态是否隐藏
childBox.style.display = isHidden?"":"none"; //隐藏则显示,如果显示则变为隐藏
//根据子节点的显示状态修改父节点标识
var _parentNode = document.getElementById(_parentId);
_parentNode.firstChild.innerHTML = isHidden?this._openMark:this._closeMark;
} else {
var xmlHttp=this.createXmlHttp(); //创建XmlHttpRequest对象
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//调用addChildren函数生成子节点
Tree.addChildren(_parentId, xmlHttp.responseXML);
}
}
xmlHttp.open("GET", this._url + "?parentId=" + _parentId, true);
xmlHttp.send(null);
}
}
//根据获取的xmlTree信息,设置指定节点的子节点
this.addChildren = function(_parentId, _data) {
var _parentNode = document.getElementById(_parentId); //获取父节点
_parentNode.firstChild.innerHTML = this._openMark; //设置节点前标记为目录展开形式
var _nodeBox = document.createElement("div"); //创建一个容器,称为box,用于存放所有子节点
_nodeBox.id = _parentId + this._boxSuffix; //容器的id规则为:在父节点id后加固定后缀
_nodeBox.className = "box"; //样式名称为box,div.box样式会对此节点生效
_parentNode.appendChild(_nodeBox); //将子节点box放入父节点中
var _children = _data.getElementsByTagName("tree")[0].childNodes; //获取所有item节点
var _child = null; //声明_child变量用于保存每个子节点
var _childType = null; //声明_childType变量用于保存每个子节点类型
for(var i=0; i<_children.length; i++) { //循环创建每个子节点
_child = _children[i];
_node = document.createElement("div"); //每个节点对应一个新div
_node.id = _child.getAttribute("id"); //节点的id值就是获取数据中的id属性值
_childType = _child.getAttribute("isFolder")=="true"?this._folderType:this._itemType; //设置子节点类型
//根据节点类型不同,调用createItemHTML创建节点内容
if (_childType == this._itemType) {
//非目录节点在最后多传一个link数据,用于点击后链接到新页面
_node.innerHTML = this.createItemHTML(_node.id, _childType, _child.firstChild.data, _child.getAttribute("link"));
} else {
//目录节点只需传递id,节点类型,节点数据
_node.innerHTML = this.createItemHTML(_node.id, _childType, _child.firstChild.data);
}
_nodeBox.appendChild(_node); //将创建好的节点加入子节点box中
}
}
//创建节点的页面片断
this.createItemHTML = function(itemId, itemType, itemData, itemLink) {
//根据节点类型不同,返回不同的HTML片断
if (itemType == this._itemType) {
//非目录节点的class属性以item开头,并且onclick事件调用Tree.clickItem函数
return '<span class="itemMark">'+this._itemMark+'</span>' +
'<a href="Frame.do" style="text-decoration:none" target="main"><span class="item" >'
+itemData+'</span></a>';
} else if (itemType == this._folderType) {
//目录节点的class属性以folder开头,并且onclick事件调用Tree.getChildren函数
return '<span class="folderMark" onclick="Tree.getChildren(\'' + itemId + '\')">' + this._closeMark + '</span>' +
'<span class="folder" onclick="Tree.getChildren(\'' + itemId + '\')">' + itemData + '</span>'
}
}
//点击叶子节点后的动作,目前只是弹出对话框,可修改为链接到具体的页面
this.clickItem = function(_link) {
return ;
}
//用于创建XMLHttpRequest对象
this.createXmlHttp=function() {
var xmlHttp = null;
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
return xmlHttp;
}
}
分享到:
相关推荐
javascript 树形目录 javascript 树形目录 javascript 树形目录 javascript 树形目录 javascript 树形目录 javascript 树形目录
树形结构生成javaScript 树形结构生成javaScript 树形结构生成javaScript
树形目录菜单生成器,(JavaScript版本)
javascript操作xml生成树形菜单 javascript操作xml生成树形菜单 javascript操作xml生成树形菜单
原生javascript生成树形结构,采用非递归形式,效率和性能高,可以生成 数组和对象两种树形结构,顶层父级可以有多个,通用性强。
JavaScript 树形菜单JavaScript 树形菜单JavaScript 树形菜单
JavaScript实现树形菜单源码以及使用说明
JAVASCRIPT 树形菜单 JSP JSP项目中JAVASCRIPT 树形菜单
javascript树形菜单
该源码是javascript生成的tree。jsp页面可直接套用。
使用JavaScript+XML+XSL创建树形目录,源码及示例
使用JavaScript实现数据的目录显示使用Ajax从后台取出数据
javaScript实现树形结构
java解析xml动态生成树形菜单结构 可以满足无限层的树形菜单,该工程的所有代码,都有详细的实例。 以及js控制树形菜单的伸展和收缩,以及全选
使用dtree插件生成动态树 1,从动态树的要求我们要从数据库生成 <script type="text/javascript"> d = new dTree('d'); d.add(1,0,'云南电信'); d.add(11,1,'省公司本部'); d.add(12,1,'昆明分公司'); d.add(121,12...
dtree是可用有产生树形目录的javascript插件,集实用美观与一体。
JavaScript树形控件实现无限级树形菜单
JavaScript与web树形菜单的对比,简单的几步就可以让你学会无限级树形菜单的制作
利用javascript编写的树形菜单。利用javascript编写的树形菜单。