SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to keep all childnodes of the clicked parent

    I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow:

    1 Door phone
    1.1 Ready Kits
    1.1.1 Audioset
    1.1.2 Videoset
    1.2 Audio Kits
    1.2.1 Elphone
    1.2.2 Video Door phone
    2 CCTV
    2.1 Camera
    2.1.1 Dome Camera
    2.1.2 IP Camera
    2.2 Others

    Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened.

    I hope it will be possible to achieve this and i would be helped. I can also provide with the javascript if required.

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is exactly the same question as in this thread

    Why start a new thread?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well actually as such u said in previous question that it was jquery and not javascript so i tried using a javascript. M sorie for posting it again but i thought its better as it might mix up.
    I hope thats fine.......
    Is it possible to keep open all child nodes of a parent node instead of just 1 at a time....???

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mihirpatel83 View Post
    Is it possible to keep open all child nodes of a parent node instead of just 1 at a time....???
    yes it is and I described in the other thread how I would do it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    // Node object
    function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
    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._io = open || false;
    this._is = false;
    this._ls = false;
    this._hc = false;
    this._ai = 0;
    this._p;
    };

    // Tree object
    function dTree(objName,url) {
    this.config = {
    target : null,
    folderLinks : true,
    useSelection : true,
    useCookies : true,
    useLines : true,
    useIcons : true,
    useStatusText : false,
    closeSameLevel : false,
    inOrder : false
    }
    this.icon = {
    root : url+"/dtree/img/base.gif",
    folder : url+"/dtree/img/folder.gif",
    folderOpen : url+"/dtree/img/folderopen.gif",
    node : url+"/dtree/img/page.gif",
    empty : url+"/dtree/img/empty.gif",
    line : url+"/dtree/img/line.gif",
    join : url+"/dtree/img/join.gif",
    joinBottom : url+"/dtree/img/joinbottom.gif",
    plus : url+"/dtree/img/plus.gif",
    plusBottom : url+"/dtree/img/plusbottom.gif",
    minus : url+"/dtree/img/minus.gif",
    minusBottom : url+"/dtree/img/minusbottom.gif",
    nlPlus : url+"/dtree/img/nolines_plus.gif",
    nlMinus : url+"/dtree/img/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
    dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
    this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
    };

    // Open/close all nodes
    dTree.prototype.openAll = function() {
    this.oAll(true);
    };
    dTree.prototype.closeAll = function() {
    this.oAll(false);
    };

    // Outputs the tree to the page
    dTree.prototype.toString = function() {
    var str = '<div class="dtree">\n';
    if (document.getElementById) {
    if (this.config.useCookies) this.selectedNode = this.getSelected();
    str += this.addNode(this.root);
    } else str += 'Browser not supported.';
    str += '</div>';
    if (!this.selectedFound) this.selectedNode = null;
    this.completed = true;
    return str;
    };

    // Creates the tree structure
    dTree.prototype.addNode = function(pNode) {
    var str = '';
    var n=0;
    if (this.config.inOrder) n = pNode._ai;
    for (n; n<this.aNodes.length; n++) {
    if (this.aNodes[n].pid == pNode.id) {
    var cn = this.aNodes[n];
    cn._p = pNode;
    cn._ai = n;
    this.setCS(cn);
    if (!cn.target && this.config.target) cn.target = this.config.target;
    if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);
    if (!this.config.folderLinks && cn._hc) cn.url = null;
    if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {
    cn._is = true;
    this.selectedNode = n;
    this.selectedFound = true;
    }
    str += this.node(cn, n);
    if (cn._ls) break;
    }
    }
    return str;
    };

    // Creates the node icon, url and text
    dTree.prototype.node = function(node, nodeId) {
    var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
    if (this.config.useIcons) {
    if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
    if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
    if (this.root.id == node.pid) {
    node.icon = this.icon.root;
    node.iconOpen = this.icon.root;
    }
    str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
    }
    if (node.url) {
    str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
    if (node.title) str += ' title="' + node.title + '"';
    if (node.target) str += ' target="' + node.target + '"';
    if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
    if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
    str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
    str += '>';
    }
    else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
    str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
    str += node.name;
    if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
    str += '</div>';
    if (node._hc) {
    str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
    str += this.addNode(node);
    str += '</div>';
    }
    this.aIndent.pop();
    return str;
    };

    // Adds the empty and line icons
    dTree.prototype.indent = function(node, nodeId) {
    var str = '';
    if (this.root.id != node.pid) {
    for (var n=0; n<this.aIndent.length; n++)
    str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';
    (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
    if (node._hc) {
    str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';
    if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;
    else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );
    str += '" alt="" /></a>';
    } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';
    }
    return str;
    };

    // Checks if a node has any children and if it is the last sibling
    dTree.prototype.setCS = function(node) {
    var lastId;
    for (var n=0; n<this.aNodes.length; n++) {
    if (this.aNodes[n].pid == node.id) node._hc = true;
    if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;
    }
    if (lastId==node.id) node._ls = true;
    };

    // Returns the selected node
    dTree.prototype.getSelected = function() {
    var sn = this.getCookie('cs' + this.obj);
    return (sn) ? sn : null;
    };

    // Highlights the selected node
    dTree.prototype.s = function(id) {
    if (!this.config.useSelection) return;
    var cn = this.aNodes[id];
    if (cn._hc && !this.config.folderLinks) return;
    if (this.selectedNode != id) {
    if (this.selectedNode || this.selectedNode==0) {
    eOld = document.getElementById("s" + this.obj + this.selectedNode);
    eOld.className = "node";
    }
    eNew = document.getElementById("s" + this.obj + id);
    eNew.className = "nodeSel";
    this.selectedNode = id;
    if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);
    }
    };

    // Toggle Open or close
    dTree.prototype.o = function(id) {
    var cn = this.aNodes[id];
    this.nodeStatus(!cn._io, id, cn._ls);
    cn._io = !cn._io;
    if (this.config.closeSameLevel) this.closeLevel(cn);
    if (this.config.useCookies) this.updateCookie();
    };

    // Open or close all nodes
    dTree.prototype.oAll = function(status) {
    for (var n=0; n<this.aNodes.length; n++) {

    if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {
    this.nodeStatus(status, n, this.aNodes[n]._ls)
    this.aNodes[n]._io = status;
    }
    }
    if (this.config.useCookies) this.updateCookie();
    };

    // Opens the tree to a specific node

    dTree.prototype.openTo = function(nId, bSelect, bFirst) {
    if (!bFirst) {
    for (var n=0; n<this.aNodes.length; n++) {
    if (this.aNodes[n].id == nId) {
    nId=n;
    break;
    }
    }
    }
    var cn=this.aNodes[nId];
    if (cn.pid==this.root.id || !cn._p) return;
    cn._io = true;
    cn._is = bSelect;
    if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);
    if (this.completed && bSelect) this.s(cn._ai);
    else if (bSelect) this._sn=cn._ai;
    this.openTo(cn._p._ai, false, true);
    };

    // Closes all nodes on the same level as certain node
    dTree.prototype.closeLevel = function(node) {
    for (var n=0; n<this.aNodes.length; n++) {
    if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {
    this.nodeStatus(false, n, this.aNodes[n]._ls);
    this.aNodes[n]._io = false;
    this.closeAllChildren(this.aNodes[n]);
    }
    }
    }

    // Closes all children of a node
    dTree.prototype.closeAllChildren = function(node) {
    for (var n=0; n<this.aNodes.length; n++) {
    if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {
    if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);
    this.aNodes[n]._io = false;
    this.closeAllChildren(this.aNodes[n]);
    }
    }
    }

    // Change the status of a node(open or closed)
    dTree.prototype.nodeStatus = function(status, id, bottom) {
    eDiv = document.getElementById('d' + this.obj + id);
    eJoin = document.getElementById('j' + this.obj + id);
    if (this.config.useIcons) {
    eIcon = document.getElementById('i' + this.obj + id);
    eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;
    }
    eJoin.src = (this.config.useLines)?
    ((status)?((bottom)?this.icon.minusBottom:this.icon.minus)(bottom)?this.icon.plusBottom:this.icon.plus)):
    ((status)?this.icon.nlMinus:this.icon.nlPlus);
    eDiv.style.display = (status) ? 'block': 'none';
    };


    // [Cookie] Clears a cookie
    dTree.prototype.clearCookie = function() {
    var now = new Date();
    var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
    this.setCookie('co'+this.obj, 'cookieValue', yesterday);
    this.setCookie('cs'+this.obj, 'cookieValue', yesterday);
    };

    // [Cookie] Sets value in a cookie
    dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {
    document.cookie =
    escape(cookieName) + '=' + escape(cookieValue)
    + (expires ? '; expires=' + expires.toGMTString() : '')
    + (path ? '; path=' + path : '')
    + (domain ? '; domain=' + domain : '')
    + (secure ? '; secure' : '');
    };

    // [Cookie] Gets a value from a cookie
    dTree.prototype.getCookie = function(cookieName) {
    var cookieValue = '';
    var posName = document.cookie.indexOf(escape(cookieName) + '=');
    if (posName != -1) {
    var posValue = posName + (escape(cookieName) + '=').length;
    var endPos = document.cookie.indexOf(';', posValue);
    if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
    else cookieValue = unescape(document.cookie.substring(posValue));
    }
    return (cookieValue);
    };

    // [Cookie] Returns ids of open nodes as a string
    dTree.prototype.updateCookie = function() {
    var str = '';
    for (var n=0; n<this.aNodes.length; n++) {
    if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {
    if (str) str += '.';
    str += this.aNodes[n].id;
    }
    }
    this.setCookie('co' + this.obj, str);
    };

    // [Cookie] Checks if a node id is in a cookie
    dTree.prototype.isOpen = function(id) {
    var aOpen = this.getCookie('co' + this.obj).split('.');
    for (var n=0; n<aOpen.length; n++)
    if (aOpen[n] == id) return true;
    return false;
    };

    // If Push and pop is not implemented by the browser
    if (!Array.prototype.push) {
    Array.prototype.push = function array_push() {
    for(var i=0;i<arguments.length;i++)
    this[this.length]=arguments[i];
    return this.length;
    }
    };
    if (!Array.prototype.pop) {
    Array.prototype.pop = function array_pop() {
    lastElement = this[this.length-1];
    this.length = Math.max(this.length-1,0);
    return lastElement;
    }
    };

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Above is the javascript that is being used...Can you please have a look and tell me if there is something in code which an help me out. You specified a way where in i have to learn how to do it and it will take time.
    I am just stuck with this problem and due to this mywebsite cannot be hosted. Please suggest me something that can be useful and help me achieve my requirement

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what is going on here.

    The code you posted in this thread is very different to the code you posted in the other thread

    To be honest, there is far too much code for me to go through and try to debug, especially when I can't see the html it operates on.

    It would be quicker and easier for me to start from scratch and write my own code based on the description I posted in the other thread. But what you are asking is by no means a quick task.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorie for being confusing......my one post has different javascript code than other.... Just to accomplish my requirement i tried using other code as well bt wasnt successful in both.... so i posted same question with different javascript code with a hope that someone can help me out.

    I know its not easy and so dnt even expect to get help in a snap..I dont hv a live link for the current javascript usage else would have given you so that you can chk out. The live link www.webfactory.in/elcomsecurity where in products section i have used a tree view menu. if you can go through and help me if possible then it would be great else no issues.... Thanks for replying


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •