snowboy886 2008-11-02 11:02
浏览 195
已采纳

javascript生成的树形目录如何把读取的id传递给jsp页面

我用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;
}

}

  • 写回答

2条回答 默认 最新

  • bluelily22 2008-11-04 09:40
    关注

    //点击叶子节点后的动作,目前只是弹出对话框,可修改为链接到具体的页面
    this.clickItem = function(_link) {
    return ;

    } 
    

    这个link 不就可以向jsp或action传参数,你把id拼上去就行啦

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 PointNet++的onnx模型只能使用一次
  • ¥20 西南科技大学数字信号处理
  • ¥15 有两个非常“自以为是”烦人的问题急期待大家解决!
  • ¥30 STM32 INMP441无法读取数据
  • ¥15 R语言绘制密度图,一个密度曲线内fill不同颜色如何实现
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上,请大家贡献智慧,别用大模型回答,大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。