JS快速完成数据库数据显示

Posted 2020-10-10 sunnymn

在写项目的过程中遇到问题时应该怎么做？

　　- 搜现成模块

　　- 上网查找模块的基本使用，找文档

　　- 看源码

       - 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>