发布时间:2019-12-02作者:laosun阅读(2401)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale="> <meta http-equiv="X-UA-Compatible" content=""> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <title></title> </head> <body> <center><h2>生成示例展示</h2></center> <table width="100%" cellpadding="1" cellspacing="1" border="1"> <thead> <tr> <th width="15%">型号</th> <th width="15%">颜色</th> <th width="15%">大小</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td rowspan="4">iphone4</td> <td rowspan="2">黑色</td> <td rowspan="1">16G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="1">32G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="2">银色</td> <td rowspan="1">16G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="1">32G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="4">iphone5</td> <td rowspan="2">黑色</td> <td rowspan="1">16G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="1">32G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="2">银色</td> <td rowspan="1">16G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="1">32G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="4">iphone6</td> <td rowspan="2">黑色</td> <td rowspan="1">16G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="1">32G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="2">银色</td> <td rowspan="1">16G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> <tr> <td rowspan="1">32G</td> <td> <div> <span class="input-group-addon input-group-addon-sku"> <span>¥</span></span> <input type="text" class="form-control prices" name="" id="" value="" /></div> </td> </tr> </tbody> </table> <script> //生成数据实例 var tmp = [ { name:"iphone4", arr:[ { name:"黑色", arr:[ { name:"16G", arr:[] }, { name:"32G", arr:[] } ] }, { name:"银色", arr:[ { name:"16G", arr:[] }, { name:"32G", arr:[] } ] } ] }, { name:"iphone5", arr:[ { name:"黑色", arr:[ { name:"16G", arr:[] }, { name:"32G", arr:[] } ] }, { name:"银色", arr:[ { name:"16G", arr:[] }, { name:"32G", arr:[] } ] } ] }, { name:"iphone6", arr:[ { name:"黑色", arr:[ { name:"16G", arr:[] }, { name:"32G", arr:[] } ] }, { name:"银色", arr:[ { name:"16G", arr:[] }, { name:"32G", arr:[] } ] } ] } ]; //动态笛卡尔积计算方式 - 转换树形结构 //至于性能瓶颈是多少,请自行测试。 var arr1 = ["iphone4", "iphone5", "iphone6"]; var arr2 = ["黑色", "银色"]; var arr3 = ["16G", "32G"]; //将数组合并成一个数组 var totalArr = []; totalArr.push(arr1); totalArr.push(arr2); totalArr.push(arr3); //转换后的结果集 var mergeArr = []; //倒序循环(目前是为了简单,将第一次循环的结果集放入下一次循环的结果集中,也就是所谓的子数据放入父节点中) for(var i=totalArr.length-1;i>=0;i--){ if(i-1>=0){ //有父节点,需要将本次循环所得数组放入下一次循环中 var nextArr = totalArr[i-1];//获取下一次循环的数组集合(就是arr2) var tmpArr = []; for(var j=0;j<nextArr.length;j++){//循环遍历arr2的每一项 var obj = []; obj.name = nextArr[j]; if(mergeArr!=null && mergeArr.length>0){ //如果mergeArr不为空,表示之前已经遍历过一次,直接赋值到父节点下的每一项中即可 obj.child = mergeArr; }else{ //如果是第一次遍历,需要对最外层的arr3进行拆除,拆分成多个数组的形式。 var firstArr = []; for(var m=0;m<totalArr[i].length;m++){ var tmpObj = []; tmpObj.name = totalArr[i][m]; tmpObj.child = []; firstArr.push(tmpObj); } obj.child = firstArr; } tmpArr.push(obj); } mergeArr = tmpArr; }else{ //无父节点的情况下,需要判断是否是第一次循环。 //如果是第一次循环,证明只有一组数据,无父子节点 if(totalArr.length-1==i){ for(var j=0;j<totalArr[i].length;j++){ var obj = []; obj.name = totalArr[i][j]; obj.child = []; mergeArr.push(obj); } }else{ //非第一次循环,笛卡尔积计算完毕 break; } } } console.log(mergeArr); </script> </body> </html>
其中数组转笛卡尔积的程序片段是以下这段代码:
//动态笛卡尔积计算方式 - 转换树形结构 //至于性能瓶颈是多少,请自行测试。 var arr1 = ["iphone4", "iphone5", "iphone6"]; var arr2 = ["黑色", "银色"]; var arr3 = ["16G", "32G"]; //将数组合并成一个数组 var totalArr = []; totalArr.push(arr1); totalArr.push(arr2); totalArr.push(arr3); //转换后的结果集 var mergeArr = []; //倒序循环(目前是为了简单,将第一次循环的结果集放入下一次循环的结果集中,也就是所谓的子数据放入父节点中) for(var i=totalArr.length-1;i>=0;i--){ if(i-1>=0){ //有父节点,需要将本次循环所得数组放入下一次循环中 var nextArr = totalArr[i-1];//获取下一次循环的数组集合(就是arr2) var tmpArr = []; for(var j=0;j<nextArr.length;j++){//循环遍历arr2的每一项 var obj = []; obj.name = nextArr[j]; if(mergeArr!=null && mergeArr.length>0){ //如果mergeArr不为空,表示之前已经遍历过一次,直接赋值到父节点下的每一项中即可 obj.child = mergeArr; }else{ //如果是第一次遍历,需要对最外层的arr3进行拆除,拆分成多个数组的形式。 var firstArr = []; for(var m=0;m<totalArr[i].length;m++){ var tmpObj = []; tmpObj.name = totalArr[i][m]; tmpObj.child = []; firstArr.push(tmpObj); } obj.child = firstArr; } tmpArr.push(obj); } mergeArr = tmpArr; }else{ //无父节点的情况下,需要判断是否是第一次循环。 //如果是第一次循环,证明只有一组数据,无父子节点 if(totalArr.length-1==i){ for(var j=0;j<totalArr[i].length;j++){ var obj = []; obj.name = totalArr[i][j]; obj.child = []; mergeArr.push(obj); } }else{ //非第一次循环,笛卡尔积计算完毕 break; } } }
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/7e65a21396ba449d9235acfce2084a8d.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
关键字: jquery 前端 源码 javascript