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

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.

  1. Create a new project.
  2. 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.

  1. 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
          }
        }
      }
    }
  2. 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.

See also

主站蜘蛛池模板: 伊金霍洛旗| 江华| 临泉县| 宁明县| 临邑县| 毕节市| 调兵山市| 阳曲县| 杭锦后旗| 中超| 桑植县| 武山县| 漠河县| 赣榆县| 余姚市| 武乡县| 迁安市| 新余市| 本溪| 光山县| 仪陇县| 九江县| 桃源县| 贵阳市| 海南省| 深圳市| 泰来县| 铜山县| 海城市| 娱乐| 包头市| 双流县| 儋州市| 新余市| 论坛| 陵水| 邻水| 大埔区| 乌兰县| 南漳县| 呼和浩特市|