通过js代码来制作数据库增删改查插件

代码流程

　　1、订制表头：table_config
　　2、订制显示内容: table_config，data_list

　　3、加载框: 图片,position:fixed
       4、-字符串格式化
       5、 自定义规则 @
       6、前端js整合：
       7、自执行函数【让我们自定义函数名和其他函数不冲突】 
       8、 jquery扩展【在函数内部可以执行程序】
            - js，函数作为作用域，首先当前找，上层找

整体代码

　　

/*自执行函数*/
(function (jq) {

    var requestUrl = "";
　　/*字符串格式化*/
    String.prototype.format = function (args) {
        return this.replace(/{(w+)}/g, function (s, i) {
            return args[i];
        });
    };

    /*
    向后台获取数据，
     */
    function init() {
        $('#loading').removeClass('hide');

        $.ajax({
            url:requestUrl,
            type: 'GET',
            data: {},
            dataType: 'JSON',
            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 (k,conf) {

                var th = document.createElement('th');
                th.innerHTML = conf.title;
                $('#tHead tr').append(th);

            });
    }
/*处理表体数据*/
    function initTableBody(data_list,table_config) {
        $.each(data_list,function (k,row_dict) {
            // {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'},
            // {'hostname':'xx1', 'sn':'xx2', 'os_platform':'xxx2'},
            var tr = document.createElement('tr');
            $.each(table_config,function (kk,vv) {
                var td = document.createElement('td');
                // td.innerHTML = row_dict[vv.q];   //vv.q // None,hostname,sn,os_platform
                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.innerHTML = vv.text.tpl.format(format_dict);
                console.log(format_dict)
                $(tr).append(td);
            });

            $('#tBody').append(tr);
        })

    }
   /*自定义在函数内部执行程序*/
    jq.extend({
        "nBList":function (url) {
            requestUrl = url;
            init();
        }
    });

})(jQuery);