`

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;
    }
}
分享到:
评论
5 楼 laitaogood 2008-11-03  
ultrafrog 写道

你可以作为查询字符串传过去

我原来就是这样用的,呵呵,有效,但是最好不要弄太多的参数
4 楼 ultrafrog 2008-11-03  
你可以作为查询字符串传过去
3 楼 snowboy886 2008-11-03  
谁能帮帮我,谢谢
2 楼 snowboy886 2008-11-02  
我不怎么懂js,能说的更清楚些吗?
1 楼 shanghui_12 2008-11-02  
id都能获得应该很容易了,右侧采用div,写一个函数,来动态改变div的innerHTML。

相关推荐

    jsp+ajax实现动态树结构

    2. **JSP数据处理**:在服务器端,使用JSP和Servlet处理请求,可能需要连接数据库查询数据,生成树结构的JSON或XML格式的数据。 3. **JavaScript库**:在客户端,可以使用jQuery或者其他JavaScript库简化DOM操作和...

    复选框目录树

    复选框目录树,也称为dtree,是一种在网页用户界面中常见的交互元素,它将层级结构的数据以树形结构展示,并且每个节点都配备有复选框,用户可以通过选择复选框来选取一个或多个节点。这种设计使得用户能够方便地对...

    jsp无限分级模块增删改,dtree显示

    **dtree** 是一款JavaScript插件,专门用于在网页上生成可交互的树形结构。它允许用户展开和折叠节点,以及执行其他操作,如添加、删除和修改节点。dtree的使用需要配合HTML和CSS来布局,同时通过JavaScript或jQuery...

    JSP+javaBean+数据库 无限级动态树状菜单

    例如,`Tree.java`可能包含了根据数据库数据生成树结构的方法,而`Cn.java`可能用于处理数据库的CRUD(创建、读取、更新、删除)操作。 3. **数据库**: 数据库是存储和管理数据的系统,本项目中使用的数据库未...

    java面试知识

    - **DOM (Document Object Model)**:将XML文档转化为树形结构。 - **SAX (Simple API for XML)**:基于事件驱动模型。 - **StAX (Streaming API for XML)**:支持流式处理大型XML文档。 ##### 项目的生命周期 - *...

    freemarker总结

    options:该参数可以省略,指定包含时的选项,包含encoding和parse两个选项,其中encoding指定包含页面时所用的解码集,而parse指定被包含文件是否作为FTL文件来解析,如果省略了parse选项值,则该选项默认是true. ...

Global site tag (gtag.js) - Google Analytics