如何把整张表格的数据通过form表单的方式传回后台

Posted zihao1037

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何把整张表格的数据通过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

 

以上是关于如何把整张表格的数据通过form表单的方式传回后台的主要内容,如果未能解决你的问题,请参考以下文章

如何通过submit提交form表单获取后台传来的返回值

form表单通过post方式提交到后台后,后台没有收到任何数据,数据全部丢失了,怎么解决?

iview表格里某一列的单选怎么实现

iOS AFN POST  提交表单后台接收不到

Django 表单 (下) - 序列化操作

jsp页面form表单如何写成多行多列的表格