版权声明:本文为博主原创文章,未经博主允许不得转载。 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);
})