系统后台商品多规格sku的简单实现

商品多规格处理不好就会写一堆JS，其实商品多规格的具体需求是规格+规格参数生成一个阵列表格。这个demo是网上一个大神写的，非常简洁，可以作为小白参考的资料，而波波只是搬运工。

效果如下图：

商品多规格sku的简单实现

文章来源：https://www.cnblogs.com/moumou0213/p/7233357.html

代码片段：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8. <div class="control-group">
  9.     <label class="control-label"> </label>
  10.     <div class="controls">
  11.         <button id="add_lv1" class="btn btn-primary" type="button">添加规格项</button>
  12.         <button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button>
  13.     </div>
  14. </div>
  15. <div id="lv_table_con" class="control-group" style="display: none;">
  16.     <label class="control-label">规格项目表</label>
  17.     <div class="controls">
  18.         <div id="lv_table">
  20.         </div>
  21.     </div>
  22. </div>
  23. <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  24. <script>
  25.     var lv1HTML = '<div class="control-group lv1">' +
  26.                     '<label class="control-label">规格名称</label>' +
  27.                     '<div class="controls">' +
  28.                         '<input type="text" name="lv1" placeholder="规格名称">' +
  29.                         '<button class="btn btn-primary add_lv2" type="button">添加参数</button>' +
  30.                         '<button class="btn btn-danger remove_lv1" type="button">删除规格</button>' +
  31.                     '</div>' +
  32.                     '<div class="controls lv2s"></div>' +
  33.                 '</div>';
  35.     var lv2HTML = '<div style="margin-top: 5px;">' +
  36.                     '<input type="text" name="lv2" placeholder="参数名称">' +
  37.                     '<button class="btn btn-danger remove_lv2" type="button">删除参数</button>' +
  38.                 '</div>';
  40.     $(document).ready(function() {
  41.         $('#add_lv1').on('click', function() {
  42.             var last = $('.control-group.lv1:last');
  43.             if (!last || last.length == 0) {
  44.                 $(this).parents('.control-group').eq(0).after(lv1HTML);
  45.             } else {
  46.                 last.after(lv1HTML);
  47.             }
  48.         });
  50.         $(document).on('click', '.remove_lv1', function() {
  51.             $(this).parents('.lv1').remove();
  52.         });
  54.         $(document).on('click', '.add_lv2', function() {
  55.             $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
  56.         });
  58.         $(document).on('click', '.remove_lv2', function() {
  59.             $(this).parent().remove();
  60.         });
  62.         $('#update_table').on('click', function() {
  63.             var lv1Arr = $('input[name="lv1"]');
  64.             if (!lv1Arr || lv1Arr.length == 0) {
  65.                 $('#lv_table_con').hide();
  66.                 $('#lv_table').html('');
  67.                 return;
  68.             }
  69.             for (var i = 0; i < lv1Arr.length; i++) {
  70.                 var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');
  71.                 if (!lv2Arr || lv2Arr.length == 0) {
  72.                     alert('请先删除无参数的规格项！');
  73.                     return;
  74.                 }
  75.             }
  77.             var tableHTML = '';
  78.             tableHTML += '<table class="table table-bordered">';
  79.             tableHTML += '    <thead>';
  80.             tableHTML += '        <tr>';
  81.             for (var i = 0; i < lv1Arr.length; i++) {
  82.                 tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
  83.             }
  84.             tableHTML += '            <th width="20">现价</th>';
  85.             tableHTML += '            <th width="20">原价</th>';
  86.             tableHTML += '        </tr>';
  87.             tableHTML += '    </thead>';
  88.             tableHTML += '    <tbody>';
  90.             var numsArr = new Array();
  91.             var idxArr = new Array();
  92.             for (var i = 0; i < lv1Arr.length; i++) {
  93.                 numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length);
  94.                 idxArr[i] = 0;
  95.             }
  97.             var len = 1;
  98.             var rowsArr = new Array();
  99.             for (var i = 0; i < numsArr.length; i++) {
  100.                 lenlen = len * numsArr[i];
  102.                 var tmpnum = 1;
  103.                 for (var j = numsArr.length - 1; j > i; j--) {
  104.                     tmpnumtmpnum = tmpnum * numsArr[j];
  105.                 }
  106.                 rowsArr.push(tmpnum);
  107.             }
  109.             for (var i = 0; i < len; i++) {
  110.                 tableHTML += '        <tr data-row="' + (i+1) + '">';
  112.                 var name = '';
  113.                 for (var j = 0; j < lv1Arr.length; j++) {
  114.                     var n = parseInt(i / rowsArr[j]);
  115.                     if (j == 0) {
  116.                     } else if (j == lv1Arr.length - 1) {
  117.                         n = idxArr[j];
  118.                         if (idxArr[j] + 1 >= numsArr[j]) {
  119.                             idxArr[j] = 0;
  120.                         } else {
  121.                             idxArr[j]++;
  122.                         }
  123.                     } else {
  124.                         var m = parseInt(i / rowsArr[j]);
  125.                         n = m % numsArr[j];
  126.                     }
  128.                     var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val();
  129.                     if (j != lv1Arr.length - 1) {
  130.                         name += text + '_';
  131.                     } else {
  132.                         name += text;
  133.                     }
  135.                     if (i % rowsArr[j] == 0) {
  136.                         tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
  137.                     }
  138.                 }
  140.                 tableHTML += '<td width="20"><input type="text" name="' + name + '[price]" /></td>';
  141.                 tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
  142.                 tableHTML += '</tr>';
  143.             }
  144.             tableHTML += '</tbody>';
  145.             tableHTML += '</table>';
  147.             $('#lv_table_con').show();
  148.             $('#lv_table').html(tableHTML);
  149.         });
  150.     });
  151. </script>
  152. </body>
  153. </html>

 

 

 

  • 系统后台商品多规格sku的简单实现已关闭评论
  • 4,760
    A+
发布日期：2020年04月24日  所属分类：Html/Css  JQuery/Js
标签：
你想把广告放到这里吗？