技术饭

jQuery动态生成商品属性sku组合列表

copylian    0 评论    1333 浏览    2019.05.21

jQuery动态生成商品属性sku组合列表,最近做商城遇到商品需要添加多种属性规格,无法解决的问题在于各种属性的排列组合,如:[白色,黑色,红色]、[165CM,170CM,175CM]、[4G+64GB,8G+128GB],这三种组合可以组成3 * 3 * 2 = 18种组合。

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style type="text/css"> 

        * { padding: 0; margin: 0; }

        .demo { padding: 10px; }

        .demo table { border-collapse: collapse; }

        .demo table tr td { border: 1px solid #ccc; padding: 4px; }

        </style>

    </head>

    <body>

        <div id="demo" class="demo"></div>

        <script type="text/javascript"> 

            //重点是这个组合方法

            function combine(arr) {

                arr.reverse();

                var r = [];

                (function f(t, a, n) {

                    if (n == 0) return r.push(t);

                    for (var i = 0; i < a[n-1].length; i++) {

                        f(t.concat(a[n-1][i]), a, n - 1);

                    }

                })([], arr, arr.length);

                return r;

            }

            var arr = [

                ['白色','红色', '蓝色'],

                ['165CM', '170CM', '175CM'],

                ['4G+64GB','8G+128GB']];

            var res = combine(arr);

            console.log(res);

             //合并单元格

            var row = [];

            var rowspan = res.length;

            for(var n=arr.length-1; n>-1; n--) {

                row[n] = parseInt(rowspan/arr[n].length);

                rowspan = row[n];

            }

            row.reverse();

            

            //table tr td

            var str = "";

            var len = res[0].length;

            for (var i=0; i<res.length; i++) {

                var tmp = "";

                for(var j=0; j<len; j++) {

                    if(i%row[j]==0 && row[j]>1) {

                        tmp += "<td rowspan='"+ row[j] +"'>"+res[i][j]+"</td>";

                    }else if(row[j]==1){

                        tmp += "<td>"+res[i][j]+"</td>";

                    }

                }

                str += "<tr>" + tmp + "<td>xxx</td>" + "<td>xxx</td>" + "</tr>";

            }

            

            //thead

            var th = "";

            for(var k=0; k<len; k++) {

                th += "<th>"+ k +"</th>";

            }

            th = "<thead>"+th+"<th>价格</th>" + "<th>数量</th>" +"</thead>";

            str = "<table>" + th + str + "</table>";

            document.getElementById('demo').innerHTML = str;

        </script>

    </body>

</html>

处理结果:

1558447709(1).png

1558447772(1).png

参考链接:https://liu86th.iteye.com/blog/1901650

CopyLian
感谢你的支持,我会继续努力!
扫码打赏,感谢您的支持!

文明上网理性发言!

  • 还没有评论,沙发等你来抢