一、几个常用js指令

• document.createElement(' ')创建标签

• td.innerHTML= row[colConfig.q] 标签内的对应文本

• $(tr).append(td) 子标签加入父类标签，也可以通过id，class等定位

• $.each(循环的列表,function (k,colConfig) {}each中两个参数分别是，要循环的列表和function，其中function中的k是列表的位置[0][1]....,colConfig是内容

（1.1） 自定义string方法String.prototype,

因为所有的封装了字符串的所有方法都在这个函数，我们可以写一个类似于python中format函数自定义js的string思路

• （1.1.1）"{m}-{n}"为格式化的字符串

• （1.1.2）"{'n':"机柜",'m':"xx`"}"替换的格式内容

• 这里面的this 相当于self值得这个对象，这就是这个字符串，这个例子中的this代指测试经验:{age}-{gender}

    String.prototype.format=function (kwargs) {
        console.log(this);
        //用正则匹配要替换的内容
        var ret = this.replace(/\{(\w+)\}/g,function(km,m){
                //return 会替换完后返回替换后的值,m是正则匹配的占位符
                return kwargs[m];
        });
      //返回替换后的字符
        return ret;
    };
var v = "测试经验:{age}-{gender}"
alert(v.ceshi({"age":'28','gender':'男'}))

二、思路

访问整体框架页面后， 触发ajax请求，触发数据展示

• html 代码先搭建一个table框架

    <h1>资产列表</h1>
    <table border="1">
        <thead id="table_th">
        </thead>
        <tbody id="table_td">
        </tbody>
    </table>

• ajax编写，在ajax中分别写两个函数分别是initHeader初始化表头，initBody初始化表格内容信息

 $(function () {
        init();
    })

    function init() {
        $.ajax({
            url:'/asset-json.html',
            type:'GET',
            dataType:'JSON',
            success:function (result) {
                initHeader(result.table_config);
                initBody(result.table_config,result.data_list);
            }
        })
    }

• 初始化 initHeader初始化表头编写,因为表头信息都保存在配置文件中，所以通过获取配置文件列表，循环并取出里面的title，其中item.display决定是否显示

function initHeader(table_config) {
        var tr = document.createElement('tr')
        /**循环保存的配置文件列表**/
       $.each(table_config,function (k,item) {
        /**决定是否显示**/
           if(item.display) {
               var th = document.createElement('th')
               th.innerHTML = item.title;
               $(tr).append(th)
           }
       })
        $('#table_th').append(tr)
    }

• 展示table中的数据，其中table中的行是，数据库中查询的数据个数，列是配置文件决定的现实标题数,这里我们传了两个值，分别是数据库查询的数据行，和配置文件列

• 首先 我们要对字符串的拼接做一份处理好的有数据库值的拼接,这里用了一个新字典来处理，字典中的k是替换的标记，v是替换的内容，其中@符号的v保存的是数据库的字段

                         kwargs = {}
                        $.each(colConfig.text.kwargs,function (k,v) {
                            if (v[0] == "@"){
                                kwargs[k] = row[v.substring(1,v.length)]
                            }else{
                                kwargs[k] = v
                            }
                        })

最后的逻辑

       function initBody(table_config,data_list) {

       /** data_list 是数据库查回的数据，有多少条就有多少行 **/
        $.each(data_list,function (k,row) {
                var tr = document.createElement('tr')
                /** table_config 是标题标题管的是多少列 **/
                $.each(table_config,function (k,colConfig) {
                    if(colConfig.display) {
                        //colConfig.text.content = "{m}-{n}"为格式化的字符串
                        //colConfig.text.kwargs = "{'n':"机柜",'m':"xx`"}"替换的格式内容
                       //自定义string方法
                        //封装了字符串的所有方法
                        kwargs = {}
                        $.each(colConfig.text.kwargs,function (k,v) {

                            if(v.substring(0,2) == "@@"){
                                var globalName = v.substring(2,v.length);
                                var currentId = row[colConfig.q];
                                var t = getTextFromGlobalById(globalName,currentId);
                                kwargs[k] = t
                            }

                            else if (v[0] == "@"){
                                kwargs[k] = row[v.substring(1,v.length)]
                            }else{
                                kwargs[k] = v
                            }
                        })


                        var temp = colConfig.text.content.format(kwargs)


                        var td = document.createElement('td')
                        /** q保存数据库的字段等同于数据库查出的k **/
                        //null 在这修改
                         td.innerHTML = temp
                        //设置属性
                        $.each(colConfig.attrs,function (kk,vv) {
                               td.setAttribute(kk,vv)

                        })
                        $(tr).append(td)
                    }
                })


               $('#table_td').append(tr)

       })
    }