[orginal] OOP treeView based on web.

abstraction:

The TreeView control displays a hierarchy of nodes, like the way files and folders are displayed in the

left pane of the Windows Explorer feature in Windows operating systems,

Each node in the tree view might contain other nodes, called child nodes.

You can display parent nodes, or nodes that contain child nodes, as expanded or collapsed.

introduction:

to build the treeView control basing on web meaning css, html and js, is not hard to implement, all one needs to do is to build an active css code, you needn't pay too much attention to the js code it is really easy if you look to the treeview structure it at all depend on recursive way, each node can at the same time be parent and child.

design:

here we see the recursive algorithm for creating the html code for treeview control :

Code

then continue with the class of the treeView control. to use the code below seems reasonable

Code

Then one needs to add JavaScript to the page to toggle the applied styles. For this, I decided to go with an approach that could handle multiple styles being applied to a single element, so my solution is a little more complex than a simple className replacement approach:

Code

I then wrote a script to setup the treeview based on a nested list container. The main reason according to which I chose not to have all the event wiring in the HTML itself, is that my approach leads to cleaner markup and allows one to easily convert any unordered list into a treeview. Here is the script to hook up the click events (it works in both IE and FireFox):

Code

to make it all more convenient for users there is no need for create the html code,

just we call the function:

function  createTreeViewHtmlCode(pid)
{
  var ul=document.createElement('ul');
      ul.className='TreeView';
      ul.id=pid+'tv';
      document.getElementById(pid).appendChild(ul);
}

here one can observe the entire js code:

Code

now we need to see the way of creating the object of treeView :

Code

but the step must be implemented after you call the header file:

now one can observe the auto-generation code simultaneously created by the js object above:

Code

here you see the css style :

Now I want the first level node to be collapsed with a plus image next to it by default to indicate that the node can be expanded. In order to achieve this we can get rid of the li symbols by making the list items float left. This makes them stack up, so then one can set the elements to display at a 100% of the containing element. We then need space to place our treeview expandable image, so we put in a left padding of 37px. To simplify the process you can use a CSS child selector to apply this to all list elements within the treeview, like this:

Code

The addition of the collapsing and expanding images, and the associated effects to the child nodes is achieved with the help of the following styles:

Code

Moory !! Marisha!!!