day92

一。

 1 from django.shortcuts import render
 2 from django.http import JsonResponse
 3 from repository import models
 4 
 5 def server(request):
 6     return render(request,'server.html')
 7 
 8 def server_json(request):
 9     table_config = [
10         {
11             'q':'hostname',
12             'title':'主机名',
13         },
14          {
15             'q':'sn',
16             'title':'序列化',
17         },
18          {
19             'q':'os_platform', #！一个字段都不能错，否则数据库无法查询会报错
20             'title':'系统',
21         },
22     ]
23     values = []
24     for i in table_config:
25         values.append(i['q'])
26     server_list = models.Server.objects.values(*values) #!忘记为values非filter
27     response = {
28         'data_list':list(server_list), #!忘记list
29         'table_config':table_config
30     }
31     return JsonResponse(response)

web views

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
 7 </head>
 8 <body>
 9     <div class="container">
10         <h1>服务器列表</h1>
11         <table class="table table-bordered">
12             <thead id="tHead">
13                 <tr></tr>
14             </thead>
15             <tbody id="tBody">
16                 <tr></tr>
17             </tbody>
18         </table>
19     </div>
20     </body>
21     <script src="/static/js/jquery-3.2.1.js"></script>
22     <script>
23         $(function () {
24             init()
25         });
26 
27         function init() {
28             $.ajax({
29                 url: '/server_json.html',
30                 type: 'GET',
31                 data: {},
32                 datatype: 'JSON',
33                 success: function (reponse) {
34                     initTableHead(reponse.table_config);
35                 }
36             });
37 
38             function initTableHead(table_config) {
39                 $('#tHead tr').empty();
40                 $.each(table_config, function (k, conf) {
41                     var th = document.createElement('th');
42                     th.innerHTML = conf.title;
43                     {# 取到 字典中的【title】 #}
44                     $('#tHead tr').append(th);
45                 });
46             }
47         }
48 
49 
50     </script>
51 
52 </html>

template server.html

二。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
  7     <style>
  8         .loading{
  9             position: fixed;
 10             top: 0;
 11             bottom: 0;
 12             right: 0;
 13             left: 0;
 14             background-color: white;
 15             opacity: 0.4;
 16             z-index: 1000;
 17         }
 18 
 19         .loading .img{
 20             height: 32px;
 21             width: 32px;
 22             background: url("/static/img/loading.gif");
 23             position: fixed;
 24             left: 50%;
 25             top: 50%;
 26             margin-left: -16px;
 27             margin-top: -16px;
 28             z-index: 1001;
 29 
 30         }
 31 
 32     </style>
 33 </head>
 34 <body>
 35     <div class="container">
 36         <h1>服务器列表</h1>
 37         <table class="table table-bordered">
 38             <thead id="tHead">
 39                 <tr></tr>
 40             </thead>
 41             <tbody id="tBody">
 42                 <tr></tr>
 43             </tbody>
 44         </table>
 45     </div>
 46     <div id="loading" class="loading">
 47         <div class="img"></div>
 48     </div>
 49 
 50     <script src="/static/js/jquery-3.2.1.js"></script>
 51     <script>
 52         $(function () {
 53             init()
 54         });
 55 
 56         function init() {
 57             $.ajax({
 58                 url: '/server_json.html',
 59                 type: 'GET',
 60                 data: {},
 61                 datatype: 'JSON',
 62                 success: function (response) {
 63                     initTableHead(response.table_config);
 64                     initTableBody(response.data_list,response.table_config);
 65                     $('#loading').addClass('hide');
 66                 },
 67                 error:function () {
 68                      $('#loading').addClass('hide');
 69                 }
 70             });
 71 
 72             function initTableHead(table_config) {
 73                 $('#tHead tr').empty();
 74                 $.each(table_config, function (k, conf) {
 75                     console.log(k);
 76                     console.log(conf);
 77                     var th = document.createElement('th');
 78                     th.innerHTML = conf.title;
 79                     {# 取到 字典中的【title】 #}
 80                     $('#tHead tr').append(th);
 81                 });
 82             }
 83             
 84             function initTableBody(data_list,table_config) {
 85                 $.each(data_list,function (k,row_dict) {
 86                     var tr = document.createElement('tr');
 87                     $.each(table_config,function (kk,vv) {
 88                         var td = document.createElement('td');
 89                         td.innerHTML = row_dict[vv.q];
 90                         $(tr).append(td);
 91                     });
 92                     $('#tBody').append(tr);
 93                 })
 94             }
 95         }
 96 
 97 
 98     </script>
 99     </body>
100 </html>

template server.html 加载转圈