dict war hide meta set 格式化 table tab prototype
在写项目的过程中遇到问题时应该怎么做?
- 搜现成模块
- 上网查找模块的基本使用,找文档
- 看源码
- 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快速完成数据库数据显示
来源: http://www.bubuko.com/infodetail-2346777.html