参数管理

该片博客写的是如何写参数规格

什么是参数规格

如图

o

 

为什么要有参数规格：为了让客户更好的了解该商品

问题在哪里：每一种商品的规格都是不一样的 那么在后台就不能直接定义一个固定的类，去存储

那么就直接存储json格式的字符串

一个商品不只有一个group

如图

那么json数据为[{"group":"主体","params":["品牌","型号","颜色","上市年份"]},{"group":"网络","params":["4G网络制式","3G网络制式","2G网络制式"]}]

一个商品的规格json为：[{"group":"主体","params":[{"k":"品牌","v":"苹果（Apple）"},{"k":"型号","v":"iPhone 6 A1586"},{"k":"颜色","v":"金色"},{"k":"上市年份","v":"2014"}]},{"group":"网络","params":[{"k":"4G网络制式","v":"移动4G(TD-LTE)/联通4G(FDD-LTE)/电信4G(FDD-LTE)"},{"k":"3G网络制式","v":"移动3G(TD-SCDMA)/联通3G(WCDMA)/电信3G（CDMA2000）"},{"k":"2G网络制式","v":"移动2G/联通2G(GSM)/电信2G(CDMA)"}]},{"group":"存储","params":[{"k":"机身内存","v":"16GB ROM"},{"k":"储存卡类型","v":"不支持"}]}]

有三个表：

1.设计模板group和property 重点在于如何动态生成表格 和读取表格中的数据并生成json字符串

第一步：

把表格直接设计出来 ：

第二步：用js方法把表格拼成来

var table='<table class="wzq" border="1"><th colspan="2"><input type="text" name="group"></th><tr>'
	   	 	+'<td><input type="text" name="param"></td>'
	   	 	+'<td></td>'
	   	    +'</tr>'
	   	    +'<tr>'
	   	 	+'<td><button onclick="addatt(this)">添加属性</button></td>'
	   	 	+'<td></td>'
	   	    +'</tr>'
	        +'</table>';

第三步：设计一个button的onclick方法：可以把table放入要的html模块中

	function addtable(){
			var table='<table class="wzq" border="1"><th colspan="2"><input type="text" name="group"></th><tr>'
	   	 	+'<td><input type="text" name="param"></td>'
	   	 	+'<td></td>'
	   	    +'</tr>'
	   	    +'<tr>'
	   	 	+'<td><button onclick="addatt(this)">添加属性</button></td>'
	   	 	+'<td></td>'
	   	    +'</tr>'
	        +'</table>';
			$("#haha").append(table);
			
		}
<button onClick="addtable(this)">添加表格</button>

 第二张表：根据模板来设置商品的规格重点在于如何动态生成模板表格 和读取表格中的数据并生成json字符串

第一步：

把表格直接设计出来 ：

第三步：读取json数据用js方法把表格拼成来

var url='[{"group":"主体","params":["品牌","型号","颜色","上市年份"]},{"group":"网络","params":["4G网络制式","3G网络制式","2G网络制式"]}]';
			var data=JSON.parse(url);
			console.debug(data);
			for (var i in data) {				
				var html=data[i];
				console.debug(html);
				var table='<table class="load">'
			    +'<th colspan="2">'+html.group
			    +'</th>';	    
			    for (var t=0;t<html.params.length;t++) {
			    	table+='<tr>';			    	
			    	table=table+'<td>'+html.params[t]+'</td>';
			    	table=table+'<td><input type="text" name="key"></td>';
			    	table=table+'/<tr>';
			    }
			+'</table>';	
			$("#faker").append(table);

第三步：设计一个button的onclick方法：可以把table放入要的html模块中

第四步：读取table中的数据生成json数据字符串

function setcate(){
			var catajsons=new Array();
			$(".load").each(function(i,e){
				var ele=$(e);
				console.debug(ele);
				var text=ele.find("th").text();	
				var params=new Array();
				$(e).find("input[name='key']").each(function(j,item){
				var v=item.value;				
				var k=$(item).parent().prev().text();
                var kv={
                	"k":k,
                	"v":v
                }               
                params.push(kv);
         });      
           		
           		var catajson={
                	"group":text,
                	"params":params
                }
           catajsons.push(catajson);           
		});
		console.debug(catajsons);
		}

第三张表：参数的显示：根据模板来显示商品的规格 重点在于如何动态生成模板表格 和读取表json字符串的数据

第一步：

把表格直接设计出来 ：

第三步：读取json数据用js方法把表格拼成来

$(function(){
			var url='[{"group":"主体","params":[{"k":"品牌","v":"苹果（Apple）"},{"k":"型号","v":"iPhone 6 A1586"},{"k":"颜色","v":"金色"},{"k":"上市年份","v":"2014"}]},{"group":"网络","params":[{"k":"4G网络制式","v":"移动4G(TD-LTE)/联通4G(FDD-LTE)/电信4G(FDD-LTE)"},{"k":"3G网络制式","v":"移动3G(TD-SCDMA)/联通3G(WCDMA)/电信3G（CDMA2000）"},{"k":"2G网络制式","v":"移动2G/联通2G(GSM)/电信2G(CDMA)"}]},{"group":"存储","params":[{"k":"机身内存","v":"16GB ROM"},{"k":"储存卡类型","v":"不支持"}]}]';			
			var data = JSON.parse(url);
			for (var i in data) {
				var html=data[i];
				console.debug(html);
				var table='<table class="load">'
			    +'<th colspan="2">'+html.group
			    +'</th>';	    
			    for (var t=0;t<html.params.length;t++) {
			    	table+='<tr>';			    	
			    	table=table+'<td>'+html.params[t].k+'</td>';
			    	table=table+'<td>'+html.params[t].v+'</td>';
			    	table=table+'/<tr>';
			    }
			+'</table>';
			$("#faker").append(table);
			}			
		});