如何把整张表格的数据通过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>
这里还有一个地方需要注意,课程表中存在空的课。所以应该在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的话,数据库中该字段是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
最后:
这是本人能想到的最好的办法了,方法虽然很笨,但还能算的上比较灵活。缺点很明显,这种方法只适用于小一点的表格,几行几列的那种。要是大表格的话,需要很多数据表。。。后端有会有很大的代码量。
如果有更好的办法,望请告知,如果我的文章能帮到你,不胜荣幸!
联系方式:微信18203416317
如何把整张表格的数据通过form表单的方式传回后台的更多相关文章
- 结合Bootbox将后台JSON数据填充Form表单
本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...
- jquery获取form表单内容以及绑定数据到form表单
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
- 关于form表单或者Ajax向后台发送数据时,数据格式的探究
最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...
- django 使用form组件提交数据之form表单提交
django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...
- jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)
今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...
- PHP 输出表格单元格的数据之用表单的方式;
echo "<table border=1 class="imagetable" >"; //使用表格格式化数据echo "<for ...
- js中大数据量form表单卡顿问题解决
转载大神: http://www.mamicode.com/info-detail-1773696.html
- Django框架之第二篇--app注册、静态文件配置、form表单提交、pycharm连接数据库、django使用mysql数据库、表字段的增删改查、表数据的增删改查
本节知识点大致为:静态文件配置.form表单提交数据后端如何获取.request方法.pycharm连接数据库,django使用mysql数据库.表字段的增删改查.表数据的增删改查 一.创建app,创 ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
随机推荐
- Redis | 第一部分:数据结构与对象 中篇《Redis设计与实现》
目录 前言 1. 跳跃表 1.1 跳跃表与其节点的定义 1.2 跳跃表的API 2. 整数集合 2.1 整数集合的实现 2.2 整数集合的类型升级 2.3 整数集合的API 3. 压缩列表 3.1 压 ...
- shiro 学习笔记
1. 权限管理 1.1 什么是权限管理? 权限管理实现对用户访问系统的控制,按照安全规则或者安全策略,可以控制用户只能访问自己被授权的资源 权限管理包括用户身份认证和授权两部分,简称认证授权 1.2 ...
- CF1264D1 Beautiful Bracket Sequence (easy version)
考虑在一个确定的括号序列中,我们可以枚举中间位置,按左右最长延伸出去的答案计算. 我们很自然的思考,我们直接维护左右两边,在删除一些字符后能够延伸的最长长度. 我们设\(f_{i,j}\)为\(i\) ...
- [NOI2020] 美食家
很好,自己会做NOI签到题了,去年只要会这题,再多打点暴力,\(Ag\)到手,希望今年\(NOI\)同步赛过\(Ag\)线吧,得有点拿得出手的成绩证明啊. 考虑\(T\)非常大,\(n\)又很小. 想 ...
- Peaks Gym 100365H
Peaks ( Gym 100365H ) 这题nk做法还挺正常的..后面那个循环就很恶心了 考虑 dp[i][j] 表示长度为i的排列,恰好有k个峰的方案数量. 然后转移就是把 i 插入 i-1 的 ...
- DirectX12 3D 游戏开发与实战第七章内容(下)
利用Direct3D绘制几何体(续) 学习目标 学会一种无须每帧都要刷新命令队列的渲染流程,由此来优化程序的性能 了解另外两种跟签名参数类型:根描述符和根常量 探索如何在程序中生成和绘制常见的几何体, ...
- Nginx在make时报错[objs/Makefile:469: objs/src/core/ngx_murmurhash.o] Error
Nginx在make时报错[objs/Makefile:469: objs/src/core/ngx_murmurhash.o] Error 在安装目录下执行 vim obj/Markfile 把 ...
- Nginx pid文件找不到 nginx: [error] open() "/run/nginx/nginx.pid" failed (2: No such file or directory)
Nginx pid文件找不到 nginx: [error] open() "/run/nginx/nginx.pid" failed (2: No such file or dir ...
- C语言 自定义函数按行读入文件2
再改进下上次的读入一行函数,利用zlib库的gzgtec函数读取文件,动态分配内存,最后没有多出空行. 1 #include <stdio.h> 2 #include <stdlib ...
- kafka的安装及使用
前言花絮 今天听了kafka开发成员之一的饶军老师的讲座,讲述了kafka的前生今世.干货的东西倒是没那么容易整理出来,还得刷一遍视频整理,不过两个比较八卦的问题,倒是很容易记住了. Q:为什么kaf ...