如何把整张表格的数据通过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="课程名表"
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)
最后:
这是本人能想到的最好的办法了,方法虽然很笨,但还能算的上比较灵活。缺点很明显,这种方法只适用于小一点的表格,几行几列的那种。要是大表格的话,需要很多数据表。。。后端有会有很大的代码量。
如果有更好的办法,望请告知,如果我的文章能帮到你,不胜荣幸!
联系方式:微信18203416317