js簡單封裝：簡單把數據直接輸出到表格之中

為了更方便實現字符串的格式化，這里仿照其他語言寫了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);

})