一。
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)
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>
二。
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>