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

Posted sunnymn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

      


















































以上是关于JS快速完成数据库数据显示的主要内容,如果未能解决你的问题,请参考以下文章

4行代码就可以完成一个Web版的3D地球可视化展示——Gio.js

译文:18个实用的JavaScript代码片段,助你快速处理日常编程任务

vs2003:快速片段工具

自动完成文本未显示实际数据代码点火器?

将代码片段插入数据库并在 textarea 中以相同方式显示

c_cpp 这个简单的代码片段显示了如何使用有符号整数在C中完成插值。 for()循环确定要插入的范围