VS2019 開發Django（九）------內置模板和過濾器

時間 2020-06-03

標籤 vs2019 開發 django 內置模板過濾器欄目 Python 简体版

原文原文鏈接

導航：VS2019開發Django系列css

緊接上篇，繼續介紹Django中的模板，考慮可能篇幅過長，因此分爲兩部分來說，今天的主要內容：html

1）內置模板和過濾器前端

母版，繼承關係。頭部導航和頁腳，是須要與其餘頁面共用的，那麼，須要把這一部分提取出來，放在一個單獨的layout.cshtml頁面中，其餘須要顯示的頁面，繼承這個頁面便可。

注意着色部分，{% load staticfiles %} 加載靜態文件，靜態文件按照項目默認配置，在App文件夾裏邊的static文件夾下邊jquery

注意着色部分，{% block content %}{% endblock %}，block定義能夠被子模板覆蓋的塊，通俗一點就是用來給子模板佔位用的django

從引用的靜態文件咱們能夠看出來，使用了BootStrap前端框架，這個是VS在新建Django項目的時候默認添加的，那麼就直接用這個前端框架來佈局了layout.cshtml母版頁bootstrap

另外要提一下的是還引入了一個bootstrap-table.min.js，官方介紹：與一些最普遍使用的CSS框架集成的擴展表。（支持Bootstrap，語義UI，Bulma，Material Design，Foundation）數組

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    {% load staticfiles %}     <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap-table.min.css' %}" />
    <script src="{% static 'hello/scripts/jquery-1.10.2.min.js' %}"></script>
    <script src="{% static 'hello/scripts/bootstrap.min.js' %}"></script>
    <script src="{% static 'hello/scripts/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'hello/scripts/bootstrap-table-zh-CN.min.js' %}"></script>
</head>
<body>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/" class="navbar-brand">DjangoLazyOrders</a>
            </div>
            <div class="navbar-collapse collapse"></div>
        </div>
    </div>
    <div class="container body-content">
        {% block content %}{% endblock %}         <hr />
        <footer>
            <p>&copy; {{ year }} - My DjangoLazyOrders Application</p>
        </footer>
    </div>

    {% block scripts %}{% endblock %} </body>
</html>

母版頁有了，那麼，在子模板中怎麼繼承這個母版頁呢？新建一個模板LazyOrders.cshtml，複製下面的代碼貼進去，而後當前子模板的內容寫在 block之間便可。注意extends標記聲明瞭須要繼承哪一個母版頁前端框架

{% extends "hello/layout.cshtml" %} {% block content %} ...... {% endblock %}

其餘經常使用標記。框架提供不少的標記，都是爲了在渲染html文本的時候，更方便的表達而設計的標記，這裏不一一作介紹，能夠直接參考官方文檔

for：循環數組中的每一個項，使該項在上下文變量中可用。服務器

if：{% if %}標籤計算一個變量，若是該變量爲「true」(即存在，不爲空，也不是一個假布爾值)，則輸出塊的內容。categorys爲視圖中調用render()函數傳遞的參數，上一篇中提到過。app

到這一步，若是直接運行，並訪問的話http://localhost:8090/hello/lazy_orders_index/，已經能夠看到一個類別（categorys）的table展現出來了

<div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">類別</h3>
                </div>
                <div class="panel-body">
                    <div class="list-op" id="list_op">
                        <button type="button" class="btn btn-default btn-sm" id="dgbtn_category_add">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button>
                        <button type="button" class="btn btn-default btn-sm" id="dgbtn_category_edit">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button>
                        <button type="button" class="btn btn-default btn-sm" data-message="[刪除]未選中任何行" id="dgbtn_category_delete">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button>
                    </div>
                    <table class="table table-hover table-bordered" id="dgtable_category">
                        <thead>
                            <tr>
                                <th></th>
                                <th>ID</th>
                                <th>類別名</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if categorys %} {% for category in categorys %}                             <tr>
                                <td><input data-id="{{ category.category_id}}" type="checkbox" /></td>
                                <td>{{category.category_id}}</td>
                                <td>{{category.category_name}}</td>
                            </tr>
                            {% endfor %} {% else %}                             <tr>
                                <td></td>
                            </tr>
                            {% endif %}                         </tbody>
                    </table>

                </div>

            </div>

運行以後展現的效果以下：

圖中展現的效果，每次單擊某一行，這一行所在checkbox就被選中了，須要單獨寫JS腳原本操做dom，核心代碼以下：每一行都有註釋，就不作解釋了。

$dgtable_category.on('click', 'tr', singleSelect); function singleSelect(e) { let inputChild = $(this).find('input');//獲取該行input元素
        let checkBoxs = $(this).parents('.table').find('input');//獲取table中全部的input元素
        if (inputChild[0].checked) {//若是該行原本爲選中狀態 則置爲非選中狀態
            checkBoxs.prop('checked', false); } else {//若是該行爲非選中狀態
            checkBoxs.prop('checked', false);//先將table中全部的checkbox置爲非選中狀態
            inputChild.prop('checked', true);//而後將該行置爲選中狀態
 } var target = e.target;//若是點擊的是checkbox而不是tr 那麼須要單獨處理
        if (target.type == "checkbox") { inputChild.prop('checked', !inputChild[0].checked); } }