废话不说,先上代码javascript
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>商品组合笛卡尔乘积演示</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js" ></script> </head> <body> <script type="text/javascript"> //笛卡尔乘积递归方法 function DescartesRecursive(index,list,map,maplist){ for(var i=0;i<list[index].Attributes.length;i++){ var item=list[index].Attributes[i]; var newmap=[]; newmap.push(item); newmap=map.concat(newmap); //递归主列表每个列表值使其相乘,至关于多个for循环嵌套 if(index<list.length-1){ DescartesRecursive(index+1,list,newmap,maplist); }else{//最后一个列表值,能够组装数据了 maplist.push(newmap); } } } //定义一个属性组合 var AttributeList = [{AttributeName:'颜色',Attributes:[{OptionName:'黑色'},{OptionName:'白色'}]},{AttributeName:'内存',Attributes:[{OptionName:'32G'},{OptionName:'64G'}]},{AttributeName:'运营商',Attributes:[{OptionName:'移动'},{OptionName:'联通'}]}]; var mapList=[]; //得到不一样属性的笛卡尔乘积 var result=DescartesRecursive(0,AttributeList,[],mapList);//索引从0开始 //浏览器调试状态打印对象信息 console.info(mapList); </script> </body> </html>
最终成品效果html
后台编辑页面:前端
前端效果展现:java
演示demo地址:jquery
编辑:http://www.guosy.com:88/admin/40 spring
展现:http://www.guosy.com:88/detail/40后端
以上demo前端采用了jquery1.9和angular1.46,后端用springboot实现,技术交流请联系:微信 westfruit 或QQ 309191428 或邮箱 westfruit@163.com浏览器