By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,301 Members | 1,752 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,301 IT Pros & Developers. It's quick & easy.

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

P: n/a
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 =
{'Sun':{'Sun.1':['Sun1.1','Sun1.2'],'Sun.2':['Sun2.1','Sun2.2']},'Kupa':['Kupa1']}

I want to transform this into HTML:

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

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
webware/cheetah)?

--
Greg
Jul 18 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
While not EXACTLY what you outlined, I've used TreeView
http:www.treeview.net 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
fast.

Larry Bates
Gregor Horvath wrote:
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 =
{'Sun':{'Sun.1':['Sun1.1','Sun1.2'],'Sun.2':['Sun2.1','Sun2.2']},'Kupa':['Kupa1']}
I want to transform this into HTML:

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

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
webware/cheetah)?

--
Greg

Jul 18 '05 #2

P: n/a
Gregor Horvath <g.*******@gmx.at> writes:
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 =
{'Sun':{'Sun.1':['Sun1.1','Sun1.2'],'Sun.2':['Sun2.1','Sun2.2']},'Kupa':['Kupa1']} I want to transform this into HTML: <ol>
<li><a href="?a=Sun">Sun</a></li>
<ol>
<li><a href="?a=Sun.1">Sun.1</a></li>
<ol>
<li><a href="?a=Sun1.1">Sun1.1</a></li>
<li><a href="?a=Sun1.2">Sun1.2</a></li>
</ol>
<li><a href="?Sun.2">Sun.2</a></li>
<ol>
<li><a href="?a=Sun2.1">Sun2.1</a></li>
<li><a href="?a=Sun2.2">Sun2.2</a></li>
</ol>
</ol>
<li><a href="?a=Kupa">Kupa</a></li>
<ol>
<li><a href="?a=Kupa1">Kupa1</a></li>
</ol>
</ol> 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
webware/cheetah)?


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

---------------------------- htmltree.py ---------------------------
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)
else:
dst.write ('<li>%s\n%s' % (mk_expander (id,branch),
start_invisible(id)))
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 }
..link {background: #99f;
border-style : solid}
</style>'''

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

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) {
e.style.display = 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";
else
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);
e.style.backgroundColor = 'transparent';
}
var n = document.getElementById("e."+id);
n.style.backgroundColor = '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" && n.id != "")
set_visibility (n.id, 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
Jul 18 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.