js简单封装:简单把数据直接输出到表格之中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/WPR13005655989/article/details/81571227

为了更方便实现字符串的格式化,这里仿照其他语言写了format这个函数,如下:

//格式化字符串,这个方法网上有很多例子 不懂自行百度吧
String.prototype.format = function (param) {
    var reg = /{([^{}]+)}/gm;
    return this.replace(reg, function (match, name) {
        return param[name];
    });
};

接下来到重点,上代码:

/**
 * 清除并加载数组到表格中
 * @param table_id 表格ID 需要带# 如"#myTable"
 * @param tr_template 带参数的行模板 
 * @param arr_data 模板对应的数据
 * @param arr_params_name 模板对应的参数 需要和arr_data的长度一致
 */
Utils.loadListToTable = function (table_id, tr_template, arr_data, arr_params_name) {
    var table = $(table_id);
    var paramsLen = arr_params_name.length;//获取参数的长度
    //移除已经存在的行
    $(table_id+" tr:not(:first)").remove();

    if(arr_data.length<1){
//因为本人采用Ajax加载数据,所以为了避免没有效果,这里做了个判断,
//如果传入的数据长度小于1的话,直接在表格提示没有数据
        var non='<tr rowspan="3"class="text-center"><td colspan="'+paramsLen+'" style="color: #9e9e9e57;">什么都没有</td></tr>'
        $(table_id+" tbody:last").append(non);
    }

    for (var j = 0; j < arr_data.length; j++) {

        var formatParams = {};
        //构造参数
        for (var i = 0; i < paramsLen; i++) {
            formatParams[arr_params_name[i]] = arr_data[j][arr_params_name[i]];
        }

        var row=tr_template.format(formatParams);
        $(table_id+" tbody:last").append(row);
    }
};

使用例子:

页面代码(只列出关键代码):

 <div>

 <table id="myTable">

 <thead>
    <tr>
         <th>姓名</th>
         <th>密码</th>
    </tr>
 </thead>
 <tbody>

</tbody>

</table>

</div>

初始界面:

数据准备:

//生成一组数据
var testData=[{name:'wpr',pwd:'123'},{name:'wrp',pwd:'456'},{name:'rwp',pwd:'789'},{name:'wrp',pwd:'000'},{name:'prw',pwd:'666'}];
//行的模板 这里的目标表格列数为两列
var row_templ = '<tr><td>{name}</td><td>{pwd}</td></tr>';

//构造参数列表,方便格式化
var paramsName=['name','pwd'];

//加载数据至表格
 Utils.loadListToTable('#myTable',row_templ ,testData,paramsName);

加载结果:

所有js代码:

$(function(){

function Utils(){}

Utils.loadListToTable = function (table_id, tr_template, arr_data, arr_params_name) {
    var table = $(table_id);
    var paramsLen = arr_params_name.length;//获取参数的长度
    //移除已经存在的行
    $(table_id+" tr:not(:first)").remove();

    if(arr_data.length<1){
        var non='<tr rowspan="3"class="text-center"><td colspan="'+paramsLen+'" style="color: #9e9e9e57;">什么都没有</td></tr>'
        $(table_id+" tbody:last").append(non);
    }

    for (var j = 0; j < arr_data.length; j++) {

        var formatParams = {};
        //构造参数
        for (var i = 0; i < paramsLen; i++) {
            formatParams[arr_params_name[i]] = arr_data[j][arr_params_name[i]];
        }

        var row=tr_template.format(formatParams);
        $(table_id+" tbody:last").append(row);
    }


};

//格式化字符串,这个方法网上有很多例子 不懂自行百度吧
String.prototype.format = function (param) {
    var reg = /{([^{}]+)}/gm;
    return this.replace(reg, function (match, name) {
        return param[name];
    });
};


//生成一组数据
var testData=[{name:'wpr',pwd:'123'},{name:'wrp',pwd:'456'},{name:'rwp',pwd:'789'},{name:'wrp',pwd:'000'},{name:'prw',pwd:'666'}];
//行的模板 这里的目标表格列数为两列
var row_templ = '<tr><td>{name}</td><td>{pwd}</td></tr>';

//构造参数列表,方便格式化
var paramsName=['name','pwd'];
//>------需要注意 行模板{}中的值和paramsName里面的名需要对应,其实可以进一步封装------<

//加载数据至表格
 Utils.loadListToTable('#myTable',row_templ ,testData,paramsName);

})

猜你喜欢

转载自blog.csdn.net/WPR13005655989/article/details/81571227