一、

表头的生成

1. 通过ajax从后台获取数据

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

1. 编写table头函数initHeader（）

可扩展加编号title

思路利用document.createElement生成tr，th标签，通过循环列数来生成table头

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').empty()
        $('#table_th').append(tr)
    }

表内容的生成

1. 编写table内容函数initBody()函数生成表格内容

可扩展加编号title

思路利用document.createElement生成tr，th标签，通过循环列数来生成table头

表格的展示形式行*列双层循环

function initBody(table_config,data_list) {
         $('#table_td').empty();
       /** data_list 是数据库查回的数据，有多少条就有多少行 **/

            for(var i=0; i<data_list.length; i++){
                var row = data_list[i]
                var tr = document.createElement('tr')
                //给tr 设置属性,吧当前数据库中的id放到tr中
                tr.setAttribute('row-id',row['id'])

                /** table_config 是标题标题管的是多少列 **/
                $.each(table_config,function (k,colConfig) {
                    if(colConfig.display) {
                        //colConfig.text.content = "{m}-{n}"为格式化的字符串
                        //colConfig.text.kwargs = "{'n':"机柜",'m':"xx`"}"替换的格式内容
                       //自定义string方法
                        //封装了字符串的所有方法
                        var td = document.createElement('td')
                        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)
                        /** q保存数据库的字段等同于数据库查出的k **/
                        //null 在这修改
                         td.innerHTML = temp
                        //设置属性
                        $.each(colConfig.attrs,function (kk,vv) {
                            if(vv[0] == "@"){
                                //生成下拉框value
                                td.setAttribute(kk,row[vv.substring(1,vv.length)])

                            }else{
                                td.setAttribute(kk,vv)
                            }
                        })
                        $(tr).append(td);
                    }
                });


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

       }
    }

2.编写表内容中的js string自定义的方法

下面的案例打印出来的是sss测试

String.prototype.text= function (kwargs) {
        return "sss"+this

    }
    alert("测试".text())

编写一个用来替换自定义差价格式的转换js，替换的格式{n}-{m}，替换的内容在view定义好，这里使用了和字段同名的命名方式，为了保证可以替换数据查出来的信息

String.prototype.format=function (kwargs) {
        //用正则匹配要替换的内容
        var ret = this.replace(/\{(\w+)\}/g,function(km,m){
                //return 会替换完后返回替换后的值,m是正则匹配的占位符
               //return 通过字典里面的k替换掉，被替换的字符串
                return kwargs[m];
        });

        return ret;
    };

3.编写用来封装的跨表查询数据

function getTextFromGlobalById(globalName,currentId){
            $.each(globalName,function (k,item) {
                if(item[0]==currentId){
                    ret = item[1]
                    return
                }
            });
            return ret
        }