JS快速完成数据库数据显示
在写项目的过程中遇到问题时应该怎么做？
- 搜现成模块
- 上网查找模块的基本使用，找文档
- 看源码
- stackoverflow上查找
主要实现：增删改查组件（JS）
内容详情：
服务器列表：两种方法
- 获取数据，模板语言渲染
- js获取数据，js动态创建table标签（采用）
方法：通过ajax向从后端获得数据
<div class="container"> <h1>服务器列表</h1> <table class="table table-bordered"> <thead id="tHead"> <tr></tr> </thead> <tbody id="tBody"></tbody> </table> </div>
/* 向后端获取数据 */
function init() {
$.ajax({
url:requestUrl,
type:"GET",
data:{},
success:function (response) {
/* 处理表头 */
initTableHead(response.table_config);
/* 处理显示内容 */
initTableBody(response.data_list,response.table_config);
$('.loading').addClass('hide'); //当数据显示出来，隐藏加载图片
},
error:function () {
$('.loading').addClass('hide');
}
})
}
功能：
订制表头：function initTableHead(table_config)
//定制表头 function initTableHead(table_config) { $('#tHead tr').empty(); $.each(table_config,function (index,val) { var th = $("<th>"); th.html(val.title); $('#tHead tr').append(th); }) }
订制显示内容：function initTableBody(table_config,data_list)
- 知识点：1 字符串格式化
2 自定义规则 ： @
//定制表体 function initTableBody(data_list,table_config) { $.each(data_list,function (k,row_dict) { var tr = $('<tr>'); $.each(table_config,function (kk,vv) { var td = $('<td>'); var format_dict = {}; $.each(vv.text.kwargs,function (kkk,vvv) { if (vvv[0] === '@'){ var name = vvv.substring(1,vvv.length); format_dict[kkk] = row_dict[name]; // 自定义规则：以@开头的，去数据库中取数据. }else { format_dict[kkk] = vvv; } }); td.html(vv.text.tp1.format(format_dict)); // 字符串格式化后加到td标签中 tr.append(td); }); $('#tBody').append(tr); }) }
加载框：图片放到static中，配置静态文件，注意一般不使用STATIC_ROOT
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static'),
]
<div class="loading"> <div class="img"></div> </div>
<style>
.loading{
position: fixed;
top:0;
left:0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 1000; // 设置元素的堆叠顺序，值越大越在前面。
}
.loading .img{
height: 32px;
width: 32px;
background: url("{% static 'images/loading.gif' %}");
position: fixed;
top:50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
z-index: 10001;
}
.hide{
display: none;
}
</style>
用在什么地方？
当从后端取数据比较慢时，在这期间可以加上加载的图片。当数据加载出来，就隐藏加载图片。
前端JS整合：
涉及的知识点：
- 自执行函数【让我们定义的函数名不和其他的函数名冲突】
(function(args){ alert(args) })(666)
- jQuery扩展【在函数内部可以执行程序】
$.extend({ "xxxx": function(args){ alert(args) } }) $.xxxx(6666)
- js 中的作用域：首先在当前作用域找，再上层
最后整合的信息快速显示的组件为：
(function (jq) { var requestUrl = ''; String.prototype.format = function (args) { return this.replace(/\{(\w+)\}/g, function (s, i) { return args[i]; }); }; /* 向后端获取数据 */ function init() { $.ajax({ url:requestUrl, type:"GET", data:{}, success:function (response) { /* 处理表头 */ initTableHead(response.table_config); initTableBody(response.data_list,response.table_config); $('.loading').addClass('hide'); }, error:function () { $('.loading').addClass('hide'); } }) } //定制表头 function initTableHead(table_config) { $('#tHead tr').empty(); $.each(table_config,function (index,val) { var th = $("<th>"); th.html(val.title); $('#tHead tr').append(th); }) } //定制表体 function initTableBody(data_list,table_config) { $.each(data_list,function (k,row_dict) { var tr = $('<tr>'); $.each(table_config,function (kk,vv) { var td = $('<td>'); var format_dict = {}; $.each(vv.text.kwargs,function (kkk,vvv) { if (vvv[0] === '@'){ var name = vvv.substring(1,vvv.length); format_dict[kkk] = row_dict[name]; }else { format_dict[kkk] = vvv; } }); td.html(vv.text.tp1.format(format_dict)); tr.append(td); }); $('#tBody').append(tr); }) } // jquery 扩展 jq.extend({ 'nBList':function (url) { requestUrl = url; init(); } }) })(jQuery);
HTML中简化为：
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}"> <style> .loading{ position: fixed; top:0; left:0; right: 0; bottom: 0; background-color: black; opacity: 0.4; z-index: 1000; } .loading .img{ height: 32px; width: 32px; background: url("{% static 'images/loading.gif' %}"); position: fixed; top:50%; left: 50%; margin-top: -16px; margin-left: -16px; z-index: 10001; } .hide{ display: none; } </style> </head> <body> <div class="loading"> <div class="img"></div> </div> <div class="container"> <h1>服务器列表</h1> <table class="table table-bordered"> <thead id="tHead"> <tr></tr> </thead> <tbody id="tBody"></tbody> </table> </div> <script src="{% static 'bootstrap/js/jquery-3.2.1.js' %}"></script> <script src="{% static 'bootstrap/js/nb-list.js' %}"></script> <script> $(function () { $.nBList('/server_json.html'); }) </script> </body> </html>
