zoukankan      html  css  js  c++  java
  • 如何把整张表格的数据通过form表单的方式传回后台

    开发背景:

    前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑。

    例如下边的课程表(为了方便,所以都是软件工程)。

    我也是经过一段时间的思考,才实现了整个功能。

    思考过程:

    思考过程中,想过用ajax,感觉还是太麻烦了,放弃。

    第二个,是找网上现成的接口,比如表单大师之类的。。。但是找来找去找不到,没有符合要求的接口。放弃。

    第三个,想到python万能的包来实现,还是相信python的包是万能的23333,百度来百度去,找不到。放弃。

    最后还是,老老实实用form表单去传吧。。。

    设计过程:

    怎么把表格中的数据通过form表单提交的方式给到后台呢?既然确定了传递的方法,就要考虑数据表怎么设计了。

    思来想去,感觉一个数据表怎么都不够,需要多个数据表。最后还是结合<table>标签的特点,就是<table>中<tr>标签表示是表格一行的内容的,而且方便进行数据渲染。所以,表格一行的数据都有一个数据表对应。这。。。应该是最笨的方法了吧,而且这种方法只适用于小一点的表格,几行几列的那种。要是大表格的话,这种方式会需要很多数据表。。。后端有会有很大的代码量。

    代码片段展示:

    前端html部分:

      1 <h1  align="center"><b><caption>课程表</caption></b></h1>
      2                 <body text="#000000">
      3                 <form action="/reedtioncurriculum/" method="POST">
      4                 <table style="color:#000"width="1200" height="480" border="1" background="Hydrangeas.jpg">
      5                     <tr>
      6                         <td width="76"> </td>
      7                         <td width="86" height="50"> </td>
      8                         <td width="100">周一</td>
      9                         <td width="100">周二</td>
     10                         <td width="100">周三</td>
     11                         <td width="100">周四</td>
     12                         <td width="100">周五</td>
     13                         <td width="100">周六</td>
     14                         <td width="108">周日</td>
     15                     </tr>
     16                     <tr>
     17                         
     18                         <td rowspan="4">上午</td>
     19                         
     20                         <td rowspan="2">1</td>
     21                         <td rowspan="2">
     22                             <select name="monday_1">
     23                             {% for i in courselist %}
     24                             <option>{{ i.coursename }}</option>
     25                             {% endfor %}
     26                             </select>
     27                         </td>
     28                         <td rowspan="2">
     29                             <select name="tuesday_1">
     30                                 {% for i in courselist %}
     31                                 <option>{{ i.coursename }}</option>
     32                                 {% endfor %}
     33                             </select>
     34                         </td>
     35                         <td rowspan="2">
     36                             <select name="wednesday_1">
     37                                 {% for i in courselist %}
     38                                 <option>{{ i.coursename }}</option>
     39                                 {% endfor %}
     40                             </select>
     41                         </td>
     42                         <td rowspan="2">
     43                             <select name="thursday_1">
     44                                 {% for i in courselist %}
     45                                 <option>{{ i.coursename }}</option>
     46                                 {% endfor %}
     47                             </select>
     48                         </td>
     49                         <td rowspan="2">
     50                             <select name="friday_1">
     51                                 {% for i in courselist %}
     52                                 <option>{{ i.coursename }}</option>
     53                                 {% endfor %}
     54                             </select>
     55                         </td>
     56                         <td rowspan="2">
     57                             <select name="saturday_1">
     58                                 {% for i in courselist %}
     59                                 <option>{{ i.coursename }}</option>
     60                                 {% endfor %}
     61                             </select>
     62                         </td>
     63                         <td rowspan="2">
     64                             <select name="sunday_1">
     65                                 {% for i in courselist %}
     66                                 <option>{{ i.coursename }}</option>
     67                                 {% endfor %}
     68                             </select>
     69                         </td>
     70                     </tr>
     71                     <tr>
     72                     </tr>
     73                     <tr>
     74                         <td rowspan="2">2</td>
     75                         <td rowspan="2">
     76                             <select name="monday_2">
     77                                 {% for i in courselist %}
     78                                 <option>{{ i.coursename }}</option>
     79                                 {% endfor %}
     80                                 </select>
     81                         </td>
     82                         <td rowspan="2">
     83                             <select name="tuesday_2">
     84                                 {% for i in courselist %}
     85                                 <option>{{ i.coursename }}</option>
     86                                 {% endfor %}
     87                             </select>
     88                         </td>
     89                         <td rowspan="2">
     90                             <select name="wednesday_2">
     91                                 {% for i in courselist %}
     92                                 <option>{{ i.coursename }}</option>
     93                                 {% endfor %}
     94                             </select>
     95                         </td>
     96                         <td rowspan="2">
     97                             <select name="thursday_2">
     98                                 {% for i in courselist %}
     99                                 <option>{{ i.coursename }}</option>
    100                                 {% endfor %}
    101                             </select>
    102                         </td>
    103                         <td rowspan="2">
    104                             <select name="friday_2">
    105                                 {% for i in courselist %}
    106                                 <option>{{ i.coursename }}</option>
    107                                 {% endfor %}
    108                             </select>
    109                         </td>
    110                         <td rowspan="2">
    111                             <select name="saturday_2">
    112                                 {% for i in courselist %}
    113                                 <option>{{ i.coursename }}</option>
    114                                 {% endfor %}
    115                             </select>
    116                         </td>
    117                         <td rowspan="2">
    118                             <select name="sunday_2">
    119                                 {% for i in courselist %}
    120                                 <option>{{ i.coursename }}</option>
    121                                 {% endfor %}
    122                             </select>
    123                         </td>
    124                     </tr>
    125                     <tr>
    126                     </tr>
    127                     <tr>
    128                     <td colspan="9" align="center"><b>午休</b></td>
    129                     </tr>
    130                     <tr>
    131                         <td rowspan="4">下午</td>
    132                         <td rowspan="2">3</td>
    133                         <td rowspan="2">
    134                             <select name="monday_3">
    135                                 {% for i in courselist %}
    136                                 <option>{{ i.coursename }}</option>
    137                                 {% endfor %}
    138                                 </select>
    139                         </td>
    140                         <td rowspan="2">
    141                             <select name="tuesday_3">
    142                                 {% for i in courselist %}
    143                                 <option>{{ i.coursename }}</option>
    144                                 {% endfor %}
    145                             </select>
    146                         </td>
    147                         <td rowspan="2">
    148                             <select name="wednesday_3">
    149                                 {% for i in courselist %}
    150                                 <option>{{ i.coursename }}</option>
    151                                 {% endfor %}
    152                             </select>
    153                         </td>
    154                         <td rowspan="2">
    155                             <select name="thursday_3">
    156                                 {% for i in courselist %}
    157                                 <option>{{ i.coursename }}</option>
    158                                 {% endfor %}
    159                             </select>
    160                         </td>
    161                         <td rowspan="2">
    162                             <select name="friday_3">
    163                                 {% for i in courselist %}
    164                                 <option>{{ i.coursename }}</option>
    165                                 {% endfor %}
    166                             </select>
    167                         </td>
    168                         <td rowspan="2">
    169                             <select name="saturday_3">
    170                                 {% for i in courselist %}
    171                                 <option>{{ i.coursename }}</option>
    172                                 {% endfor %}
    173                             </select>
    174                         </td>
    175                         <td rowspan="2">
    176                             <select name="sunday_3">
    177                                 {% for i in courselist %}
    178                                 <option>{{ i.coursename }}</option>
    179                                 {% endfor %}
    180                             </select>
    181                         </td>
    182                     </tr>
    183                     <tr>
    184                     </tr>
    185                     <tr>
    186                             <td rowspan="2">4</td>
    187                             <td rowspan="2">
    188                                 <select name="monday_4">
    189                                     {% for i in courselist %}
    190                                     <option>{{ i.coursename }}</option>
    191                                     {% endfor %}
    192                                     </select>
    193                             </td>
    194                             <td rowspan="2">
    195                                 <select name="tuesday_4">
    196                                     {% for i in courselist %}
    197                                     <option>{{ i.coursename }}</option>
    198                                     {% endfor %}
    199                                 </select>
    200                             </td>
    201                             <td rowspan="2">
    202                                 <select name="wednesday_4">
    203                                     {% for i in courselist %}
    204                                     <option>{{ i.coursename }}</option>
    205                                     {% endfor %}
    206                                 </select>
    207                             </td>
    208                             <td rowspan="2">
    209                                 <select name="thursday_4">
    210                                     {% for i in courselist %}
    211                                     <option>{{ i.coursename }}</option>
    212                                     {% endfor %}
    213                                 </select>
    214                             </td>
    215                             <td rowspan="2">
    216                                 <select name="friday_4">
    217                                     {% for i in courselist %}
    218                                     <option>{{ i.coursename }}</option>
    219                                     {% endfor %}
    220                                 </select>
    221                             </td>
    222                             <td rowspan="2">
    223                                 <select name="saturday_4">
    224                                     {% for i in courselist %}
    225                                     <option>{{ i.coursename }}</option>
    226                                     {% endfor %}
    227                                 </select>
    228                             </td>
    229                             <td rowspan="2">
    230                                 <select name="sunday_4">
    231                                     {% for i in courselist %}
    232                                     <option>{{ i.coursename }}</option>
    233                                     {% endfor %}
    234                                 </select>
    235                             </td>
    236                     </tr>
    237                 </table>
    238                     <input type="submit" value="提交" id='submit'>
    239                     <a href="/Mycurriculum/">
    240                         <button id='back'>返回</button>
    241                     </a>
    242                 </form>
    View Code
    courselist  这个是所有课程的数据表。
    coursename  这个是课程数据表下边的课程名字段。

    这里还有一个地方需要注意,课程表中存在空的课。所以应该在model.py中这样设置:

    1 class Course(models.Model):
    2     coursename = models.CharField(verbose_name='课程名',max_length = 20,null=True,blank=True)
    3     class Meta:
    4         verbose_name_plural="课程名表"
    models.py
    null=True,blank=True
     
    null 与 blank 都设置为True。

    null=True的话,数据库中该字段是NULL,即允许空值;null=False(默认)的话,数据库中该字段是NOT NULL,即不允许空值。

    blank=False(默认)的话,字段没被赋值则会抛错;blank=True则不会。

     1 monday_1 = request.POST.get('monday_1')
     2             tuesday_1 = request.POST.get('tuesday_1')
     3             wednesday_1 = request.POST.get('wednesday_1')
     4             thursday_1 = request.POST.get('thursday_1')
     5             friday_1 = request.POST.get('friday_1')
     6             saturday_1 = request.POST.get('saturday_1')
     7             sunday_1 = request.POST.get('sunday_1')
     8 
     9             # bulk_create缺少主键,用for迭代数据表中的两个数据(id,coursename),zip函数可以将多个可迭代对象封装成多元素的元组的列表,从而方便并行操作数据,这里将a、range(1,9)
    10             courseonelist = []
    11             a = [monday_1,tuesday_1,wednesday_1,thursday_1,friday_1,saturday_1,sunday_1]
    12             for n,m in zip(a,range(1,9)):
    13                 obj1 = Courseone(
    14                     id = m,
    15                     coursename = n,
    16                 )   
    17                 courseonelist.append(obj1)
    18 
    19             monday_2 = request.POST.get('monday_2')
    20             tuesday_2 = request.POST.get('tuesday_2')
    21             wednesday_2 = request.POST.get('wednesday_2')
    22             thursday_2 = request.POST.get('thursday_2')
    23             friday_2 = request.POST.get('friday_2')
    24             saturday_2 = request.POST.get('saturday_2')
    25             sunday_2 = request.POST.get('sunday_2')
    26 
    27             coursetwolist = []
    28             a = [monday_2,tuesday_2,wednesday_2,thursday_2,friday_2,saturday_2,sunday_2]
    29             for n,m in zip(a,range(1,9)):
    30                 obj2 = Coursetwo(
    31                     id = m,
    32                     coursename = n,
    33                 )   
    34                 coursetwolist.append(obj2)
    35 
    36             monday_3 = request.POST.get('monday_3')
    37             tuesday_3 = request.POST.get('tuesday_3')
    38             wednesday_3 = request.POST.get('wednesday_3')
    39             thursday_3 = request.POST.get('thursday_3')
    40             friday_3 = request.POST.get('friday_3')
    41             saturday_3 = request.POST.get('saturday_3')
    42             sunday_3 = request.POST.get('sunday_3')
    43             
    44             coursethreelist = []
    45             a = [monday_3,tuesday_3,wednesday_3,thursday_3,friday_3,saturday_3,sunday_3]
    46             for n,m in zip(a,range(1,9)):
    47                 obj3 = Coursethree(
    48                     id = m,
    49                     coursename = n,
    50                 )   
    51                 coursethreelist.append(obj3)
    52 
    53             monday_4 = request.POST.get('monday_4')
    54             tuesday_4 = request.POST.get('tuesday_4')
    55             wednesday_4 = request.POST.get('wednesday_4')
    56             thursday_4 = request.POST.get('thursday_4')
    57             friday_4 = request.POST.get('friday_4')
    58             saturday_4 = request.POST.get('saturday_4')
    59             sunday_4 = request.POST.get('sunday_4')
    60             coursefourlist = [monday_4,tuesday_4,wednesday_4,thursday_4,friday_4,saturday_4,sunday_4]
    61 
    62             coursefourlist = []
    63             a = [monday_4,tuesday_4,wednesday_4,thursday_4,friday_4,saturday_4,sunday_4]
    64             for n,m in zip(a,range(1,9)):
    65                 obj4 = Coursefour(
    66                     id = m,
    67                     coursename = n,
    68                 )   
    69                 coursefourlist.append(obj4)
    70 
    71             try:                                            #可能存在数据重复的问题
    72                 Courseone.objects.bulk_create(courseonelist)#用bulk_create将多条数据同时写入数据库
    73             except:                                             
    74                 Courseone.objects.all().delete()            #先删再创建,无法使用update()批量更新    
    75                 Courseone.objects.bulk_create(courseonelist)
    76 
    77             try:
    78                 Coursetwo.objects.bulk_create(coursetwolist)
    79             except:
    80                 Coursetwo.objects.all().delete()
    81                 Coursetwo.objects.bulk_create(coursetwolist)
    82 
    83             try:
    84                 Coursethree.objects.bulk_create(coursethreelist)
    85             except:
    86                 Coursethree.objects.all().delete()
    87                 Coursethree.objects.bulk_create(coursethreelist)
    88 
    89             try:
    90                 Coursefour.objects.bulk_create(coursefourlist)
    91             except:
    92                 Coursefour.objects.all().delete()
    93                 Coursefour.objects.bulk_create(coursefourlist)
    Views.py
    bulk_create  数据批量导入
    bulk_create缺少主键,用for迭代数据表中的两个数据(id,coursename)
    zip函数可以将多个可迭代对象封装成多元素的元组的列表,从而方便并行操作数据,这里将a、range(1,9)
     

    最后:

    这是本人能想到的最好的办法了,方法虽然很笨,但还能算的上比较灵活。缺点很明显,这种方法只适用于小一点的表格,几行几列的那种。要是大表格的话,需要很多数据表。。。后端有会有很大的代码量。

    如果有更好的办法,望请告知,如果我的文章能帮到你,不胜荣幸!

    联系方式:微信18203416317

  • 相关阅读:
    Stream 和 byte[] 之间的转换
    C# Process类_进程_应用程序域与上下文之间的关系
    C# Process类_进程管理器Demo
    C# attribute_特性
    SqlDataAdapter类
    SqlDataReader类
    SqlCommand类
    SqlConnection类
    DataTable类
    C# 语法技巧_三目运算_switch_case
  • 原文地址:https://www.cnblogs.com/zihao1037/p/11806870.html
Copyright © 2011-2022 走看看