廢話不說,先上代碼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瀏覽器