pure & tornado -- table

环境:

1. tornado的template

2.yui/pure文档 http://purecss.io/tables/

使用:

handler代码    handlers/table.py

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>


以下是运行效果

pure & tornado -- table

你可能感兴趣的:(tornado,Pure)