pure & tornado -- table

環境:css

1. tornado的template
html

2.yui/pure文檔 http://purecss.io/tables/python

使用:web

handler代碼    handlers/table.py
tornado

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # 存放表頭的
        header_field = ["#", "XX", "YY", "ZZ"]
        # 存放表內容的
        ctx_field = [["1", "aa", "bb", "cc"], ["2", "dd", "ee", "ff"], ["3", "gg", "hh", "ii"]]
        
        self.render("table.html", header_field=header_field, ctx_field=ctx_field)

template代碼    templates/table.html測試

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>測試 pure table</title>
        <link rel="stylesheet" href="/static/css/pure/tables.css" />
    </head>
    <body>
        <table class="pure-table">
            <thead>
                <tr>
                    {% for elem in header_field %}
                        {% block elem %}
                            <th> {{ escape(elem) }}</th>
                        {% end %}
                    {% end %}
                </tr>
            </thead>
        
            <tbody>
                {% for idx in xrange(len(ctx_field)) %}
                    {% block idx %}
                        {% if idx % 2 == 0 %}
                            <tr class="pure-table-odd">
                        {% else %}
                            <tr>
                        {% end %}
                        {% for elem in ctx_field[idx] %}
                            {% block elem %}
                                <td> {{ escape(elem) }}</td>
                            {% end %}
                        {% end %}
                            </tr>
                    {% end %}
                {% end %}
            </tbody>
        </table>
    </body>
</html>


如下是運行效果ui

相關文章
相關標籤/搜索