HTML Tree View with <ol> and <a href>

Discussion in 'Python' started by Gregor Horvath, Jan 27, 2005.

  1. Hi,

    Before I reinvent the wheel I`d like to ask if someone has done this
    before since I did not find an advice at Google.

    The goal is to create a dynamic Tree View in HTML.

    Say I have a data strucure like this:

    structList =

    I want to transform this into HTML:

    <li><a href="?a=Sun">Sun</a></li>
    <li><a href="?a=Sun.1">Sun.1</a></li>
    <li><a href="?a=Sun1.1">Sun1.1</a></li>
    <li><a href="?a=Sun1.2">Sun1.2</a></li>
    <li><a href="?Sun.2">Sun.2</a></li>
    <li><a href="?a=Sun2.1">Sun2.1</a></li>
    <li><a href="?a=Sun2.2">Sun2.2</a></li>
    <li><a href="?a=Kupa">Kupa</a></li>
    <li><a href="?a=Kupa1">Kupa1</a></li>

    If the user clicks on a branch-link say 'Sun.1' then the branch below
    opens/closes (not printed by the servlet). Like a tree view control in
    an native GUI app.

    Has this, or a similar approach, been done before in python ( I am using
    Gregor Horvath, Jan 27, 2005
    1. Advertisements

  2. Gregor Horvath

    Larry Bates Guest

    While not EXACTLY what you outlined, I've used TreeView along with Python to create the
    dynamic tree menus you describe. I had to write a
    couple or very short JavaScript additions, but it is
    working just fine. All the tree opening and closing
    is done on the client via-javascript so it is very

    Larry Bates
    Larry Bates, Jan 28, 2005
    1. Advertisements

  3. Gregor Horvath

    Eddie Corns Guest

    Here is a browser side solution that you can have a play with:

    ---------------------------- ---------------------------
    import sys

    id = 0
    def new_id ():
    global id
    id += 1
    return id

    def mk_expander (id, lab='+'):
    return '<A href="javascript:void 0;" class="expander" onclick="togglen(%d);" onmouseover="return true;" id="e.%s">%s</A>' % (id,id,lab)

    def start_invisible (id):
    return '<DIV id="%d" style="display: none">' % id

    def finish_invisible (dst):
    dst.write ('</DIV>')

    def build_tree (dst, node):
    dst.write ('<ol>\n')
    for branch in node:
    ##sys.stderr.write ('-- %s\n'%branch)
    id = new_id()
    if type(node) == type([]):
    dst.write ('<li>%s\n' % branch)
    dst.write ('<li>%s\n%s' % (mk_expander (id,branch),
    build_tree (dst, node[branch])
    finish_invisible (dst)

    style_stuff = '''
    <style type="text/css">
    A.expander {border-style: solid; border-width: thin 0 thin thin}
    A {text-decoration: none}
    ..mono {font-family : monospace}
    TD {text-align : right}
    TR.col {background: #9F9 } {background: #99f;
    border-style : solid}

    print '<HEAD><TITLE>BLAH</TITLE>'
    print '<script src="hier.js"></script>'
    print style_stuff
    print '''

    structList = {'Sun':{'Sun.1':['Sun1.1','Sun1.2'],'Sun.2':['Sun2.1','Sun2.2']},'Kupa':['Kupa1']}

    build_tree (sys.stdout, structList)
    print '</body>\n</html>\n'


    and the javascript file that goes with it

    ---------------------------------hier.js --------------------------
    visibility_state = new Array();
    highlighted = new Array();
    selected_node = null;
    selected_id = null;
    function get_visibility (id) {
    var m = visibility_state[id];
    if (m == undefined)
    m = "none";
    return m;
    function set_visibility (id, e, vis) { = vis;
    visibility_state[id] = vis;
    function togglen(id) {
    toggle_branch (id);
    do_select (id);
    return false;
    function toggle_branch(id) {
    var e = document.getElementById(id);
    var m = get_visibility (id);
    if (m == "none")
    m = "inline";
    m = "none";
    set_visibility (id, e, m);
    function show_branch (id) {
    var e = document.getElementById(id);
    set_visibility (id, e, "inline");
    function hide_branch (id) {
    var e = document.getElementById(id);
    set_visibility (id, e, "none");
    function do_select (id) {
    if (selected_id != null) {
    var e = document.getElementById("e."+selected_id); = 'transparent';
    var n = document.getElementById("e."+id); = 'red';
    selected_node = document.getElementById(id);
    selected_id = id;
    function set_visibility_all (n, vis) {
    if (n == null) return false;
    if (n.nodeType == 1) {
    if (n.tagName == "DIV" && != "")
    set_visibility (, n, vis);
    for (var c = n.firstChild; c != null; c = c.nextSibling)
    set_visibility_all (c, vis);


    the javascript code is extracted from a larger set of functions that include a
    popup menu with inbuilt search (which opens tree levels as necessary), if
    you're interested.

    Eddie Corns, Jan 28, 2005
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.