9 stark组件增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
        <title>Title</title>
    {% endblock %}

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
    <script src="/static/jQuery/jquery-3.2.1.min.js"></script>
    {% block css %}

    {% endblock %}
</head>

<body>
<div class="container">
    <div class="row">
        {% block header %}

        {% endblock %}

        <div class="col-md-9 col-md-offset-1">
            {% block content %}

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

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

base.html

{% extends 'base.html' %}

{% block title %}
    <title>add页面</title>
{% endblock %}


{% block css %}
   <style type="text/css">
        input,select {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .error{
            color: red;
        }
    </style>
{% endblock %}

{% block header %}
    <h3>add页面</h3>
{% endblock %}

{% block content %}
  {% include 'form.html' %}
{% endblock %}

add_view.html

{% extends 'add_view.html' %}

{% block title %}
    <title>edit页面</title>
{% endblock %}


{% block header %}
    <h3>edit页面</h3>
{% endblock %}

change_view.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除页面</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
    <script src="/static/jQuery/jquery-3.2.1.min.js"></script>
</head>

<body>
<div class="container">

    <form action="" method="post" class="text-center">
        {% csrf_token %}
        <p class="text-info">你确认要删除这条记录?</p>
        <button class="btn btn-danger">确认</button>
        <a href="{{ url }}" class="btn btn-primary">取消</a>
    </form>

</div>
</body>
</html>

delete_view.html

<form action="" method="post" novalidate>
    {% for field in form %}
        {% csrf_token %}
        <div class="form-group">
            <label for="">{{ field.label }}</label>
            {{ field }}
            <span class="error pull-right">{{ field.errors.0 }}</span>
        </div>
    {% endfor %}
    <br>
    <button class="btn btn-success pull-right">提交</button>
</form>

form.html

{% extends 'base.html' %}

{% block title %}
    <title>list页面</title>
{% endblock %}

{% block header %}
    <h3>list页面</h3>
{% endblock %}
{% block content %}
    <a class="btn btn-primary" href="{{ add_url }}">添加数据</a>
    <table class="table table-bordered table-striped">
        <tr>
            {% for header in header_list %}
                <th>{{ header }}</th>
            {% endfor %}
        </tr>

        {% for data in new_data_list %}
            <tr>
                {% for item in data %}
                    <td>{{ item }}</td>
                {% endfor %}

            </tr>
        {% endfor %}
    </table>
{% endblock %}


{% block javascript %}
    <script type="text/javascript">
        $('#choice').click(function () {
            if ($(this).prop('checked')) {   //对象自身属性中是否具有指定的属性
                $('.choice_item').prop("checked", true)
            } else {
                $('.choice_item').prop("checked", false)
            }
        })
    </script>
{% endblock %}

list_view.html

9 stark组件 增删改

猜你喜欢