捕鱼老版本

書名： Lift Application Development Cookbook
作者名： Gilberto T. Garcia Jr.
本章字數： 635字
更新時間： 2021-08-04 10:05:44

Creating an HTML table with dynamically defined columns

We often need to display tabular data while building websites. Sometimes we know beforehand all of the columns we will need to display, but sometimes we don't.

Handling tabular data with dynamically defined columns is a bit harder than handling data with a fixed number of columns because you will need to dynamically render the columns and the rows. On the other hand, when dealing with a fixed number of columns, you need to render just the rows.

I chose to work with dynamically defined columns for two reasons. First, it is more complex, and secondly, once you learn how to deal with dynamically defined columns, you will be able to work on the simpler case; that is, fixed columns.

Getting ready

First, we are going to create the HTML table. It's regular HTML—meaning that it has no special tags or any markup that is not HTML markup—with a thead section to hold the column headers and a tbody section to hold the data, and of course, it will invoke a Lift snippet.

Create a new project.

Create a table as follows:

<table data-lift="Table.dynamic">
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

How to do it...

The snippet structure should look familiar to you at this point, but there are a couple of things to learn. Let's check what the code looks like and then we'll see how it does its magic.

Create a snippet with the following code:

import net.liftweb.util.Helpers._
object Table {
  def dynamic = {
    val headers = (1 to 10)
    // creates a 10 x 10 matrix
    val table = headers.map(n => (1 to 10).map(in => n * in))
    
    "th *" #> headers
    &
    "tbody tr *"*" #> table.map {
      r => {
        "td *" #> r
      }
    }
  }
}

Start the app and access http://localhost:8080. You should see a screen similar to the one in the following screenshot:

How it works...

There is nothing new in the HTML, just the call to the snippet using the data-lift notation, and we were still able to create a table with a dynamic number of columns and rows. This is amazing and shows how powerful CSS selectors are.

All the magic happens in the snippet, so let's take a look at it. As far as one can tell, it's a regular snippet with no super powers, and this is the case indeed.

There are two things that made this task feasible. The first one is the & operator which lets us perform chain binding operations. In this case, we chained together the th and tbody bindings. The second is the nesting of bindings. If you take a closer look at the tbody binding, you'll see that we first bound the tr tags and in this binding we created another one for the td tags.

So, what we are doing here is telling Lift to create a table's header columns with the th binding, just as we did for the list in the previous recipe; each element of the collection headers will generate a th tag. Then, using the same technique, we told Lift to create a row for each element of the table collection. But, each element of the table collection is another collection. Look at the following figure, and you will see why we nest another bind inside the tr binding. The nested binding uses the same technique as the previous binds, th and tr. So, it will create a list of td elements.

This is how we were able to create a table with both columns and rows dynamically defined.

官术网_书友最值得收藏!

Creating an HTML table with dynamically defined columns

Getting ready

How to do it...

How it works...

See also

官术网_书友最值得收藏!

Lift Application Development Cookbook

Creating an HTML table with dynamically defined columns

Getting ready

How to do it...

How it works...

See also