关于添加商品多规格生成表格的功能实现

Posted 2020-09-29 moumou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于添加商品多规格生成表格的功能实现相关的知识，希望对你有一定的参考价值。

最近商品后台需要添加商品多规格的需求，具体是：用户可以自定义规格以及参数，然后再自定义组合规格参数生成商品表单编辑商品信息；

这个功能我做了两次都以失败告终，越做越复杂，在网上看到某位大神的小demo，感觉很好就放出来做参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<div class="control-group">
    <label class="control-label"> </label>
    <div class="controls">
        <button id="add_lv1" class="btn btn-primary" type="button">添加规格项</button>
        <button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button>
    </div>
</div>
<div id="lv_table_con" class="control-group" style="display: none;">
    <label class="control-label">规格项目表</label>
    <div class="controls">
        <div id="lv_table">
            
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var lv1HTML = ‘<div class="control-group lv1">‘ +
                    ‘<label class="control-label">规格名称</label>‘ +
                    ‘<div class="controls">‘ +
                        ‘<input type="text" name="lv1" placeholder="规格名称">‘ +
                        ‘<button class="btn btn-primary add_lv2" type="button">添加参数</button>‘ +
                        ‘<button class="btn btn-danger remove_lv1" type="button">删除规格</button>‘ +
                    ‘</div>‘ +
                    ‘<div class="controls lv2s"></div>‘ +
                ‘</div>‘;
    
    var lv2HTML = ‘<div style="margin-top: 5px;">‘ +
                    ‘<input type="text" name="lv2" placeholder="参数名称">‘ +
                    ‘<button class="btn btn-danger remove_lv2" type="button">删除参数</button>‘ +
                ‘</div>‘;
     
    $(document).ready(function() {
        $(‘#add_lv1‘).on(‘click‘, function() {
            var last = $(‘.control-group.lv1:last‘);
            if (!last || last.length == 0) {
                $(this).parents(‘.control-group‘).eq(0).after(lv1HTML);
            } else {
                last.after(lv1HTML);
            }
        });

        $(document).on(‘click‘, ‘.remove_lv1‘, function() {
            $(this).parents(‘.lv1‘).remove();
        });

        $(document).on(‘click‘, ‘.add_lv2‘, function() {
            $(this).parents(‘.lv1‘).find(‘.lv2s‘).append(lv2HTML);
        });

        $(document).on(‘click‘, ‘.remove_lv2‘, function() {
            $(this).parent().remove();
        });

        $(‘#update_table‘).on(‘click‘, function() {
            var lv1Arr = $(‘input[name="lv1"]‘);
            if (!lv1Arr || lv1Arr.length == 0) {
                $(‘#lv_table_con‘).hide();
                $(‘#lv_table‘).html(‘‘);
                return;
            }
            for (var i = 0; i < lv1Arr.length; i++) {
                var lv2Arr = $(lv1Arr[i]).parents(‘.lv1‘).find(‘input[name="lv2"]‘);
                if (!lv2Arr || lv2Arr.length == 0) {
                    alert(‘请先删除无参数的规格项！‘);
                    return;
                }
            }

            var tableHTML = ‘‘;
            tableHTML += ‘<table class="table table-bordered">‘;
            tableHTML += ‘    <thead>‘;
            tableHTML += ‘        <tr>‘;
            for (var i = 0; i < lv1Arr.length; i++) {
                tableHTML += ‘<th width="50">‘ + $(lv1Arr[i]).val() + ‘</th>‘;
            }
            tableHTML += ‘            <th width="20">现价</th>‘;
            tableHTML += ‘            <th width="20">原价</th>‘;
            tableHTML += ‘        </tr>‘;
            tableHTML += ‘    </thead>‘;
            tableHTML += ‘    <tbody>‘;
             
            var numsArr = new Array();
            var idxArr = new Array();
            for (var i = 0; i < lv1Arr.length; i++) {
                numsArr.push($(lv1Arr[i]).parents(‘.lv1‘).find(‘input[name="lv2"]‘).length);
                idxArr[i] = 0;
            }
             
            var len = 1;
            var rowsArr = new Array();
            for (var i = 0; i < numsArr.length; i++) {
                len = len * numsArr[i];
                 
                var tmpnum = 1;
                for (var j = numsArr.length - 1; j > i; j--) {
                    tmpnum = tmpnum * numsArr[j];
                }
                rowsArr.push(tmpnum);
            }
             
            for (var i = 0; i < len; i++) {
                tableHTML += ‘        <tr data-row="‘ + (i+1) + ‘">‘;
                 
                var name = ‘‘;
                for (var j = 0; j < lv1Arr.length; j++) {
                    var n = parseInt(i / rowsArr[j]);
                    if (j == 0) {
                    } else if (j == lv1Arr.length - 1) {
                        n = idxArr[j];
                        if (idxArr[j] + 1 >= numsArr[j]) {
                            idxArr[j] = 0;
                        } else {
                            idxArr[j]++;
                        }
                    } else {
                        var m = parseInt(i / rowsArr[j]);
                        n = m % numsArr[j];
                    }
                     
                    var text = $(lv1Arr[j]).parents(‘.lv1‘).find(‘input[name="lv2"]‘).eq(n).val();
                    if (j != lv1Arr.length - 1) {
                        name += text + ‘_‘;
                    } else {
                        name += text;
                    }
                     
                    if (i % rowsArr[j] == 0) {
                        tableHTML += ‘<td width="50" rowspan="‘ + rowsArr[j] + ‘" data-rc="‘ + (i+1) + ‘_‘ + (j+1) + ‘">‘ + text + ‘</td>‘;
                    }
                }
                 
                tableHTML += ‘<td width="20"><input type="text" name="‘ + name + ‘[price]" /></td>‘;
                tableHTML += ‘<td width="20"><input type="text" name="‘ + name + ‘[original_price]" /></td>‘;
                tableHTML += ‘</tr>‘;
            }
            tableHTML += ‘</tbody>‘;
            tableHTML += ‘</table>‘;
             
            $(‘#lv_table_con‘).show();
            $(‘#lv_table‘).html(tableHTML);
        });
    });
</script>
</body>
</html>

需要的可以直接copy看效果演示

以上是关于关于添加商品多规格生成表格的功能实现的主要内容，如果未能解决你的问题，请参考以下文章

新增客户端自动获取微信地址功能优化商品规格编辑体验更新！

根据商品规格筛选商品

VUE项目实战40添加商品分类功能

EXCEL表格中，通过商品名称自动获取对应的商品编码

在“订单查询”表格中输入编码，怎么把“商品信息”表中对应的品名、规格、单价引用到“订单查询”表中？

电商的开发流程