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>