Django+Layui学习二:Table

Posted 绪哥哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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获取服务器数据赋值等操作

以上是关于Django+Layui学习二:Table的主要内容,如果未能解决你的问题,请参考以下文章

layui的table使用,二

layui table表格详解

Layui:数据表格table中预览图片视频

layui table中添加一列序号列

Django+Layui学习一:后台布局

layui实现table加载的示例代码