SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb TreeList or TreeView

    Hi,

    I know that someone already did something similar but for learning purpose i work on creating a treeView class. something like in windows explorer and the treelist of folders and files.

    i would like to understand how this treeview is built ?
    i mean i've create 2 classes : 1 for the TreeView itself and 1 for the Nodes.

    As you know a Node can have several children nodes.

    How those children nodes refere to their parent node ?
    how are we able to know their depth (level of indent) ?

    for example :
    Root
    Node 1
    Node 2
    Node 21
    Node 22
    Node3

    When you create the TreeView, you can add a childnode in whatever order you want, the important thing is that it has a reference to its parent node as also to its children nodes.

    how can i manage/build those references ?

    thanks a lot,

    M

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You're wanting to know about Storing Hierarchical Data in a Database.

    Code PHP:
    data = Array(
      Array('Root', 1, 12),
      Array('Node 1', 2, 3),
      Array('Node 2', 4, 9),
      Array('Node 21', 5, 6),
      Array('Node 22', 7, 8),
      Array('Node 3', 10, 11)
    );

  3. #3
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very interesting link.
    thanks a lot.

  4. #4
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so i tried to migrate this example to my situation, however it does notwork.
    it loses the i value while recalling for next recursion :-(

    any idea ?

    here is the code :
    CTreeView.prototype.RebuildTree = function(ParentNode, LeftValue)
    {
    var rgt = LeftValue +1;

    for (i=0;i<this.NodeArray.length;i++)
    {
    if(this.NodeArray[i].parentnode == ParentNode)
    {
    rgt = this.RebuildTree(this.NodeArray[i].Label,rgt);
    }
    }

    for (j=0;j<this.NodeArray.length;j++)
    {
    if(this.NodeArray[j].Label == ParentNode)
    {
    this.NodeArray[j].valLeft = LeftValue;
    this.NodeArray[j].valRight = rgt;
    }
    }

    return (rgt+1);

    }

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The loop variables currently aren't declared so they have a global scope instead.
    You need to declare the variables so that their scope remains within their function.

    It will also improve the performance if the array length is not checked at every iteration of the loop

    Code JavaScript:
    var i=0, nodeLen = this.NodeArray.length;
    for (i=0; i<nodeLen; i++)

    You can also reuse these variables in the second loop instead of having the separate j iterator.

    I'm also puzzled about why you're creating this RebuildTree function in the first place. The author calls the RebuildTree technique "a simple but not that elegant function" and that it is "not very efficient with large trees"

    It's only useful if you are starting with an adjacency array and are converting an adjacency list to a binary tree.

    Code JavaScript:
    // an adjacency list
    adjacency-list = [
      ['', 'Root'],
      ['Root', 'Node 1'],
      ['Root', 'Node 2'],
      ['Node 2', 'Node 21'],
      ['Node 2', 'Node 22'],
      ['Root', 'Node 3']
    ];
     
    // a heirarchical list
    heirarchical-list = [
      ['Root', 1, 12],
      ['Node 1', 2, 3],
      ['Node 2', 4, 9],
      ['Node 21', 5, 6],
      ['Node 22', 7, 8],
      ['Node 3', 10, 11]
    ];
    Last edited by paul_wilkins; Dec 12, 2007 at 13:01.

  6. #6
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically, i just wrote here an extract of the whole code.
    For sure iterators are defined before and it works well now.
    the problem was about losing the iterator during calling back the function from a child node.

    I use this method because i do not want to force user to enter left and right values.
    Basically, the class is made like that, that user only writes node text, and its parent node.

    everything else is done by classes.

    the purpose of those classes is to create a menu tree, not to show the whole list of folders from hard disk :-)

    so max it will have 100 items.

    my problem now is to display the indent :-)

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by maileen View Post
    I use this method because i do not want to force user to enter left and right values.
    Basically, the class is made like that, that user only writes node text, and its parent node.
    The user never has to enter the left and right values, it's the code that does that for you.

    It might take a bit to get your head around the technique, but when you do it's blindingly fast for computers to get the results for you.

  8. #8
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so it works well but instead to simply add spaces to represent the tree node indent, i would like to use a <div> ...</div> tag for each node.

    However, i have some problem when i want to insert children div, via the recursive function, to reprensent the real tree.

    Do you have any idea how to do that ?
    thx.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The start of the recursive function should start the div, and the end of the recursive function should end the div.

    What problems are you having?

  10. #10
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    basically, the start and end are not a problem...
    the problem is located with the internal DIV.

    i was thinking that during the array poping (for inner nodes) to create each time a new div... but it seems to not work :-(

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    So show us what you have

  12. #12
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Ok,

    so here is what i get under IE and FireFox.

    i do not understand what's happening under Firefox.
    it's like the display:none / display :"" does not work correctly.

    any idea ?

    thx.

    M.
    Attached Images Attached Images

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I can't see the images yet, but if you think it's to do with the display code then post it up here.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The problem is in how your code is handling the dom. Solutions though aren't very likely unless we can see what's causing the problem in the code.


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
  •