在写代码的时候,每次写完,都要思考一下,代码要怎么样才可以具有通用性,也就是在别的地方,也一样可以使用,这就是封装。在做后台管理系统的时候,我们就会发现,后台在展示数据的时候,通常都是以表格的形式来展示数据的。而在表格中展示的这些数据,后端传过来的,通常是一个json的数组,类似于这样的:
var data = [{"id":1,"name":"张三","sex":"男"},
{"id":2,"name":"李雷","sex":"男"},
{"id":3,"name":"美美","sex":"女"},
{"id":4,"name":"小红","sex":"女"}];
基于此,我们可以封装一个通用的方法,把json数组,转化成表格,后面再遇到类似的情况,只需要调用这个方法就可以了。那这个方法,要怎么样封装呢?我们使用jquery框架来进行编写,当然jquery并不是必须的。首先,我们分析,这是一个数组,数组的每一个元素是一个json,并且每个json的各个属性名称是一样的,个数也是一样的,就像上面的例子,每个json都有id、name、sex三个属性。那么就可以先取出数组中的第一个json,然后遍历它的属性,拿出属性名,作为表格的表头。然后遍历这个数组,取出各个json的属性值,作为表格的内容。于是,方法就成这样:
function json2table(data){
var thead = '';
//取出第一个json的属性名,作为表头
$.each(data[0], function(key, val){
thead += '<th>'+key+'</th>';
});
thead = '<tr>'+thead+'</tr>';
var tbody = '';
//遍历数组,生成表格
$.each(data, function(i,val){
var tr = '';
//遍历json,取出属性值,作为表格的内容
$.each(val,function(j, val2){
tr += '<td>'+val2+'</td>';
});
tbody += '<tr>'+tr+'</tr>';
});
//把表格添加到页面
$('<table></table>').append($(thead)).append($(tbody)).appendTo($('body'));
}
然后,调用这个方法,把前面的data数据,传给方法,页面展示就是:
因为现在表格,没有加任何的样式,所以有点丑,但这不是我们要重点关注的地方,添加css样式,又没有什么逻辑,我们的重点是把逻辑弄好,现在要考虑的一个问题是,如果后端传过来的data是空的,要怎么弄?通常,如果后端传过来的数据为空的话,页面就会给出一句提示语:没有找到数据!没有数据就显示一句话,有数据就显示一张表格。好像不好做呢?我们可以这样做,在页面放一个div,也就是容器。如果后端传过来的数据为空,就把这句话放到div中,不会生成表格;如果有内容,就生成表格,放到这个div中。那放到div中,到底放到哪个div中呢,所以方法要再添加一个参数,用来告诉方法,解析的表格,放到哪里去。再然后,我们通常会看到,在生成的表格里面,后面一列,通常会加上一些操作列,但这个操作列,很多情况下,都会有一些不一样的。所以这个,也作为参数,传入方法。再有,就是后端响应过来的json,可能并不需要全部展示,只是展示其中的一部分数据,那么这个,就再定义一个参数,把要展示的字段名,放到数组中,传入方法内。
function json2table(data, json, arrHead, targets){
var arr = [];
//定义容器的默认ID
var target = 'tableParent';
//判断第三个参数,如果是数组,且长度不为0
if($.isArray(arrHead) && arrHead.length>0){
//把arrHead作为json中要取出来的字段数组
arr = arrHead;
//如果第四个参数不为空,那么就把第四个参数作为容器的ID
if(!$.isEmptyObject(targets)){
target = targets;
}
}else{ //走这个分支,就代表第三个参数不是数组
//判断第三个参数是否为空,不为空,那么就把第三个参数作为容器的ID
if(!$.isEmptyObject(arrHead)){
target = arrHead;
}
//遍历data的第一个json,取出key,作为表格中要展示的字段
if(data.length>0){
$.each(data[0], function(key,val){
arr.push(key);
});
}
}
//每次调用方法,先把容器的内容清空,翻页时,肯定是要清空上一次的内容的
$('#'+target).empty();
//如果第一个参数,数组的长度为0,就代表没有数据,给个提示语,退出方法,不生成表格
if(data.length == 0){
$('#'+target).append($('<p style="margin:50px 0;text-align:center">没有查到数据!</p>'))
return;
}
var thead = '';
//遍历arr,也就是要展示的字段,加入表头
$.each(arr, function(i, val){
thead += '<th>'+val+'</th>';
});
//遍历json,也就是自定义的操作列,取key加入表头,允许多个操作列
$.each(json, function(key, val){
thead += '<th>'+key+'</th>';
});
thead = '<tr>'+thead+'</tr>';
var tbody = '';
//遍历数据,加入表格
$.each(data, function(i,val){
var tr = '';
//数据加入表格
$.each(arr,function(j, val2){
tr += '<td>'+val[val2]+'</td>';
});
//自定义列加入表格
$.each(json, function(key,val3){
tr += '<td>'+val3+'</td>';
});
tbody += '<tr>'+tr+'</tr>';
});
//表格加入容器
$('<table class="tabless"></table>').append($(thead)).append($(tbody)).appendTo($('#'+target));
}
方法最后就封装成这样子了,方法的前面一部分,都是在做兼容处理,也就是,最后面的两个参数,可以省掉一个不传,或是两个都不传。意味着只有前面两个参数是必须传的,如果表格实在是没有操作列,第二个参数也必须传,传个空的json就可以了。这样,后面再遇到要把后端传过来的json数据解析成表格的情况,只需要调用这个方法就可以了。
欢迎加入测试群:91425817,一起讨论测试的那此事。