Rendering trees in html is quite complex, because each node in the tree has lots of state, and rendering all parts of the tree (nodes, branches, expand/collapse button) take part in this state.
The following gives a detailed example of how DomUI trees should be rendered in such a way that we can easily style them.
The basic structure of a tree, as far as rendering is concerned, is a nested set of <ul> and <li> items. The <ul> part represents the children of a list node; the <li> represents an entire child node and its (optional) children. So the basicv structure of the tree is as follows:
<ul> <li> <span class="label">Root item 1<span> <ul> <li> <span class="label">Leaf item 1.1</span> </li> </ul> </li> </ul>
The tree3 renders the following structure from this:
We need to define how we get each of the parts of this rendering.
The simplest part is the label. Each label is part of a label container which is a span. This label container can contain other html. In the example here the other html is an image, a bold text and a normal weight text.
Before we discuss the rest, let's define the major structural elements in the above image in terms of the above structure.
The purple part is the label container, containing the user-defined label (which in this case is the three parts)
The brown part is the <ul>, which is contained in the higher level's li (the green part).
The vertical lines between items at the same level are defined as a generated :before class on the <li>, see the blue line:
We only use border-left and use the following to make the :before item as large as the li:
position: absolute; top: 0; bottom: 0; content: ""; width: 0; left: -.5em; border-left: 1px solid #777;
This line now automatically takes the size of the whole li, so if the li has its children expanded it forms a long line; if the li is not expanded it forms a short line.