day19-forloop添加序号和增加一对多数据示例

一、前言

  我们经常见到的,如果需要在每一行的数据前面加上序号咋办?是用数据库里面的id,错了,我们需要用一个for循环里面的东西forloop。还有我们需要添加一对多的数据,就是往一个有外键的表里面插入数据。今天我们就来写一个增加一对多的数据示例

二、forloop添加序号

2.1、单循环

说明:我们在单个for循环下,获取序号。

①顺序从1开始,即:forloop.counter

{% for row in v2 %}
    <tr h-id="{{ row.nid }}" b-id="{{ row.business_id }}">
        <td>{{ forloop.counter }}</td> #顺序从1开始
        <td>{{ row.hostname }}</td>
        <td>{{ row.business__caption }}</td>
    </tr>
{% endfor %}

如图:

②顺序从0开始,即:forloop.counter0

{% for row in v2 %}
    <tr h-id="{{ row.nid }}" b-id="{{ row.business_id }}">
        <td>{{ forloop.counter0 }}</td>  #顺序从0开始
        <td>{{ row.hostname }}</td>
        <td>{{ row.business__caption }}</td>
    </tr>
{% endfor %}

如图:

③倒叙以1结束,即:forloop.revcounter

{% for row in v2 %}
    <tr h-id="{{ row.nid }}" b-id="{{ row.business_id }}">
        <td>{{ forloop.revcounter }}</td>
        <td>{{ row.hostname }}</td>
        <td>{{ row.business__caption }}</td>
    </tr>
{% endfor %}

如图:

⑤倒叙以0结束,即:forloop.revcounter0

{% for row in v2 %}
    <tr h-id="{{ row.nid }}" b-id="{{ row.business_id }}">
        <td>{{ forloop.revcounter0 }}</td>  #倒叙以0结束
        <td>{{ row.hostname }}</td>
        <td>{{ row.business__caption }}</td>
    </tr>
{% endfor %}

如图:

 2.2、for语句嵌套循环

说明:我们需要获取嵌套循环的信息的话,那么就需要用到forloop.parentloop的功能了

{% for i in v2 %}
    {% for row in v2 %}
        <tr h-id="{{ row.nid }}" b-id="{{ row.business_id }}">
            <td>{{ forloop.parentloop }}</td>  #获取父循环的信息
            <td>{{ row.hostname }}</td>
            <td>{{ row.business__caption }}</td>
        </tr>
    {% endfor %}
{% endfor %}

 如图:

如果想获取父循环中的counter字段的值:

{% for i in v2 %}
    {% for row in v2 %}
        <tr h-id="{{ row.nid }}" b-id="{{ row.business_id }}">
            <td>{{ forloop.parentloop.counter }}</td>  #父循环信息中获取counter值
            <td>{{ row.hostname }}</td>
            <td>{{ row.business__caption }}</td>
        </tr>
    {% endfor %}
{% endfor %}

 如图:

其他的以此类推,不过这玩意几乎用不到,这边只是介绍一下。

三、增加增加一对多数据示例

3.1、urls.py的连接

from django.contrib import admin
from django.urls import path,re_path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('^host/$',views.host)
]

3.2、templates的模板信息host.html

说明:先要配置jquery.js的文件地址

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .hide{
 6             display: none;
 7         }
 8         .shade{
 9            position: fixed;
10             top:0;
11             right:0;
12             left:0;
13             bottom: 0;
14             background: black;
15             opacity: 0.6;
16             z-index: 100;
17         }
18         .add-modal{
19             position: fixed;
20             height: 300px;
21             width: 400px;
22             top:200px;
23             left: 50%;
24             z-index: 101;
25             border: 1px solid white;
26             background: white;
27             margin-left: -200px;
28         }
29     </style>
30 </head>
31 <body>
32     <h1>主机列表(对象)</h1>
33     <div>
34         <input id="add_host" type="button" value="添加"/>
35     </div>
36     <table border="1">
37         <thead>
38             <tr>
39                 <th>序号</th>
40                 <th>主机名</th>
41                 <th>IP</th>
42                 <th>端口</th>
43                 <th>业务线名称</th>
44                 <th>业务线编码</th>
45             </tr>
46         </thead>
47         <tbody>
48             {% for row in v1 %}
49                 <tr h-id="{{ row.nid }}" b-id="{{ row.business.id }}">
50                     <td>{{ forloop.counter }}</td>
51                     <td>{{ row.hostname }}</td>
52                     <td>{{ row.ip }}</td>
53                     <td>{{ row.port }}</td>
54                     <td>{{ row.business.caption }}</td>
55                     <td>{{ row.business.code }}</td>
56                 </tr>
57             {% endfor %}
58         </tbody>
59     </table>
60 
61     <div class="shade hide"></div>
62     <div class="add-modal hide">
63         <form method="post" action="/host/">
64             <div class="group">
65                 <input type="text" placeholder="主机名" name="hostname">
66             </div>
67             <div class="group">
68                 <input type="text" placeholder="IP" name="ip">
69             </div>
70             <div class="group">
71                 <input type="text" placeholder="端口" name="port">
72             </div>
73             <div class="group">
74                 <select name="b_id">
75                     {% for row in business_list %}
76                         <option value="{{ row.id }}">{{ row.caption }}</option>
77                     {% endfor %}
78                 </select>
79             </div>
80             <input type="submit" value="提交">
81             <input id="cancel" type="button" value="取消">
82         </form>
83     </div>
84     <script src="/static/jquery-1.12.4.js"></script>
85     <script>
86         $(function(){
87             $("#add_host").click(function(){
88                 $(".shade,.add-modal").removeClass("hide");
89             });
90 
91             $("#cancel").click(function(){
92                 $(".shade,.add-modal").addClass("hide");
93             });
94         })
95     </script>
96 </body>
host.html

3.3、view.py的代码

def host(request):
    if request.method == "GET":
        v1 = models.Host.objects.filter(nid__gte=1)
        business_list = models.Business.objects.all()

        return render(request,"host.html",{'v1':v1,"business_list":business_list})
    elif request.method == "POST":
        h = request.POST.get("hostname")
        i = request.POST.get("ip")
        p = request.POST.get("port")
        b = request.POST.get("b_id")
        models.Host.objects.create(
            hostname=h,
            ip=i,
            port=p,
            business_id=b
        )
        return redirect("/host/")  #注意了,这边不要用render,因为render是需要渲染数据的,如果用这个,你压根就没有往里面传数据,跳转页面就会变成空,所以还是增加完毕直接跳转即可

如图:

模态对话框:

 

转载于:https://www.cnblogs.com/zhangqigao/articles/8607656.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值