What's the best way to generate HTML table from list ?

[smallufo]

If I only have a list of objects from the controller , not sure how long it is .

How can I draw a HTML table , with some fixed cols ?

I feel #{list} is very hard to accomplish this ...

Is there a doc or other tags that ease the creation of table from list ?

Thanks.

[sas]

I think that using the list tag is the easiest method

http://www.playframework.org/documentation/1.1/tags#list

you can also use plain groovy code to iterate over the list, or
implement your own tag...

http://www.playframework.org/documentation/1.0/templates#aCreatetagsa

[David González]

In an application I'm working I'm using #{list} and it pretty much provides all you need. You can set column width manually for example:

<table>

    <tr>

        <td>Plan Name</td>

        <td>Plan Storage ( mb / gb / tb )</td>

        <td>In use by</td>

        <td>Plan Price</td>

    </tr>

    %{

        if(dataplans.size() > 0) {

    }%

    #{list items:dataplans, as:'data'}

    <tr>

        <td>${data.plan_name}</td>

        %{

            plan_storage = models.SizeFormatter.roundSize(data.plan_storage, "MB", true);

            plan_inGB = models.SizeFormatter.roundSize(data.plan_storage, "GB", true);

            plan_inTB = models.SizeFormatter.roundSize(data.plan_storage, "TB", true);

            trueUnit = models.SizeFormatter.determineUnit(data.plan_storage);

        }%

        <td>

            #{if trueUnit.equals("MB")} 

            <strong>${plan_storage} mb</strong>

            #{/if}

            #{else}

            ${plan_storage} mb

            #{/else} /

            #{if trueUnit.equals("GB")}

            <strong>${plan_inGB} gb</strong>

            #{/if}

            #{else}

            ${plan_inGB} gb

            #{/else} /

            #{if trueUnit.equals("TB")}

            <strong>${plan_inTB}  tb</strong>

            #{/if}

            #{else}

            ${plan_inTB} tb

            #{/else}</td>

        <td align="center">${data.plan_count}</td>

        <td>${data.plan_price}</td>

    </tr>

    #{/list}

    %{

        } else {

    }%

    <tr>

        <td colspan="3">There are no data plans.</td>

    </tr>

    %{

        }

    }%

</table>

As you see you can pretty much add/remove things in table cells using #{list} tag. Cheers, it would be good to know what exactly is missing from the list tag.

My bad if the code is messy, haven't had the time to clean up .

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.

[William Wong]

EmpController.java
  empList() {
     List<Employee> employees = get-list-somewhere
     render(employees);
  }

empList.html
  <table>
    <tr> <th>Name</th> <th>SSN</th> </tr>
    #{list items:employees, as:'emp'}
      <tr> <td>${emp.name}</td> <td>${emp.ssn}</td> </tr>
    #{/list}
  </table>

[Steve Chaloner]

I've had a couple of projects where it's a requirement for people to
be able to show/hide and reorder columns. So, the column model is
held in the database and the table is rendered via a tag. This way I
can also add in extra columns such as a checkbox per row without any
extra effort:

TableColumns.java
public User user;
public String viewId;
public String tableId;
@OrderBy("position asc")
public List<TableColumn> tableColumns;

TableColumn.java
public String key;
public int position;
public boolean visible;

Employees.java
public static void whatever()
{
...
List<TableColumn> tableColumns =
TableColumns.findByUserAndViewIdAndTableId(user, viewId, tableId);
List<Employee> employees = ...
render(tableColumns,
employees);
}

@Util
public static String getByColumnKey(Employee employee,
String columnKey)
{
// map column key to field of employee and return
}

whatever.html
#{table cols:tableColumns}
#{list items:employees, as:'employee'}
<tr>
#{list items:tableColumns, as:'tc'}
#{if tableColumn.visible}
<td>$
{controllers.Employees.getByColumnKey(employee, tc.key}</td>
#{/if}
#{/list}
</tr>
#{/list}
#{/table}

tags/table.html
<table>
<thead>
<tr>
<th><input type="checkbox" id="rowSelect"/></th>
#{list items:_cols, as:'tableColumn'}
#{if tableColumn.visible}
<th>&{tableColumn.key}</th>
#{/if}
#{/list}
</tr>
</thead>
#{doBody /}
</table>

While this initially looks like a much more complex way of doing
things, it actually provides a quite powerful mechanism for user
customisation along with a lot of code reuse. In the
Employees#getByColumnKey I automatically map the key to the entity
field using objectify-led (will be blogging on this later) and so that
method is tiny - if you do it manually, the method length grows in
length along with the number of fields in your entity. You can,
however, combine the two approaches in order to provide a data
feedback that's dissociated from the underlying model structure.

- Steve

> > play-framewor...@googlegroups.com<play-framework%2Bunsubscribe@go oglegroups.com>
> > .

[sas]

great idea... it would be great to have it as a plug-in

looking fordward for your blog

saludos

sas

[smallufo]

Hi 

Sorry for replying late.

I think some of you may have misunderstood what I meant. Sorry for not so clear.

I mean , I have a list of objects , not knowing how long it is , I want the list them horizontally in a table , with fixed column size.

For example , 

If I have 100 objs , the column is fixed to 10, then I will have 10 rows.

If I have 101 objs , with fixed 10 columns , I'll have 11 rows. (just like a calendar)

I wonder how to finish it in #{list} , without any scriptlet's help ?

Thanks.

[David González]

you can use script tags, %{ }% to verify the count and process the things you want like the column fixed width, or you could count it beforehand and pass it on the render(list, listCount) (i think you can count it on the template, but never tried it)

Take a look at http://www.playframework.org/documentation/1.1/templates#Scripts

If you take a look at some examples posted here, some contains %{ }% tags in their #{list} tags, all you have to do is the calculation

Cheers, hope that answer your question

Thanks.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To post to this group, send email to play-fr...@googlegroups.com.

To unsubscribe from this group, send email to play-framewor...@googlegroups.com.

[Julien Richard-Foy]

I may have misunderstood, but I think you just need some CSS tricks
(don't use a table).

[smallufo]

Hi

I am interested in this (CSS solution).

Is there any hints ?

2010/12/30 Julien Richard-Foy <juli...@gmail.com>

I may have misunderstood, but I think you just need some CSS tricks
(don't use a table).

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To post to this group, send email to play-fr...@googlegroups.com.

To unsubscribe from this group, send email to play-framewor...@googlegroups.com.

[Julien Richard-Foy]

Something like this:

*{ In your template }*
<div>
#{list items:models, as:'model'}
<span class="column"></span>
*{ Check for a new row }*
#{if (!model_isLast) && ((model_index-1) % 10) == 9}
</div>
<div>
#{/if}
#{/list}
</div>

/* In your CSS */
.column {
width: 60px;
}

You may also want to look at CSS frameworks like blueprint or 1kbgrid
(http://www.1kbgrid.com/)

[Julien Richard-Foy]

Obviously, I forgot to write the content of the model in the <span></
span>, in my previous post… So you should read :

<span class="column">${model.myContent}</span>