Constructing / rendering a complex <table />
Michał Sawicz
I'd like to pick your brainz about how would you approach constructing
and rendering a complex table with headers, row/colspanning cells in a
most clean way that rids the view of rendering as much as possible.
Here's roughly what I'm after (incomplete, but you should see what I
mean):
http://imageshack.us/f/845/zrzutekranuqv.png/
There are three approaches I can think of:
1. Construct a complete grid in the view, along with row/colspans
that I would simply iterate over and render in the template, but
that would make it virtually impossible to change the
appearance.
2. Count the cells / rows and compare them with data from the view
to decide on how that particular cell should behave, but that
makes the template a nightmare.
3. ID all the cells and change the attributes accordingly, but for
rowspanning cells I wouldn't know in the consecutive rows that
there in fact was a cell and I might want to repeat it. Maybe I
could fill in the complete grid but make the ones that get
spanned ignorable in the template through a class.
I'll take all thoughts :)
--
Michał (Saviq) Sawicz <mic...@sawicz.net>
Sam Walters
On Wed, Aug 3, 2011 at 6:35 AM, Michał Sawicz <mic...@sawicz.net> wrote:
> Hi all,
>
> I'd like to pick your brainz about how would you approach constructing
> and rendering a complex table with headers, row/colspanning cells in a
> most clean way that rids the view of rendering as much as possible.
>
The view 'rendering' as much as possible. So i assume you would rather
have an initial template rendered. then perhaps have views that
deliver data via JSON or something? AJAX+JSON
> Here's roughly what I'm after (incomplete, but you should see what I
> mean):
> http://imageshack.us/f/845/zrzutekranuqv.png/
>
> There are three approaches I can think of:
>
> 1. Construct a complete grid in the view, along with row/colspans
> that I would simply iterate over and render in the template, but
> that would make it virtually impossible to change the
> appearance.
I cant see why it would be impossible to change. Use javascript to
change the table col and rowspans. (why do visual formatting work on
the serverside if you can do it clientside)
at the very least you can have style="display:None" and variious other
CSS rules to help with any dynamic changes to the table.
> 2. Count the cells / rows and compare them with data from the view
> to decide on how that particular cell should behave, but that
> makes the template a nightmare.
I dont quite understand this one. If you are comparing data
server-side then submitting data via a form would be recommended.
Where is the data being changed that requires the comparison anyway?
> 3. ID all the cells and change the attributes accordingly, but for
> rowspanning cells I wouldn't know in the consecutive rows that
> there in fact was a cell and I might want to repeat it. Maybe I
> could fill in the complete grid but make the ones that get
> spanned ignorable in the template through a class.
>
use multiple classes eg <td class="A B C"> jse a javascript library to
add remove classes select child elements of the DOM im sure the
information doesnt have to be partitioned down the a super fine level
of granularity requiring individual id's for every element does it?
What javascript library do you use? jquery, prototype, dojo etc all
good options to simplify manipulation of DOM elements.
Michał Sawicz
> Hi i dont see what is complex about this.
> The view 'rendering' as much as possible. So i assume you would rather
> have an initial template rendered. then perhaps have views that
> deliver data via JSON or something? AJAX+JSON
No, I mean I want to have the view only prepare the data, not describe
its visual properties like col/rowspan.
> I cant see why it would be impossible to change. Use javascript to
> change the table col and rowspans. (why do visual formatting work on
> the serverside if you can do it clientside)
> at the very least you can have style="display:None" and variious other
> CSS rules to help with any dynamic changes to the table.
I'm not going into JS at all at the moment. I'd like the table to be
rendered static in the template.
> I dont quite understand this one. If you are comparing data
> server-side then submitting data via a form would be recommended.
> Where is the data being changed that requires the comparison anyway?
I mean comparing forloop.counters with column/row/header/whatnot count
and rendering differently. No forms involved here, just a dynamic
dataset.
> use multiple classes eg <td class="A B C"> jse a javascript library to
> add remove classes select child elements of the DOM im sure the
> information doesnt have to be partitioned down the a super fine level
> of granularity requiring individual id's for every element does it?
Yes I'll probably try and run with that approach, I'll prepare the whole
grid within the view, and then "merge" cells that I need spanning in the
template.
> What javascript library do you use? jquery, prototype, dojo etc all
> good options to simplify manipulation of DOM elements.
Yes, I use jQuery, but as stated before I need to create the table in
HTML without client-side tweaks.
Thanks for the comments, keep 'em coming ;)
sebastien piquemal
I have written this small library a while ago : http://code.google.com/p/django-cube/
. It is not exactly what you are looking for, but one of the aim is
indeed easy generation of html tables. I don't know if it can be of
any help to you, but you could check how the template tag is written
for example...
Cheers,
Sébastien
> < 1KViewDownload
