Django+Layui学习二：Table
前言
前面学习了后台布局和tabs的使用，本次来学习下layui中的table和Django联动。
一、Django设置
1、models，简单的两个类，一个是问题类型，一个是问题的详情。
1 # Create your models here. 2 3 #问题类型 4 class ProblemType(models.Model): 5 problem_type=models.CharField(max_length=50,verbose_name='问题类型') 6 7 class Meta: 8 verbose_name='问题类型' 9 verbose_name_plural=verbose_name 10 11 def __str__(self): 12 return self.problem_type 13 14 #普通问题 15 class NormalProblem(models.Model): 16 type=models.ForeignKey(ProblemType,on_delete=models.CASCADE,verbose_name='问题类型') 17 qq_num=models.CharField(max_length=50,verbose_name='QQ号码') 18 account=models.CharField(max_length=50,verbose_name='帐号') 19 server=models.CharField(max_length=20,verbose_name='区服') 20 character=models.CharField(max_length=50,verbose_name='角色名') 21 des=models.TextField(verbose_name='问题描述') 22 recordpeople=models.CharField(max_length=50,verbose_name='记录人') 23 recorddate=models.DateTimeField(auto_now_add=timezone,verbose_name='记录时间') 24 25 class Meta: 26 verbose_name='普通问题' 27 verbose_name_plural=verbose_name 28 ordering=['-recorddate'] 29 30 def __str__(self): 31 return "{0}的问题".format(self.account)
2、views，方法是比较常规的增删改查
因为table需要分页，所以在获取所有问题的时候需要根据传入的page和limit来获取对应的数据返回，layui中table需要的返回数据是这样的：["code":"","msg":"","count":"","data":{}]，所以在返还的时候也需要增加这些后再返回。
1 # 获取所有问题类型 2 def get_problemsType(request): 3 types = ProblemType.objects.all() 4 dict = [] 5 for type in types: 6 dic = {} 7 dic['id'] = type.id 8 dic['type'] = type.problem_type 9 dict.append(dic) 10 return JsonResponse(dict, safe=False) 24 25 # 打开所有普通问题界面数据界面 26 @csrf_exempt 27 def open_normalProblem_panel(request): 28 return render(request, 'service/normal-problem/normal-problem-panel.html') 29 30 31 # 获取所有普通问题 32 @csrf_exempt 33 def get_normalProblems(request): 34 page = request.POST.get('page') 35 rows = request.POST.get('limit') 36 37 i = (int(page) - 1) * int(rows) 38 j = (int(page) - 1) * int(rows) + int(rows) 39 40 problems=NormalProblem.objects.all() 41 total = problems.count() 42 problems = problems[i:j] 43 resultdict = {} 44 resultdict['total'] = total 45 dict = [] 46 for p in problems: 47 dic = {} 48 dic['id'] = p.id 49 dic['type'] = p.type.problem_type 50 dic['qq_num'] = p.qq_num 51 dic['account'] = p.account 52 dic['server'] = p.server 53 dic['character'] = p.character 54 dic['des'] = p.des 55 dic['recordpeople'] = p.recordpeople 56 dic['recorddate'] = p.recorddate 57 dict.append(dic) 58 resultdict['code'] = 0 59 resultdict['msg'] = "" 60 resultdict['count'] = total 61 resultdict['data'] = dict 62 return JsonResponse(resultdict, safe=False) 63 64 65 # 获取单个普通问题 66 @csrf_exempt 67 def get_normalProblem(request): 68 id = request.POST.get('id') 69 problem = NormalProblem.objects.get(id=id) 70 dic = {} 71 dic['id'] = problem.id 72 dic['type_id'] = problem.type_id 73 dic['type'] = problem.type.problem_type 74 dic['qq_num'] = problem.qq_num 75 dic['account'] = problem.account 76 dic['server'] = problem.server 77 dic['character'] = problem.character 78 dic['des'] = problem.des 79 dic['recordpeople'] = problem.recordpeople 80 dic['recorddate'] = problem.recorddate 81 return JsonResponse(dic, safe=False) 82 83 84 # 新增问题 85 @csrf_exempt 86 def add_normalProblem(request): 87 type_id = request.POST.get('type') 88 type = ProblemType.objects.get(id=type_id) 89 qq_num = request.POST.get('qq_num') 90 account = request.POST.get('account') 91 server = request.POST.get('server') 92 character = request.POST.get('character') 93 des = request.POST.get('des') 94 recordpeople = request.POST.get('recordpeople') 95 problem = NormalProblem.objects.create(type=type, qq_num=qq_num, account=account, server=server, 96 character=character, 97 des=des, recordpeople=recordpeople) 98 problem.save() 99 return JsonResponse({'message': 1}, safe=False) 100 101 102 # 编辑普通问题 103 @csrf_exempt 104 def edit_normalProblem(request): 105 id = request.POST.get('id') 106 type = request.POST.get('type') 107 # type = ProblemType.objects.get(id=type_id) 108 qq_num = request.POST.get('qq_num') 109 account = request.POST.get('account') 110 server = request.POST.get('server') 111 character = request.POST.get('character') 112 des = request.POST.get('des') 113 problem = NormalProblem.objects.get(id=id) 114 problem.type=ProblemType.objects.get(problem_type=type) 115 problem.qq_num = qq_num 116 problem.account = account 117 problem.server = server 118 problem.character = character 119 problem.des = des 120 problem.save() 121 return JsonResponse({'message': 1}, safe=False)
3、urls，继续增删改查的链接
1 path('get-problemsType/', views.get_problemsType, name='get_problemsType'), 2 path('open-normalProblem-panel/', views.open_normalProblem_panel, name='open_normalProblem_panel'), 3 path('get-normalProblems/', views.get_normalProblems, name='get_normalProblems'), 4 path('get-normalProblem/', views.get_normalProblem, name='get_normalProblem'), 5 path('add-normalProblem/', views.add_normalProblem, name='add_normalProblem'), 6 path('edit-normalProblem/', views.edit_normalProblem, name='edit_normalProblem'),
到此，Django设置完毕，下面来编写html
二、Html
1 {% load staticfiles %} 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}"> 8 </head> 9 <body> 10 11 <!--工具栏(全局)--> 12 <div id="normal-problem-panel-tool" class="layui-btn-group"> 13 <button class="layui-btn" data-type="normalProblemAdd">新增问题</button> 14 </div> 15 16 <!--表格展示--> 17 <table id="normal-problem-panel-table" lay-filter="data-table"></table> 18 19 <!--工具栏(每行)--> 20 <script type="text/html" id="barDemo"> 21 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> 22 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> 23 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 24 </script> 25 26 <!--查看弹出框--> 27 <form id="normal-problem-detail" class="layui-form" action=""> 28 <div class="layui-form-item"> 29 <label class="layui-form-label">问题类型</label> 30 <div class="layui-input-block"> 31 <input type="text" readonly="readonly" id="normal-problem-detail-type" name="normal-problem-detail-type" 32 lay-verify="normal-problem-detail-type" 33 class="layui-input"> 34 </div> 35 </div> 36 <div class="layui-form-item"> 37 <label class="layui-form-label">QQ号码</label> 38 <div class="layui-input-block"> 39 <input type="text" readonly="readonly" id="normal-problem-detail-qq" name="normal-problem-detail-qq" 40 lay-verify="normal-problem-detail-qq" 41 class="layui-input"> 42 </div> 43 </div> 44 <div class="layui-form-item"> 45 <div class="layui-inline"> 46 <label class="layui-form-label">帐号</label> 47 <div class="layui-input-block"> 48 <input type="text" readonly="readonly" id="normal-problem-detail-account" 49 name="normal-problem-detail-account" lay-verify="normal-problem-detail-type" 50 class="layui-input"> 51 </div> 52 </div> 53 <div class="layui-inline"> 54 <label class="layui-form-label">区服</label> 55 <div class="layui-input-block"> 56 <input type="text" readonly="readonly" id="normal-problem-detail-server" 57 name="normal-problem-detail-server" lay-verify="normal-problem-detail-type" 58 class="layui-input"> 59 </div> 60 </div> 61 <div class="layui-inline"> 62 <label class="layui-form-label">角色名</label> 63 <div class="layui-input-block"> 64 <input type="text" readonly="readonly" id="normal-problem-detail-character" 65 name="normal-problem-detail-character" lay-verify="normal-problem-detail-type" 66 class="layui-input"> 67 </div> 68 </div> 69 </div> 70 <div class="layui-form-item"> 71 <label class="layui-form-label">问题描述</label> 72 <div class="layui-input-block"> 73 <textarea type="text" readonly="readonly" id="normal-problem-detail-des" name="normal-problem-detail-des" 74 lay-verify="normal-problem-detail-qq" 75 class="layui-textarea"></textarea> 76 </div> 77 </div> 78 <div class="layui-form-item"> 79 <label class="layui-form-label">记录人</label> 80 <div class="layui-input-block"> 81 <input type="text" readonly="readonly" id="normal-problem-detail-recordpeople" 82 name="normal-problem-detail-recordpeople" lay-verify="normal-problem-detail-qq" 83 class="layui-input"> 84 </div> 85 </div> 86 <div class="layui-form-item"> 87 <label class="layui-form-label">记录时间</label> 88 <div class="layui-input-block"> 89 <input type="text" readonly="readonly" id="normal-problem-detail-recorddate" 90 name="normal-problem-detail-recorddate" lay-verify="normal-problem-detail-qq" 91 class="layui-input"> 92 </div> 93 </div> 94 </form> 95 96 <!--新增问题弹出框--> 97 <form id="normal-problem-add" class="layui-form" action=""> 98 <div class="layui-form-item"> 99 <label class="layui-form-label">问题类型</label> 100 <div class="layui-input-block"> 101 <select id="normal-problem-add-type" name="normal-problem-add-type" 102 lay-verify="normal-problem-add-type"> 103 104 </select> 105 </div> 106 </div> 107 <div class="layui-form-item"> 108 <label class="layui-form-label">QQ号码</label> 109 <div class="layui-input-block"> 110 <input type="text" id="normal-problem-add-qq" name="normal-problem-add-qq" 111 lay-verify="normal-problem-add-qq" 112 class="layui-input"> 113 </div> 114 </div> 115 <div class="layui-form-item"> 116 <div class="layui-inline"> 117 <label class="layui-form-label">帐号</label> 118 <div class="layui-input-block"> 119 <input type="text" id="normal-problem-add-account" 120 name="normal-problem-add-account" lay-verify="normal-problem-add-type" 121 class="layui-input"> 122 </div> 123 </div> 124 <div class="layui-inline"> 125 <label class="layui-form-label">区服</label> 126 <div class="layui-input-block"> 127 <input type="text" id="normal-problem-add-server" 128 name="normal-problem-add-server" lay-verify="normal-problem-add-type" 129 class="layui-input"> 130 </div> 131 </div> 132 <div class="layui-inline"> 133 <label class="layui-form-label">角色名</label> 134 <div class="layui-input-block"> 135 <input type="text" id="normal-problem-add-character" 136 name="normal-problem-add-character" lay-verify="normal-problem-add-type" 137 class="layui-input"> 138 </div> 139 </div> 140 </div> 141 <div class="layui-form-item"> 142 <label class="layui-form-label">问题描述</label> 143 <div class="layui-input-block"> 144 <textarea type="text" id="normal-problem-add-des" name="normal-problem-add-des" 145 lay-verify="normal-problem-add-qq" 146 class="layui-textarea"></textarea> 147 </div> 148 </div> 149 <div class="layui-form-item"> 150 <label class="layui-form-label">记录人</label> 151 <div class="layui-input-block"> 152 <input type="text" readonly="readonly" id="normal-problem-add-recordpeople" 153 name="normal-problem-add-recordpeople" lay-verify="normal-problem-add-qq" 154 class="layui-input"> 155 </div> 156 </div> 157 </form> 158 159 <!--编辑问题弹出框--> 160 <form id="normal-problem-edit" class="layui-form" action=""> 161 <div class="layui-form-item"> 162 <label class="layui-form-label">问题编号</label> 163 <div class="layui-input-block"> 164 <input type="text" id="normal-problem-edit-id" name="normal-problem-edit-id" 165 lay-verify="normal-problem-edit-id" 166 class="layui-input"> 167 </div> 168 </div> 169 <div class="layui-form-item"> 170 <label class="layui-form-label">问题类型</label> 171 <div class="layui-input-block"> 172 {% comment %} <input type="text" id="normal-problem-edit-type" name="normal-problem-edit-type" 173 lay-verify="normal-problem-edit-type" 174 class="layui-input">{% endcomment %} 175 <select id="normal-problem-edit-type" name="normal-problem-edit-type" 176 lay-verify="normal-problem-edit-type"> 177 178 </select> 179 180 </div> 181 </div> 182 <div class="layui-form-item"> 183 <label class="layui-form-label">QQ号码</label> 184 <div class="layui-input-block"> 185 <input type="text" id="normal-problem-edit-qq" name="normal-problem-edit-qq" 186 lay-verify="normal-problem-edit-qq" 187 class="layui-input"> 188 </div> 189 </div> 190 <div class="layui-form-item"> 191 <div class="layui-inline"> 192 <label class="layui-form-label">帐号</label> 193 <div class="layui-input-block"> 194 <input type="text" id="normal-problem-edit-account" 195 name="normal-problem-edit-account" lay-verify="normal-problem-edit-type" 196 class="layui-input"> 197 </div> 198 </div> 199 <div class="layui-inline"> 200 <label class="layui-form-label">区服</label> 201 <div class="layui-input-block"> 202 <input type="text" id="normal-problem-edit-server" 203 name="normal-problem-edit-server" lay-verify="normal-problem-edit-type" 204 class="layui-input"> 205 </div> 206 </div> 207 <div class="layui-inline"> 208 <label class="layui-form-label">角色名</label> 209 <div class="layui-input-block"> 210 <input type="text" id="normal-problem-edit-character" 211 name="normal-problem-edit-character" lay-verify="normal-problem-edit-type" 212 class="layui-input"> 213 </div> 214 </div> 215 </div> 216 <div class="layui-form-item"> 217 <label class="layui-form-label">问题描述</label> 218 <div class="layui-input-block"> 219 <textarea type="text" id="normal-problem-edit-des" name="normal-problem-edit-des" 220 lay-verify="normal-problem-edit-qq" 221 class="layui-textarea"></textarea> 222 </div> 223 </div> 224 <div class="layui-form-item"> 225 <label class="layui-form-label">记录人</label> 226 <div class="layui-input-block"> 227 <input type="text" readonly="readonly" id="normal-problem-edit-recordpeople" 228 name="normal-problem-edit-recordpeople" lay-verify="normal-problem-edit-qq" 229 class="layui-input"> 230 </div> 231 </div> 232 </form> 233 234 <script src="{% static 'layui/layui.js' %}"></script> 235 <script> 236 237 layui.use(['table', 'jquery', 'layer', 'form'], function () { 238 var table = layui.table, 239 layer = layui.layer, 240 form = layui.form, 241 $ = layui.jquery; 242 243 //渲染表格 244 var normalProblemTable = table.render({//渲染table 245 method: 'post',//数据传输方式为post 246 height: 'full-20',//高度为屏幕高度-20 247 cellMinWidth: 80,//单元格最小宽度为80 248 page: true,//开启分页 249 limit: 30,//分页默认为30 250 elem: '#normal-problem-panel-table',//设置容器 251 url: '{% url 'service:get_normalProblems' %}',//数据获取url 252 cols: [[//设置列标签、标题、宽度、是否排序等 253 {field: 'id', title: 'ID', width: 80, sort: true}, 254 {field: 'type', title: '类别', width: 80,}, 255 {field: 'des', title: '描述',}, 256 {field: 'recordpeople', title: '记录人',}, 257 {field: 'recorddate', title: '记录时间',}, 258 {fixed: 'right', width: 200, toolbar: '#barDemo'},//设置每行的工具栏以及其容器 259 ]], 260 }); 261 262 //监听工具条，每行 263 table.on('tool(data-table)', function (obj) { 264 var data = obj.data; 265 if (obj.event === 'detail') {//如果event是detail,这里的event名称需要在容器中设置lay-event 266 $.post(//向服务器发送问题id，获取选中问题行的数据 267 '{% url 'service:get_normalProblem' %}', 268 {id: data.id}, 269 function (data) {//获取数据后开启弹窗 270 layer.prompt({ 271 title: '问题详情', 272 content: $('#normal-problem-detail'),//设置弹窗的容器 273 btn: ['确定'],//点击确定的时候，会关闭弹窗 274 yes: function (index, layero) { 275 layer.close(index) 276 } 277 }); 278 //设置容器中各个值 279 $('#normal-problem-detail-type').val(data.type) 280 $('#normal-problem-detail-qq').val(data.qq_num) 281 $('#normal-problem-detail-account').val(data.account) 282 $('#normal-problem-detail-server').val(data.server) 283 $('#normal-problem-detail-character').val(data.character) 284 $('#normal-problem-detail-des').val(data.des) 285 $('#normal-problem-detail-recordpeople').val(data.recordpeople) 286 $('#normal-problem-detail-recorddate').val(data.recorddate) 287 } 288 ) 289 } else if (obj.event === 'del') { 290 layer.confirm('真的删除行么', function (index) { 291 obj.del(); 292 layer.close(index); 293 }); 294 } else if (obj.event === 'edit') { 295 $.post(//根据id获取服务器中的数据 296 '{% url 'service:get_normalProblem' %}', 297 {id: data.id}, 298 function (data) { 299 layer.prompt({ 300 title: '问题详情', 301 content: $('#normal-problem-edit'), 302 btn: ['确定', '取消'],//一个是确定修改，一个是取消 303 yes: function (index, layero) { 304 //确定修改的时候需要吧各个值传到服务器当中 305 $.post( 306 '{% url 'service:edit_normalProblem' %}', 307 { 308 id: $('#normal-problem-edit-id').val(), 309 qq_num: $('#normal-problem-edit-qq').val(), 310 type_id: $('#normal-problem-edit-type').val(), 311 account: $('#normal-problem-edit-account').val(), 312 server: $('#normal-problem-edit-server').val(), 313 character: $('#normal-problem-edit-character').val(), 314 des: $('#normal-problem-edit-des').val(), 315 }, 316 function (data) {//修改成功后需要关闭弹窗并且重载表格 317 layer.close(index) 318 layer.msg('修改成功！', {icon: 1}) 319 normalProblemTable.reload() 320 } 321 ) 322 }, 323 btn2: function (index, layero) { 324 layer.close(index) 325 } 326 }); 327 $.get('{% url 'service:get_problemsType' %}', function (data) { 328 //$('#normal-problem-edit-type').append("<option value=\"\"></option>"); 329 for (var i = 0; i < data.length; i++) { 330 console.log(data[i].type) 331 $('#normal-problem-edit-type').append("<option value='" + data[i].id + "'>" + data[i].type + "</option"); 332 } 333 form.render('select'); 334 }); 335 $('#normal-problem-edit-id').val(data.id) 336 $('#normal-problem-edit-qq').val(data.qq_num) 337 $('#normal-problem-edit-type').val(data.type) 338 $('#normal-problem-edit-account').val(data.account) 339 $('#normal-problem-edit-server').val(data.server) 340 $('#normal-problem-edit-character').val(data.character) 341 $('#normal-problem-edit-des').val(data.des) 342 $('#normal-problem-edit-recordpeople').val(data.recordpeople) 343 } 344 ) 345 } 346 }); 347 348 //监听工具条，全局 349 var normalProblemPanelTools = { 350 normalProblemAdd: function () {//新增问题 351 layer.prompt({ 352 title: '新增问题', 353 content: $('#normal-problem-add'), 354 btn: ['确定', '取消'],//一个是确定修改，一个是取消 355 yes: function (index, layero) { 356 //确定修改的时候需要吧各个值传到服务器当中 357 $.post( 358 '{% url 'service:add_normalProblem' %}', 359 { 360 qq_num: $('#normal-problem-add-qq').val(), 361 type_id: $('#normal-problem-add-type').val(), 362 account: $('#normal-problem-add-account').val(), 363 server: $('#normal-problem-add-server').val(), 364 character: $('#normal-problem-add-character').val(), 365 des: $('#normal-problem-add-des').val(), 366 recordpeople: $('#normal-problem-add-recordpeople').val(), 367 }, 368 function (data) {//修改成功后需要关闭弹窗并且重载表格 369 layer.close(index) 370 layer.msg('新增成功！', {icon: 1}) 371 normalProblemTable.reload() 372 } 373 ) 374 }, 375 btn2: function (index, layero) { 376 layer.close(index) 377 } 378 }); 379 //新增问题的时候，需要加载问题类型 380 $.get('{% url 'service:get_problemsType' %}', function (data) { 381 $('#normal-problem-edit-type').append("<option value=\"\"></option>"); 382 for (var i = 0; i < data.length; i++) { 383 $('#normal-problem-add-type').append("<option value='" + data[i].id + "'>" + data[i].type + "</option"); 384 } 385 form.render('select'); 386 }); 387 $('#normal-problem-add-recordpeople').val('{{ request.user.rtx_name }}') 388 } 389 } 390 391 //监听全局工具栏按钮点击 392 $('#normal-problem-panel-tool > .layui-btn').on('click', function () { 393 var type = $(this).data('type'); 394 //如果normalProblemPanelTools[type]存在则call,否则为"" 395 normalProblemPanelTools[type] ? normalProblemPanelTools[type].call(this) : ""; 396 }) 397 }) 398 </script> 399 </body> 400 </html>
整体上table各个操作还是较为简单，重点还是在于如何通过ajax获取服务器数据赋值等操作
