django的template中html根据view中的函数传来的列表或者字典生成表格

spam_list.html内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>被拦截邮件详细信息</title>
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">-->
    <!--<script type="text/javascript" src="js/jquery-3.2.1.js"></script>-->
    <!--<script type="text/javascript" src="js/bootstrap.11js"></script>-->
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <style>
        .center{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="center"><h2>被拦截的邮件详细信息</h2></div>
<div class="bs-example" data-example-id="simple-table">
    <script>
        window.onload = function () {
            var datanav = {{ mail_detail_list |safe }};
            var tb = document.getElementById("tb");
            for (var i = 0; i < datanav.length; i++) {
                var row = tb.insertRow(tb.rows.length);
            var c1 = row.insertCell(0);
            c1.innerHTML = i+1; //编号
            var c2 = row.insertCell(1);
            c2.innerHTML = datanav[i].time;
            var c3 = row.insertCell(2);
            c3.innerHTML = datanav[i].title;
            var c4 = row.insertCell(3);
            c4.innerHTML = datanav[i].sender;
            var c5 = row.insertCell(4);
            c5.innerHTML = datanav[i].send;
            var c6 = row.insertCell(5);
            c6.innerHTML = datanav[i].delete;
        }
    }
    </script>


    <table class="table" id="tb">
      <!--<caption font-size="500">被拦截的邮件详细信息</caption>-->
      <thead>
        <tr>
          <th>编号</th>
          <th>时间</th>
          <th>标题</th>
          <th>发件人</th>
          <th>发送或者删除</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
</div>
</body>
</html>

需要在给delete和send加上超链接
view函数中的mail_detail_list 如下：

    mail_detail_list =[
    { "time": "2017-05-16 18:11",
    'title':"测试邮件111【外域邮件.谨慎查阅】",
    "sender":"417556551@qq.com",
    "send":1,
    "delete":0,
    },
        { "time": "2017-05-16 18:11",
    'title':"测试邮件111【外域邮件.谨慎查阅】",
    "sender":"417556551@qq.com",
    "send":1,
    "delete":0,
    },
　　]

参考链接：

https://zhidao.baidu.com/question/572475780.html

http://code.ziqiangxuetang.com/django/django-json-templates.html

posted @ 2017-05-17 12:16  番茄土豆西红柿  阅读(345)  评论(0)    收藏  举报
TOP