Django+Layui学习二：Table
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Django+Layui学习二：Table，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含19891字，纯文字阅读大概需要29分钟。
内容图文
前言
前面学习了后台布局和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 7class Meta:
8 verbose_name=‘问题类型‘ 9 verbose_name_plural=verbose_name
1011def__str__(self):
12return self.problem_type
1314#普通问题15class 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=‘记录时间‘)
2425class Meta:
26 verbose_name=‘普通问题‘27 verbose_name_plural=verbose_name
28 ordering=[‘-recorddate‘]
2930def__str__(self):
31return"{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 = []
5for type in types:
6 dic = {}
7 dic[‘id‘] = type.id
8 dic[‘type‘] = type.problem_type
9 dict.append(dic)
10return JsonResponse(dict, safe=False) 24 25# 打开所有普通问题界面数据界面 26@csrf_exempt
27def open_normalProblem_panel(request):
28return render(request, ‘service/normal-problem/normal-problem-panel.html‘)
29 30 31# 获取所有普通问题 32@csrf_exempt
33def 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 = []
46for 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
62return JsonResponse(resultdict, safe=False)
63 64 65# 获取单个普通问题 66@csrf_exempt
67def 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
81return JsonResponse(dic, safe=False)
82 83 84# 新增问题 85@csrf_exempt
86def 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()
99return JsonResponse({‘message‘: 1}, safe=False)
100101102# 编辑普通问题103@csrf_exempt
104def 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()
121return 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">103104</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>158159<!--编辑问题弹出框-->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">177178</select>179180</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>233234<script src="{% static ‘layui/layui.js‘ %}"></script>235<script>236237 layui.use([‘table‘, ‘jquery‘, ‘layer‘, ‘form‘], function () {
238var table = layui.table,
239 layer = layui.layer,
240 form = layui.form,
241 $ = layui.jquery;
242243//渲染表格244var normalProblemTable = table.render({//渲染table245 method: ‘post‘,//数据传输方式为post246 height: ‘full-20‘,//高度为屏幕高度-20247 cellMinWidth: 80,//单元格最小宽度为80248 page: true,//开启分页249 limit: 30,//分页默认为30250 elem: ‘#normal-problem-panel-table‘,//设置容器251 url: ‘{% url ‘service:get_normalProblems‘ %}‘,//数据获取url252 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 });
261262//监听工具条，每行263 table.on(‘tool(data-table)‘, function (obj) {
264var data = obj.data;
265if (obj.event ===‘detail‘) {//如果event是detail,这里的event名称需要在容器中设置lay-event266 $.post(//向服务器发送问题id，获取选中问题行的数据267‘{% url ‘service:get_normalProblem‘ %}‘,
268 {id: data.id},
269function (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 } elseif (obj.event ===‘del‘) {
290 layer.confirm(‘真的删除行么‘, function (index) {
291 obj.del();
292 layer.close(index);
293 });
294 } elseif (obj.event ===‘edit‘) {
295 $.post(//根据id获取服务器中的数据296‘{% url ‘service:get_normalProblem‘ %}‘,
297 {id: data.id},
298function (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 },
316function (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>");329for (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 });
347348//监听工具条，全局349var 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 },
368function (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>");
382for (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 }
390391//监听全局工具栏按钮点击392 $(‘#normal-problem-panel-tool > .layui-btn‘).on(‘click‘, function () {
393var 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获取服务器数据赋值等操作
原文：https://www.cnblogs.com/xugege/p/8496577.html
内容总结
以上是互联网集市为您收集整理的Django+Layui学习二：Table全部内容，希望文章能够帮你解决Django+Layui学习二：Table所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】