Django之模板系統

時間  2019-11-10
標籤 django 模板 系統 欄目 Python 简体版
原文   原文鏈接

前言

來看一段代碼javascript

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

直接把HTML頁面嵌套在視圖函數裏返回給瀏覽器並非一個好主意；php

緣由：css

一、對頁面設計進行的任何改變都必須對 Python 代碼進行相應的修改，牽一髮而動全身；html

二、Python 代碼編寫和 HTML 設計是兩項不一樣的工做，前端開發和後端開發無非 並行；前端

基於這些緣由，將HTML頁面的設計和後端邏輯設計分離，會更簡潔、容易維護開發咱們的WEB應用。 咱們可使用 Django的 模板系統 (Template System)來實現這種模式，這就是本章要具體討論的問題。   java

 

模板是什麼？                                jquery

Django自帶的模板語言=  HTML代碼＋邏輯控制代碼，注意 模板 ！= HTML，模塊 =HTML代碼＋邏輯控制代碼（特殊標記）；web

 

模板做用？ajax

在server端 把後端的變量 嵌入到HTML中渲染後，返回給瀏覽器來達到先後端代碼分離，頁面動態顯示的目的；redis

 

1、Django模板語言應用：

Django模板語言的語法主要分爲2種： {{變量}}    和   {%  Tag %} ，{{變量 }}主要用於和視圖變量作替換，{% tag %}主要用於作邏輯判斷和實現某些功能，正因有了數據+邏輯才構成了模板語言；

 

1.一、使用雙大括號引用視圖中的變量

語法：{{ 變量}} ，列表取值：{{列表}}. 索引， 字典取值：{{字典}}.鍵

                   <td>{{ forloop.counter }}</td>
                    <td>{{ book.title }}</td>
                    <td>{{ book.price }}</td>
                    <td>{{ book.date}}</td>
                    <td>{{ book.publish}}</td>
                    <td>{{ book.author }}</td>
View Code

** {{ forloop.counter }} 渲染循環的次數

View Code

 

1.2:內置變量過濾器的使用

若是引用得視圖變量，不能直接渲染使用，能夠藉助fifter進行數據的二次處理，就像Python中的內置函數；

語法：{{ 變量|fifter:參數 }}

過濾器列表：

  1. add：給變量加上相應的值、
  2. addslashes :單引號加上轉義號，通常用於輸出到javascript中
  3. capfirst ：第一個字母大寫
  4. {{ "123spam456spam789"|cut:"spam" }}查找刪除指定的字符串
  5. {{ l1|slice:":2" }} 列表切邊
  6. {{ t|date:'Y-m-d' }} 轉換特定時間格式
  7. {{ s|default:'空空如也' }} 值不存在，使用指定值
  8. {{ info|truncatechars:18 }} 渲染指定長度的字符
  9. {{ info1|truncatewords:9 }}渲染指定長度的單詞
  10. {{ a|safe }} 聲明安全能夠渲染
  11. {% if forloop.counter|divisibleby:2 %} 整除

實例

視圖

from django.shortcuts import render
import datetime
def fifters(request):
    i=10
    w="A'B'C'D'E"
    f='china'
    t=datetime.datetime.now()
    s=''
    l1=[98890,765,9870,7654]
    info='嘲笑我吧大家這些毫無眼光的人，我必將引來雷霆萬鈞的力量，摧古拉朽得打敗一切敵人！'
    info1='You laugh at me without the vision of people, and I will lead to an irresistible force power, corruption must defeat all enemies destroy gura!'
    li=['a','b','c','d','e','f','g']
    str1='{{hello world}}'
    a='<a href="黃色網址">點擊我</a>'
    fhjsaldfhjsdfhlasdfhljsdal='hellow  world'
    return render(request,'modals.html',locals())
View Code

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板渲染</title>
</head>
<body>

 <p>{{ i|add:200 }}</p>
 <p>{{ w|addslashes}}</p>
 <p>{{ f|capfirst }}</p>
<p>{{ "123spam456spam789"|cut:"spam" }}</p>
  <p>{{ t|date:'Y-m-d'  }}</p>
  <p>{{ l1|slice:":2" }}</p>
 <p>{{ s|default:'空空如也' }}</p>
 <p>{{ info|truncatechars:18 }}</p>
  <p>{{ info1|truncatewords:9 }}</p>
  <p>
  {% csrf_token%}
  {% for foo in li %}
      <li>{{ forloop.counter0 }}----->{{ foo }}</li>
  {% empty  %}
      <li>沒有符合的對象</li>
  {% endfor %}

 </p>
 <p>
  {% verbatim %}
  {{ str1 }}
  {% endverbatim %}
 </p>


  <p>
      {% with total=fhjsaldfhjsdfhlasdfhljsdal %}
      {{ total }}
      {% endwith %}
  </p>

  <p>{{ a|safe }}</p>
</body>
</html>

更多參考：豆瓣：https://www.douban.com/note/145065606/，袁浩：http://www.cnblogs.com/sss4/p/7071183.html
View Code

 

2.一、內置標籤（tag）的使用

若是引用到了視圖中的變量，還不足以渲染出一個完美的頁面，那就要藉助tag標籤，作邏輯控制和功能完善了；

語法格式: {% tags %}

{% for %}  {% endfor %}   for循環

{% for row in list %}
       </tr>
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.title }}</td>
          <td><a href="#" onclick="show_modal(this)">添加</a></td>
          <td id="del_s"><a href="#" onclick="modal_del(this)">刪除</a> </td>
          <td><a href="#"onclick="modal_edit(this)">編輯</a></td>
         </tr>

     {% endfor %}
View Code


{% if %}{% endfor %} if判斷

<select name="class_id" id="">
         {% for row in dict %}
             {% if row.id == name1.class_id %}
                <option selected value="{{ row.id }}">{{ row.title}}</option>
             {%else%}
                 <option value="{{ row.id }}">{{ row.title}}</option>
             {%endif%}
         {% endfor %}
     </select>
View Code


{% if row.id in cids%}  in 成員關係判斷

 <p>任教課程：
            <select name="class_id" multiple size="5">
                {% for row in clas %}
                    {% if row.id in cids%}
                            <option selected value={{ row.id}}>{{ row.title}}</option>
                    {%else%}
                             <option value={{ row.id}}>{{ row.title}}</option>
                    {% endif %}
                {% endfor %}
            </select>
         </p>
View Code

 

{% empty %}   沒有渲染到數據，提示。

 {% for foo in li %}
      <li>{{ forloop.counter0 }}----->{{ foo }}</li>
  {% empty  %}
      <li>沒有符合的對象</li>
  {% endfor %}
View Code

 

{% verbatim %}{% endverbatim %} 禁止渲染

視圖
str1='{{hello world}}'
模板
  {% verbatim %}
  {{ str1 }}
  {% endverbatim %}
View Code

 

{% csrf_token %}

用於生成csrf_token的標籤，用於防治跨站攻擊驗證（csrf）。 其實，這裏是會生成一個input標籤，和其餘表單標籤一塊兒提交給後臺的。

 

{% url %}  引用路由分配系統配置的 path 別名

<form action="{% url "bieming"%}" >
          <input type="text">
          <input type="submit"value="提交">
          {%csrf_token%}
</form>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>{{args}}</p>
<p>{% url "zhangge" i i1%}</p>
</body>
</html>
View Code

 

{% with %} {% endwith %}  用更簡單的變量名 替代視圖複雜的變量名

fhjsaldfhjsdfhlasdfhljsdal='hellow  world'

把後端複雜的變量名，轉換得更加簡單；
<p>
      {% with total=fhjsaldfhjsdfhlasdfhljsdal %}
      {{ total }}
      {% endwith %}
  </p>
View Code

 

在標籤裏添加reversed來反序循環列表

  {% for log in logs reversed %}
                        {% if forloop.counter|divisibleby:2 %}
                            <dl>
                                <dd class="pos-right clearfix">
                                    <div class="circ"></div> <!--圓圈-->
                                    <div class="time"><p>{{ log.update_time }}</p></div> <!--時間-->

                                    <div class="events">
                                        <div class="events-header">
                                            <p>{{ log.details }}</p>
                                        </div>

                                        <div class="events-footer">
                                            <span>{{ log.verbose_content }}</span>
                                        </div>
                                    </div>    <!--內容 -->

                                </dd>

                            </dl> <!--經過設置class="pos-方向clearfix" -->
                        {% else %}
View Code

 

 

 

 

2、自定義fifter和simp-tag

模板語言自帶的tag和過濾器，在某些狀況下還不能知足個人功能需求，例如沒法實現遞歸顯示需求等，能夠自定義fifter和tag；就像Python內置函數和自定義函數關係；

一、在app中建立 templatetags目錄或Python包（注意  該報的名稱必須爲 templatetags）

 

 

 

二、templatetags文件夾下隨便建立個Python文件,自定義函數；

from django import template

register=template.Library() 
@register.filter   #自定義fifter 就使用 fifter裝飾器
def mutil(x,y):
    return x*y

@register.simple_tag   #自定義tag 就使用 simlep_tag裝飾器
def mutil2(x,y,z):
    return x*y*z
View Code

 

三、註冊到setings.py文件裏

 

四、加載到模板裏

{% load mytag %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板渲染</title>
</head>
View Code

 

 五、引用到模板

a.

  {{ i| mutil:10 }}      #自定義fifter的使用
  {% mutil2 78 90 20 %}  #自定義tag的使用

 

b.注意引用到 母版繼承的模板

{% extends "arya/layout.html" %}
{% load Count %} #------------------》注意在子模板的 extends之下。 
{% block content %}

 

 

 

六、自定義fifter和simp-tag 區別

一、simple-fifter

優勢：支持iif else 條件判斷

 {% if  i|mutil:20 > 100 %}
     <p>大於</p>
 {% else %} }}
     <p>小於</p>
 {% endif %}

缺點：simple-fifter類型的函數只支持2兩個參數

二、simple-tag

優勢：simple-fifter類型 無限制傳參

{% mutil2 78 90 20 %} #參數無限制

 

缺點：不支持iif else 條件判斷

 

 

3、母版繼承

在整個網站中，如何減小共用頁面區域（好比站點導航）所引發的重複和冗餘代碼？Django 解決此類問題的首選方法是使用一種優雅的策略—— 模板繼承 。

本質上來講，模板繼承就是先構造一個基礎框架模板，然後在其子模板中對它所包含站點公用部分和定義塊進行重載。

子模板  繼承、重寫  母板的block內容；

 

一、母版定義block塊：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後臺佈局</title>
    <style>
        .header{
            width: 100%;
            height: 48px;
            background-color: blue;
            position: fixed;
            top: 0px;
            left: 0px;
        }

        .left{
            width: 200px;
            background-color: mediumvioletred;
            position: fixed;
            top: 48px;
            left: 0px;
            bottom: 0px;
        }
        {#            要想設置長度沾滿屏，就設置position: fixed ，bottom: 0px;#}
        .right{
            background-color: pink;
            position: fixed;
            top: 48px;
            left: 200px;
            bottom: 0px;
            right: 0px;
            overflow: scroll;
        }
        .title li{
            margin-top: 80px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="header"></div>
    <div class="left">
        <ul class="title" style="list-style-type:none">
            <li><a href="/menu1/">菜單1</a></li>
            <li><a href="/menu2/">菜單2</a></li>
            <li><a href="/menu3/">菜單3</a></li>
        </ul>
    </div>
    <div class="right">
     {% block con %}          
     {% endblock %}
    </div>
</div>
</body>
</html>
View Code

二、子版繼承母版中 block

{% extends 'base.html' %}
{% block con %}
<h1>菜單{{ id }}</h1>
<h1>菜單{{ id }}</h1>
<h1>菜單{{ id }}</h1>
<h1>菜單{{ id }}</h1>
<h1>菜單{{ id }}</h1>
<h1>菜單{{ id }}</h1>  
{% endblock %}
View Code

 

擴展：

模板的CSS樣式和JS代碼不徹底是子版想要繼承的怎麼辦？

模板的定義的block越多越好，這樣就能夠多處重寫母版樣式；

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>後臺佈局</title>
    <style>
        .header{
            width: 100%;
            height: 48px;
            background-color: blue;
            position: fixed;
            top: 0px;
            left: 0px;
        }

        .left{
            width: 200px;
            background-color: mediumvioletred;
            position: fixed;
            top: 48px;
            left: 0px;
            bottom: 0px;
        }
        {#            要想設置長度沾滿屏，就設置position: fixed ，bottom: 0px;#}
        .right{
            background-color: pink;
            position: fixed;
            top: 48px;
            left: 200px;
            bottom: 0px;
            right: 0px;
            overflow: scroll;
        }
        .title li{
            margin-top: 80px;
        }
    </style>
     {% block  css1 %}

     {% endblock %}

</head>
<body>
<div class="content">
    <div class="header"></div>
    <div class="left">
        <ul class="title" style="list-style-type:none">
            <li><a href="/menu1/">菜單1</a></li>
            <li><a href="/menu2/">菜單2</a></li>
            <li><a href="/menu3/">菜單3</a></li>
        </ul>
    </div>
    <div class="right">
     {% block con %}
{#          #這樣子版就能夠重寫母版的CSS樣式了，重載JavaScript亦是如此！#}
     {% endblock %}
    </div>
</div>
</body>
</html>
View Code

 

例如：

1.先建立一個base.htm 用來引入站點都要用到的 jQuery、bootstrap；

2.head設置 outside_css、outside_js塊讓其餘模板引入外部文件；

3.body設置content塊讓其餘模板嵌套內容；

4.button the body and the html中間設置 inside塊讓用戶擴展本身的JavaScript代碼；

 

這麼作的好處： 能夠減小代碼冗餘、提高代碼重用性、減小外部JavaScript文件的反覆引入耗時，也能夠分門別類的管理外部引入文件，避免引入外部文件過多時。容易出現的引入新文件不生效、生效了頁面顯示錯誤......這些頭使人頭疼的問題；

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>運維管理平臺-面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8"/>

    <!-- jQuery相關開始 注意不要在全局再次引入jQuery -->
    <script src="/static/assets/js/jquery.js"></script>
    <!-- jQuery相關結束 -->

    <!-- bootstarp相關開 -->
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <!-- bootstarp相關結束-->


    <!-- redis可視化相關開始-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css">
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="/static/pligin/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="/static/pligin/jquery-validation-1.14.0/dist/additional-methods.min.js"></script>
    <script src="/static/pligin/jquery-validation-1.14.0/dist/localization/messages_zh.min.js"></script>
    <script src="/static/pligin/jquery.form.min.js"></script>
    <!-- redis可視化相關結束-->


    <link href="/static/assets/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/assets/css/vendor/animate/animate.min.css">
    <link type="text/css" rel="stylesheet" media="all" href="/static/assets/js/vendor/mmenu/css/jquery.mmenu.all.css"/>
    <link rel="stylesheet" href="/static/assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="/static/assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="/static/assets/js/vendor/rickshaw/css/rickshaw.min.css">
    <link rel="stylesheet" href="/static/assets/js/vendor/morris/css/morris.css">
    <link rel="stylesheet" href="/static/assets/js/vendor/tabdrop/css/tabdrop.css">
    <link rel="stylesheet" href="/static/assets/js/vendor/summernote/css/summernote.css">
    <link rel="stylesheet" href="/static/assets/js/vendor/summernote/css/summernote-bs3.css">
    <link rel="stylesheet" href="/static/assets/js/vendor/chosen/css/chosen.min.css">


    <link href="/static/assets/css/minimal.css" rel="stylesheet">
    <style>
        #weixin {
            margin-top: 10%;
            text-align: center;

        }

        #weixin1 {
            width: 120px;
            height: 120px;
        }

        #weixin2 {

        }

        <!--
        頭像選擇開始

        -->
        .my_box {
            width: 75px;
            height: 75px;
            overflow: hidden;
            border-radius: 15px;
            border: 1px solid #ccc;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition: .6s;
            cursor: pointer;
        }

        .my_box:hover {
            animation: my_box 0.5s forwards;
            transition: .5s;
        }

        @keyframes my_box {
            form {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .my_box img {
            width: 100%;
        }

        .xiantiao {
            display: block;
            width: 86%;
            height: 1px;
            border-bottom: 1px solid #ccc;
            margin: 0 auto;
        }

        .pic_box {
            width: 609px;
            min-height: 673px;
            height: auto;
            border-radius: 8px;
            background: #fff;
            border: 1px solid #ccc;
            position: fixed;
            top: -1000px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .header {
            height: 45px;
            text-align: center;
        }

        .close {
            color: #000;
            font-size: 21px;
            line-height: 1;
            text-shadow: 0 1px 0 #fff;
            opacity: .2;
            position: absolute;
            right: 8px;
            top: 2px;
            cursor: pointer;
        }

        .pic_box ul {
            padding: 0;
            margin: 0;
            width: 96%;
            height: 511px;
            margin: 10px auto;
        }

        .pic_box ul li {
            display: block;
            list-style: none;
            width: 61px;
            height: 61px;
            float: left;
            border-radius: 15%;
            border: 1px solid #ccc;
            margin: 5px 5px;
            transition: .6s;
            cursor: pointer;
            overflow: hidden;
        }

        .pic_box ul li:hover {
            transform: scale(1.15);
            transition: .5s;
        }

        .pic_box ul li img {
            width: 100%;
        }

        .bt_box {
            width: 100%;
            text-align: center;
            font-size: 14px;
            margin-top: 30px;
        }

        .bt_box .gb {
            display: inline-block;
            width: 120px;
            height: 35px;
            border-radius: 8px;
            background: #f3f3f3;
            color: #444;
            line-height: 35px;
        }

        .bt_box .queren {
            display: inline-block;
            width: 120px;
            height: 35px;
            border-radius: 8px;
            background: #4B8BF5;
            color: #fff;
            line-height: 35px;
        }

        @import url("https://fonts.googleapis.com/css?family=Lato");

        *,
        *:before,
        *:after { /* Slow, yes I know :) */
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }


    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->


    {% block  out_css %}

    {% endblock %}

    {% block out_js %}

    {% endblock %}

</head>


{% block body %}
    your body content
{% endblock %}

{% block in_js %}
{% endblock %}
</html>
base.html 
{% extends 'base.html' %}
{% load menu %}
{% load rbac %}
{% load Count %}


{% block body %}
    <body class="bg-3">


    <!-- 預加載 -->
    <div class="mask">
        <div id="loader"></div>
    </div>
    <!--預加載 -->

    <!-- 這裏包裝全部頁面內容 -->
    <div id="wrap">

        <!-- Make page fluid -->
        <div class="row">


            <!-- 固定導航欄 -->
            <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation"
                 id="navbar">

                <!-- 標題 -->
                <div class="navbar-header col-md-2">
                    <a class="navbar-brand" href="/login_first/">
                        <strong>ITGroupⅡ</strong>運維平臺
                    </a>
                    <div class="sidebar-collapse">
                        <a href="#">
                            <i class="fa fa-bars"></i>
                        </a>
                    </div>
                </div>
                <!-- 標題 end -->

                <!-- .nav-collapse -->
                <div class="navbar-collapse">

                    <!-- Page refresh -->
                    <ul class="nav navbar-nav refresh">
                        <li class="divided">
                            <a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
                        </li>
                    </ul>
                    <!-- /Page refresh -->

                    <!-- Search -->
                    <div class="search" id="main-search">
                        <form method='GET'>
                            <input type="text" name="q" value="{{ pw.q_value }}" placeholder="搜索"/>
                    </div>

                    <input type="submit" value="搜索" class="btn btn-warning btn-sm"/>

                    </form>
                    <!-- Search end -->


                    <!-- Quick Actions -->
                    <ul class="nav navbar-nav quick-actions">
                        <li class="dropdown divided">
                            <div>
                                <h4>值班人員：{{ request.session.user_info.username|WhoDutyOfficer }}
                                    聯繫電話：{{ request.session.user_info.username|WhoDutyPhoneOfficer }}</h4>
                            </div>
                        </li>
                        <li class="dropdown divided user" id="current-user">
                            <div class="profile-photo">
                                <div class="wrap">
                                    <a class="t"></a>
                                    <div class="my_box">
                                        <form id="uploadForm">
                                            <input class="jide" name="imgsrc" type="hidden" value=""/>
                                            <img src="{{ request.session.Avatar }}" class="my_pic"
                                                 style="width: 45px;height: 45px;overflow: hidden;border-radius: 50%"/>
                                        </form>
                                    </div>

                                    <div class="pic_box" id="pic_box">
                                        <div class="header">
                                            <p>設置頭像</p>
                                            <span class="close">x</span>
                                        </div>
                                        <span class="xiantiao"></span>
                                        <ul>
                                            <li><img src="/static/img/touxiang/0.png"/></li>
                                            <li><img src="/static/img/touxiang/1.png"/></li>
                                            <li><img src="/static/img/touxiang/3.png"/></li>
                                            <li><img src="/static/img/touxiang/4.png"/></li>
                                            <li><img src="/static/img/touxiang/5.png"/></li>
                                            <li><img src="/static/img/touxiang/6.png"/></li>
                                            <li><img src="/static/img/touxiang/7.png"/></li>


                                        </ul>
                                        <div class="bt_box">
                                            <a class="gb" href="javascript:">關閉</a>
                                            <a class="queren" href="javascript:">保存頭像</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <a class="dropdown-toggle options" data-toggle="dropdown" href="#">
                                {{ request.session.user_info.username }} <i class="fa fa-caret-down"></i>
                            </a>

                            <ul class="dropdown-menu arrow settings">

                                <li>

                                    <h3>背景色:</h3>
                                    <ul id="color-schemes">
                                        <li><a href="#" class="bg-1"></a></li>
                                        <li><a href="#" class="bg-2"></a></li>
                                        <li><a href="#" class="bg-3"></a></li>
                                        <li><a href="#" class="bg-4"></a></li>
                                        <li><a href="#" class="bg-5"></a></li>
                                        <li><a href="#" class="bg-6"></a></li>
                                    </ul>


                                </li>


                                <li>
                                    <a href="/login_first/changepwd/"><i class="fa fa-user"></i> 修改密碼</a>
                                </li>

                                <li>
                                    <a href="/login"><i class="fa fa-power-off"></i> 退出</a>
                                </li>
                            </ul>
                        </li>

                        <li>
                            <a href="#mmenu"><i class="fa fa-comments"></i></a>
                        </li>
                    </ul>
                    <!-- /Quick Actions -->
                    <ul class="">
                        <li class="dropdown divided">
                            <div class="box">
                                <div class="t_news">
                                    <ul class="news_li" id="liliok">
                                    </ul>
                                    <ul class="swap"></ul>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <!-- 左側菜單 -->
                    <ul class="nav navbar-nav side-nav" id="sidebar">

                        <li class="collapsed-content">
                            <ul>
                                <li class="search"><!-- Collapsed search pasting here at 768px --></li>
                            </ul>
                        </li>

                        <li class="navigation" id="navigation">
                            <a href="#" class="sidebar-toggle" data-toggle="#navigation">導航 <i
                                    class="fa fa-angle-up"></i></a>

                            <ul class="menu">

                                <li class="active">
                                    <a href="/login_first/">
                                        <i class="fa fa-tachometer"></i> 首頁
                                        {#                      <span class="badge badge-red">1</span>#}
                                    </a>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-list"></i> 主機管理 <b class="fa fa-plus dropdown-plus"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/arya/cmdb/hosts/">
                                                <i class="fa fa-caret-right"></i> 主機列表
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/cmdb/hosts/add/">
                                                <i class="fa fa-caret-right"></i> 新增主機
                                            </a>
                                        </li>

                                        <li>
                                            <a href="/multitask/command/">
                                                <i class="fa fa-caret-right"></i> 命令執行
                                            </a>
                                        </li>

                                        <li>
                                            <a href="/multitask/transfer_files/">
                                                <i class="fa fa-caret-right"></i> 文件上傳
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-list"></i> 監控管理 <b class="fa fa-plus dropdown-plus"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/arya/cmdb/zabbixmsg/">
                                                <i class="fa fa-caret-right"></i> 監控列表
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/cmdb/zabbixmsg/add/">
                                                <i class="fa fa-caret-right"></i> 添加監控
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-list"></i> 工單管理 <b class="fa fa-plus dropdown-plus"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/arya/cmdb/worker_order/">
                                                <i class="fa fa-caret-right"></i> 工單列表
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/cmdb/worker_order/?selected_info=alarm_info">
                                                <i class="fa fa-caret-right"></i> 報警列表
                                            </a>

                                        </li>

                                        <li>
                                            <a href="/arya/cmdb/track_work/">
                                                <i class="fa fa-caret-right"></i> 跟進工單
                                            </a>

                                        </li>

                                        <li>
                                            <a href="/arya/cmdb/worker_order/active_creation/">
                                                <i class="fa fa-caret-right"></i> 建立工單
                                            </a>
                                        </li>
                                    </ul>
                                </li>


                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-list"></i> DB可視化 <b class="fa fa-plus dropdown-plus"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/DBshow/redisIndex/">
                                                <i class="fa fa-caret-right"></i> redis可視化
                                            </a>
                                        </li>

                                    </ul>
                                </li>


                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-list"></i> 圖表管理 <b class="fa fa-plus dropdown-plus"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/chart/">
                                                <i class="fa fa-caret-right"></i> 圖表預覽
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/chartdown/">
                                                <i class="fa fa-caret-right"></i> 圖表導出
                                            </a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-list"></i> 權限管理 <b class="fa fa-plus dropdown-plus"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/arya/cmdb/userinfo/">
                                                <i class="fa fa-caret-right"></i> 人員列表
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/rbac/menu/">
                                                <i class="fa fa-caret-right"></i> 菜單權限
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/rbac/group/">
                                                <i class="fa fa-caret-right"></i> 分組權限
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/rbac/user/">
                                                <i class="fa fa-caret-right"></i> 用戶權限
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/rbac/role/">
                                                <i class="fa fa-caret-right"></i> 角色權限
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/arya/rbac/permission/">
                                                <i class="fa fa-caret-right"></i> URL權限
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                            </ul>
                        </li>


                        <li class="settings" id="general-settings">
                            <a href="#" class="sidebar-toggle underline" data-toggle="#general-settings">General
                                Settings <i
                                        class="fa fa-angle-up"></i></a>

                            <div id="weixin">
                                <h4 id="weixin2"><strong>關注運維平臺</strong></h4>
                                <img src="/static/img/qrcode_258.png.jpeg" alt="" id="weixin1">
                            </div>
                </div>


            </div>
            <!-- Fixed navbar end -->

            <!-- Page content -->
            <div id="content" class="col-md-12">


                <!-- content main container -->
                <div class="main">

                    {% block content %}
                    {% endblock %}
                </div>
            </div>


            <!-- 右側縮進框-->
            <div id="mmenu" class="right-panel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a href="#mmenu-users" data-toggle="tab"><i class="fa fa-users"></i></a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="mmenu-users">
                        <h5><strong>Online</strong> Users</h5>

                        <ul class="users-list">

                            <li class="online">
                                <div class="media">
                                    <a class="pull-left profile-photo" href="#">
                                        <img class="media-object" src="/static/img/moren.jpg"
                                             style="width: 45px;height: 45px;overflow: hidden">
                                    </a>
                                    <div class="media-body">
                                        <h6 class="media-heading">
                                            <strong>{{ request.session.user_info.username }}</strong>
                                        </h6>
                                        <small><i class="fa fa-map-marker"></i> China, beijing</small>
                                        <span class="badge badge-outline status"></span>
                                    </div>
                                </div>
                            </li>

                        </ul>

                        <h5><strong>All</strong> Users</h5>

                        <ul class="users-list">
                            {% for user in userlist %}

                                <li class="offline">
                                    <div class="media">
                                        <a class="pull-left profile-photo" href="#">
                                            <img class="media-object" src="/static/img/moren.jpg"
                                                 style="width: 45px;height: 45px;overflow: hidden">
                                        </a>
                                        <div class="media-body">
                                            <h6 class="media-heading"><strong>{{ user.username }}</strong></h6>
                                            <small><i class="fa fa-map-marker"></i> China, beijing</small>
                                            <span class="badge badge-outline status"></span>
                                        </div>
                                    </div>
                                </li>

                            {% endfor %}
                        </ul>

                    </div>


                </div><!-- tab-content -->
            </div>


            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


            <!-- Include all compiled plugins (below), or include individual files as needed -->

            <script type="text/javascript" src="/static/assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
            <script type="text/javascript" src="/static/assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
            <script type="text/javascript" src="/static/assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
            <script type="text/javascript"
                    src="/static/assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
            <script type="text/javascript"
                    src="/static/assets/js/vendor/videobackground/jquery.videobackground.js"></script>
            <script type="text/javascript" src="/static/assets/js/vendor/blockui/jquery.blockUI.js"></script>

            <script src="/static/assets/js/vendor/flot/jquery.flot.min.js"></script>
            <script src="/static/assets/js/vendor/flot/jquery.flot.time.min.js"></script>
            <script src="/static/assets/js/vendor/flot/jquery.flot.selection.min.js"></script>
            <script src="/static/assets/js/vendor/flot/jquery.flot.animator.min.js"></script>
            <script src="/static/assets/js/vendor/flot/jquery.flot.orderBars.js"></script>
            <script src="/static/assets/js/vendor/easypiechart/jquery.easypiechart.min.js"></script>

            <script src="/static/assets/js/vendor/rickshaw/raphael-min.js"></script>
            <script src="/static/assets/js/vendor/rickshaw/d3.v2.js"></script>
            <script src="/static/assets/js/vendor/rickshaw/rickshaw.min.js"></script>

            <script src="/static/assets/js/vendor/morris/morris.min.js"></script>

            <script src="/static/assets/js/vendor/tabdrop/bootstrap-tabdrop.min.js"></script>

            <script src="/static/assets/js/vendor/summernote/summernote.min.js"></script>


            <script src="/static/assets/js/minimal.min.js"></script>

            <link rel="stylesheet" href="/static/jq22.css">
            <script src="/static/jq22.js"></script>


            <script>
                $(function () {

                    // Initialize card flip
                    $('.card.hover').hover(function () {
                        $(this).addClass('flip');
                    }, function () {
                        $(this).removeClass('flip');
                    });

                    // Initialize flot chart
                    var d1 = [[1, 715],
                        [2, 985],
                        [3, 1525],
                        [4, 1254],
                        [5, 1861],
                        [6, 2621],
                        [7, 1987],
                        [8, 2136],
                        [9, 2364],
                        [10, 2851],
                        [11, 1546],
                        [12, 2541]
                    ];
                    var d2 = [[1, 463],
                        [2, 578],
                        [3, 327],
                        [4, 984],
                        [5, 1268],
                        [6, 1684],
                        [7, 1425],
                        [8, 1233],
                        [9, 1354],
                        [10, 1200],
                        [11, 1260],
                        [12, 1320]
                    ];
                    var months = ["January", "February", "March", "April", "May", "Juny", "July", "August", "September", "October", "November", "December"];

                    // flot chart generate
                    var plot = $.plotAnimator($("#statistics-chart"),
                        [
                            {
                                label: 'Sales',
                                data: d1,
                                lines: {lineWidth: 3},
                                shadowSize: 0,
                                color: '#ffffff'
                            },
                            {
                                label: "Visits",
                                data: d2,
                                animator: {steps: 99, duration: 500, start: 200, direction: "right"},
                                lines: {
                                    fill: .15,
                                    lineWidth: 0
                                },
                                color: ['#ffffff']
                            }, {
                            label: 'Sales',
                            data: d1,
                            points: {show: true, fill: true, radius: 6, fillColor: "rgba(0,0,0,.5)", lineWidth: 2},
                            color: '#fff',
                            shadowSize: 0
                        },
                            {
                                label: "Visits",
                                data: d2,
                                points: {
                                    show: true,
                                    fill: true,
                                    radius: 6,
                                    fillColor: "rgba(255,255,255,.2)",
                                    lineWidth: 2
                                },
                                color: '#fff',
                                shadowSize: 0
                            }
                        ], {

                            xaxis: {

                                tickLength: 0,
                                tickDecimals: 0,
                                min: 1,
                                ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4, "APR"], [5, "MAY"], [6, "JUN"], [7, "JUL"], [8, "AUG"], [9, "SEP"], [10, "OCT"], [11, "NOV"], [12, "DEC"]],

                                font: {
                                    lineHeight: 24,
                                    weight: "300",
                                    color: "#ffffff",
                                    size: 14
                                }
                            },

                            yaxis: {
                                ticks: 4,
                                tickDecimals: 0,
                                tickColor: "rgba(255,255,255,.3)",

                                font: {
                                    lineHeight: 13,
                                    weight: "300",
                                    color: "#ffffff"
                                }
                            },

                            grid: {
                                borderWidth: {
                                    top: 0,
                                    right: 0,
                                    bottom: 1,
                                    left: 1
                                },
                                borderColor: 'rgba(255,255,255,.3)',
                                margin: 0,
                                minBorderMargin: 0,
                                labelMargin: 20,
                                hoverable: true,
                                clickable: true,
                                mouseActiveRadius: 6
                            },

                            legend: {show: false}
                        });

                    $(window).resize(function () {
                        // redraw the graph in the correctly sized div
                        plot.resize();
                        plot.setupGrid();
                        plot.draw();
                    });

                    $('#mmenu').on(
                        "opened.mm",
                        function () {
                            // redraw the graph in the correctly sized div
                            plot.resize();
                            plot.setupGrid();
                            plot.draw();
                        }
                    );

                    $('#mmenu').on(
                        "closed.mm",
                        function () {
                            // redraw the graph in the correctly sized div
                            plot.resize();
                            plot.setupGrid();
                            plot.draw();
                        }
                    );

                    // tooltips showing
                    $("#statistics-chart").bind("plothover", function (event, pos, item) {
                        if (item) {
                            var x = item.datapoint[0],
                                y = item.datapoint[1];

                            $("#tooltip").html('<h1 style="color: #418bca">' + months[x - 1] + '</h1>' + '<strong>' + y + '</strong>' + ' ' + item.series.label)
                                .css({top: item.pageY - 30, left: item.pageX + 5})
                                .fadeIn(200);
                        } else {
                            $("#tooltip").hide();
                        }
                    });


                    //tooltips options
                    $("<div id='tooltip'></div>").css({
                        position: "absolute",
                        //display: "none",
                        padding: "10px 20px",
                        "background-color": "#ffffff",
                        "z-index": "99999"
                    }).appendTo("body");

                    //generate actual pie charts
                    $('.pie-chart').easyPieChart();


                    //server load rickshaw chart
                    var graph;

                    var seriesData = [[], []];
                    var random = new Rickshaw.Fixtures.RandomData(50);

                    for (var i = 0; i < 50; i++) {
                        random.addData(seriesData);
                    }

                    graph = new Rickshaw.Graph({
                        element: document.querySelector("#serverload-chart"),
                        height: 150,
                        renderer: 'area',
                        series: [
                            {
                                data: seriesData[0],
                                color: '#6e6e6e',
                                name: 'File Server'
                            }, {
                                data: seriesData[1],
                                color: '#fff',
                                name: 'Mail Server'
                            }
                        ]
                    });

                    var hoverDetail = new Rickshaw.Graph.HoverDetail({
                        graph: graph,
                    });

                    setInterval(function () {
                        random.removeData(seriesData);
                        random.addData(seriesData);
                        graph.update();

                    }, 1000);

                    // Morris donut chart
                    Morris.Donut({
                        element: 'browser-usage',
                        data: [
                            {label: "Chrome", value: 25},
                            {label: "Safari", value: 20},
                            {label: "Firefox", value: 15},
                            {label: "Opera", value: 5},
                            {label: "Internet Explorer", value: 10},
                            {label: "Other", value: 25}
                        ],
                        colors: ['#00a3d8', '#2fbbe8', '#72cae7', '#d9544f', '#ffc100', '#1693A5']
                    });

                    $('#browser-usage').find("path[stroke='#ffffff']").attr('stroke', 'rgba(0,0,0,0)');

                    //sparkline charts
                    $('#projectbar1').sparkline('html', {type: 'bar', barColor: '#22beef', barWidth: 4, height: 20});
                    $('#projectbar2').sparkline('html', {type: 'bar', barColor: '#cd97eb', barWidth: 4, height: 20});
                    $('#projectbar3').sparkline('html', {type: 'bar', barColor: '#a2d200', barWidth: 4, height: 20});
                    $('#projectbar4').sparkline('html', {type: 'bar', barColor: '#ffc100', barWidth: 4, height: 20});
                    $('#projectbar5').sparkline('html', {type: 'bar', barColor: '#ff4a43', barWidth: 4, height: 20});
                    $('#projectbar6').sparkline('html', {type: 'bar', barColor: '#a2d200', barWidth: 4, height: 20});

                    // sortable table
                    $('.table.table-sortable th.sortable').click(function () {
                        var o = $(this).hasClass('sort-asc') ? 'sort-desc' : 'sort-asc';
                        $('th.sortable').removeClass('sort-asc').removeClass('sort-desc');
                        $(this).addClass(o);
                    });

                    //todo's
                    $('#todolist li label').click(function () {
                        $(this).toggleClass('done');
                    });

                    // Initialize tabDrop
                    $('.tabdrop').tabdrop({text: '<i class="fa fa-th-list"></i>'});

                    //load wysiwyg editor
                    $('#quick-message-content').summernote({
                        toolbar: [
                            //['style', ['style']], // no style button
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                            ['fontsize', ['fontsize']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['height', ['height']],
                            //['insert', ['picture', 'link']], // no insert buttons
                            //['table', ['table']], // no table button
                            //['help', ['help']] //no help button
                        ],
                        height: 143   //set editable area's height
                    });

                    //multiselect input
                    $(".chosen-select").chosen({disable_search_threshold: 10});

                });

                <!-- 頭像選擇開始-->
                $(".close,.gb").click(function () {
                    $(".pic_box").animate({
                        'top': '-1000px'
                    }, 500);
                }),
                    $(".my_box").click(function () {
                        $(".pic_box").animate({
                            'top': '15px',
                        }, 300);
                    }),
                    $(".queren").click(function () {
                        var src = $(".jide").val();
                        $.ajax({
                            url: '/login_first/',
                            type: 'post',
                            data: {'imgsrc': src, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                            success: function (data) {
                                if (data == 'OK') {
                                    window.location.reload()
                                }
                            }


                        });
                        //$.ajax與index.php交互,在php中判斷文件,保存至數據庫便可

                        /*if(src != ""){
                            $.ajax({
                                url:"index.php",
                                type:'post',
                                data:{'imgsrc':src},
                                success:function(data){
                                    $(".my_pic").attr('src',src);
                                    $(".pic_box").animate({
                                        'top':'-1000px'
                                    },500);
                                    console.log(data);
                                }
                            })
                        }else{
                            return false;
                        }*/

                        /**
                         * 後臺我是用Thinkphp框架寫的代碼以下
                         $show=M('user')->getByusername($_SESSION['_username']);
                         if(!empty($_POST['imgsrc'])){
                    $_POST['id']=$show['id'];
                    $x=$info->create();
                    $res=$info->save();
                    if($res){
                        echo json_encode($_POST['imgsrc']);
                    }
                }
                         */


                        //效果展現,在服務器中把這一段刪除,用上面那一段
                        if (src != "") {
                            $(".my_pic").attr('src', src);
                            $(".pic_box").animate({
                                'top': '-1000px'
                            }, 500);
                        } else {
                            return false;
                        }

                    });
                var $box = document.getElementById('pic_box');
                var $li = $box.getElementsByTagName('li');
                var index = 0;
                for (var i = 0; i < $li.length; i++) {
                    $li[i].index = i;
                    $li[i].onclick = function () {
                        $li[index].style.borderRadius = "15%";
                        this.style.borderRadius = "50%";
                        index = this.index;
                    }
                }
                $(".pic_box li img").click(function () {
                    var src = $(this).attr("src");
                    $(".jide").val(src);
                });

                $.ajax({
                    url: '/list_trackwork_api/',
                    type: 'post',
                    data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
                    success: function (data) {
                        var data = JSON.parse(data);
                        var link1 = null;
                        var seach1 = null;
                        var title1 = null;
                        $.each(data, function (i, v) {
                            var lilili = '';
                            $.each(v, function (k1, v1) {
                                if (k1 == 'link') {
                                    link1 = v1
                                }
                                if (k1 == 'seach') {
                                    seach1 = v1
                                }
                                if (k1 == 'title') {
                                    title1 = v1
                                }
                                lilili = '<li><a href="' + link1 + '"><b>' + seach1 + ':' + title1 + '</b></a></li>';

                            });
                            $('#liliok').append(lilili);


                        });
                    }
                })

            </script>
    </body>

{% endblock %}
{#</html>#}
layout.html 
{% extends "arya/layout.html" %}

 {% block out_js %}
     <script src="/static/pligin/nifty/nifty.min.js"></script>
 {% endblock %}
{% block content %}
    {% include 'components/hostgroups.html' %}
    <div class="col-lg-9">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">命令</h3>
            </div>
            <div class="panel-body">
                <textarea class="form-control" id="cmd"></textarea>
                <button onclick="PostTask('cmd')" id="execute_but" class="btn btn-info pull-right">執行</button>
                <button class="btn btn-danger" onclick="End()">終止</button>

            </div>

        </div>

        {% include 'components/taskresult.html' %}

    </div>
    <script>
        {% include 'components/post_task.js.html' %}
    </script>
{% endblock %}
其餘子頁面

 

 

 

三、include 組件嵌套

 

3.1.把多個模板共用的css或者JavaScript代碼集成到1個組件，變成公共組件，讓其餘模板經過{% include  xxx %}   直接引入進來使用便可；（提升代碼重用性）

 

{% load simple-fifter %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
</head>
<body>
<h2>simple-fifter</h2>
{% for iteam in userinfo %}
    {{ iteam|my_upper:'666' }}
{% endfor %}

<h2>simple-tag</h2>
{%my_join userinfo '666' '888' %}
{% include 'public.html' %}
{% include 'public.html' %}
{% include 'public.html' %}
{% include 'public.html' %}
{% include 'public.html' %}
{% include 'public.html' %}
{% include 'public.html' %}
{% include 'public.html' %}


</body>
</html>
View Code

 

3.2.多層嵌套的include組件

在inculde組件裏還能夠繼續嵌套include組件，這樣可使你的模板代碼變得更加簡潔、靈活、易於擴展。

{% extends "arya/layout.html" %}
{% block  out_css %}
    <link rel="stylesheet" href="/static/date/bootstrap-datetimepicker.min.css">
{% endblock %}
{% block out_js %}
    <script src="/static/date/moment.js"></script>
    <script src="/static/date/bootstrap-datetimepicker.min.js"></script>
{% endblock %}
{% block content %}
    <div class="col-md-12">
        {% if task_log_id %}
            {% include 'components/task_log.html' %}

        {% else %}
            {% include 'components/log_seach.html' %}
        {% endif %}
    </div>

{% endblock %}

{% block in_js %}
    <script>
        $('[name="q"]').hide();
        $('[value="搜索"]').hide();
    </script>
{% endblock %}
audit.html 
<a href="/multitask/task/" class="btn btn-primary btn-sm">返回</a>

<table class="table  table-condensed table-responsive" style="color: white">
    <thead>
    <tr>
        <th>執行時間</th>
        <th>任務</th>
        <th>狀態</th>
    </tr>
    </thead>

    <tbody>
    {% for obj in  task_list %}
        <tr>
            <td>{{ obj.date }}</td>
            <td>{{ obj.result }}</td>
            {% if obj.status == 0 %}
                <td>成功</td>
            {% elif  obj.status == 3 %}
                <td>超時</td>
            {% endif %}
        </tr>
    {% endfor %}
    </tbody>

</table>
{% include 'components/task_log_page.html' %}
task_log.html 
<nav aria-label="Page navigation" style="position: fixed;bottom: 5px;right: 50%">
    <ul class="pagination">
        {% if task_list.has_previous %}
            <li><a href="/multitask/log/{{ task_log_id }}/?page={{ task_list.previous_page_number }}">上頁 <span
                    class="sr-only">(current)</span></a></li>
        {% else %}
            <li class="disabled"><a href="#">上頁</a></li>
        {% endif %}
        {% for page in p.page_range %}
            <li><a href="/multitask/log/{{ task_log_id }}/?page={{ page }}">{{ page }} <span
                    class="sr-only">(current)</span></a></li>
        {% endfor %}
        {% if task_list.has_next %}
            <li><a href="/multitask/log/{{ task_log_id }}/?page={{ task_list.next_page_number }}">下頁 <span
                    class="sr-only">(current)</span></a></li>
        {% else %}
            <li class="disabled"><a href="#">下頁</a></li>
        {% endif %}

    </ul>
</nav>
task_log_page.html

-------------------------------------------------------------------

<form action=""method="post">
    {% csrf_token %}
    <input id="start" type="text" name="start">
    <input id="end" type="text" name="end">
    <input type="submit" class="btn-info" value="搜素">
</form>
<script>
    $("#start").datetimepicker({
        format: 'YYYY年MM月DD日HH時mm分ss秒',
        locale: moment.locale('zh-CN')
    });

    $("#start").datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        defaultDate: "1990-1-1"
    });
    $("#end").datetimepicker({
        format: 'YYYY年MM月DD日HH時mm分ss秒',
        locale: moment.locale('zh-CN')
    });

    $("#end").datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        defaultDate: "1990-1-1"
    });
</script>
{% include 'components/task.html' %}
{% include 'components/task_page.html' %}
log_seach.html 
<table class="table table-responsive" style="color: white">
    <thead>
    <tr>
        <th>序號</th>
        <th>執行時間</th>
        <th>任務類型</th>
        <th>任務概覽</th>
        <th>操做</th>
    </tr>
    </thead>

    <tbody>
    {% for obj in task_list %}
        <tr>
            <td>{{ forloop.counter0 }}</td>
            <td>{{ obj.date }}</td>
            {% if obj.task_type == 0 %}
                <td>cmd</td>
            {% else %}
                <td>file_transfer</td>
            {% endif %}
            <td>{{ obj.content }}</td>
            <td><a href='/multitask/log/{{ obj.pk }}/' class='btn btn-primary btn-sm button'>詳細</a></td>
        </tr>
    {% endfor %}
    </tbody>

</table>
task.html 
<nav aria-label="Page navigation" style="position: fixed;bottom: 5px;right: 50%">
        <ul class="pagination">
            {% if task_list.has_previous %}
                <li><a href="/multitask/task/?page={{ task_list.previous_page_number }}">上頁 <span
                        class="sr-only">(current)</span></a></li>
            {% else %}
                <li class="disabled"><a href="#">上頁</a></li>
            {% endif %}
            {% for page in p.page_range %}
                <li><a href="/multitask/task/?page={{ page }}">{{ page }} <span class="sr-only">(current)</span></a></li>
            {% endfor %}
            {% if task_list.has_next %}
                <li><a href="/multitask/task/?page={{ task_list.next_page_number }}">下頁 <span
                        class="sr-only">(current)</span></a></li>
            {% else %}
                <li class="disabled"><a href="#">下頁</a></li>
            {% endif %}

        </ul>
    </nav>
task_page.html

 

 

 

二龍湖浩哥：http://www.cnblogs.com/yuanchenqi/articles/6811632.html#3763280

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程