開發背景:
前段時間遇到這么一個需求,就是把一整張表格的數據存儲在數據庫中,之后再渲染在頁面中,還可以進行重新編輯。
例如下邊的課程表(為了方便,所以都是軟件工程)。
我也是經過一段時間的思考,才實現了整個功能。
思考過程:
思考過程中,想過用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