电子商城后台系统（七）：前端json2table方法封装

在写代码的时候，每次写完，都要思考一下，代码要怎么样才可以具有通用性，也就是在别的地方，也一样可以使用，这就是封装。在做后台管理系统的时候，我们就会发现，后台在展示数据的时候，通常都是以表格的形式来展示数据的。而在表格中展示的这些数据，后端传过来的，通常是一个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，一起讨论测试的那此事。