系统后台商品多规格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">
  19.         </div>
  20.     </div>
  21. </div>
  22. <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  23. <script>
  24.     var lv1HTML = '<div class="control-group lv1">' +
  25.                     '<label class="control-label">规格名称</label>' +
  26.                     '<div class="controls">' +
  27.                         '<input type="text" name="lv1" placeholder="规格名称">' +
  28.                         '<button class="btn btn-primary add_lv2" type="button">添加参数</button>' +
  29.                         '<button class="btn btn-danger remove_lv1" type="button">删除规格</button>' +
  30.                     '</div>' +
  31.                     '<div class="controls lv2s"></div>' +
  32.                 '</div>';
  33.     var lv2HTML = '<div style="margin-top: 5px;">' +
  34.                     '<input type="text" name="lv2" placeholder="参数名称">' +
  35.                     '<button class="btn btn-danger remove_lv2" type="button">删除参数</button>' +
  36.                 '</div>';
  37.     $(document).ready(function() {
  38.         $('#add_lv1').on('click', function() {
  39.             var last = $('.control-group.lv1:last');
  40.             if (!last || last.length == 0) {
  41.                 $(this).parents('.control-group').eq(0).after(lv1HTML);
  42.             } else {
  43.                 last.after(lv1HTML);
  44.             }
  45.         });
  46.         $(document).on('click', '.remove_lv1', function() {
  47.             $(this).parents('.lv1').remove();
  48.         });
  49.         $(document).on('click', '.add_lv2', function() {
  50.             $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
  51.         });
  52.         $(document).on('click', '.remove_lv2', function() {
  53.             $(this).parent().remove();
  54.         });
  55.         $('#update_table').on('click', function() {
  56.             var lv1Arr = $('input[name="lv1"]');
  57.             if (!lv1Arr || lv1Arr.length == 0) {
  58.                 $('#lv_table_con').hide();
  59.                 $('#lv_table').html('');
  60.                 return;
  61.             }
  62.             for (var i = 0; i < lv1Arr.length; i++) {
  63.                 var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');
  64.                 if (!lv2Arr || lv2Arr.length == 0) {
  65.                     alert('请先删除无参数的规格项!');
  66.                     return;
  67.                 }
  68.             }
  69.             var tableHTML = '';
  70.             tableHTML += '<table class="table table-bordered">';
  71.             tableHTML += '    <thead>';
  72.             tableHTML += '        <tr>';
  73.             for (var i = 0; i < lv1Arr.length; i++) {
  74.                 tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
  75.             }
  76.             tableHTML += '            <th width="20">现价</th>';
  77.             tableHTML += '            <th width="20">原价</th>';
  78.             tableHTML += '        </tr>';
  79.             tableHTML += '    </thead>';
  80.             tableHTML += '    <tbody>';
  81.             var numsArr = new Array();
  82.             var idxArr = new Array();
  83.             for (var i = 0; i < lv1Arr.length; i++) {
  84.                 numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length);
  85.                 idxArr[i] = 0;
  86.             }
  87.             var len = 1;
  88.             var rowsArr = new Array();
  89.             for (var i = 0; i < numsArr.length; i++) {
  90.                 lenlen = len * numsArr[i];
  91.                 var tmpnum = 1;
  92.                 for (var j = numsArr.length - 1; j > i; j--) {
  93.                     tmpnumtmpnum = tmpnum * numsArr[j];
  94.                 }
  95.                 rowsArr.push(tmpnum);
  96.             }
  97.             for (var i = 0; i < len; i++) {
  98.                 tableHTML += '        <tr data-row="' + (i+1) + '">';
  99.                 var name = '';
  100.                 for (var j = 0; j < lv1Arr.length; j++) {
  101.                     var n = parseInt(i / rowsArr[j]);
  102.                     if (j == 0) {
  103.                     } else if (j == lv1Arr.length - 1) {
  104.                         n = idxArr[j];
  105.                         if (idxArr[j] + 1 >= numsArr[j]) {
  106.                             idxArr[j] = 0;
  107.                         } else {
  108.                             idxArr[j]++;
  109.                         }
  110.                     } else {
  111.                         var m = parseInt(i / rowsArr[j]);
  112.                         n = m % numsArr[j];
  113.                     }
  114.                     var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val();
  115.                     if (j != lv1Arr.length - 1) {
  116.                         name += text + '_';
  117.                     } else {
  118.                         name += text;
  119.                     }
  120.                     if (i % rowsArr[j] == 0) {
  121.                         tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
  122.                     }
  123.                 }
  124.                 tableHTML += '<td width="20"><input type="text" name="' + name + '[price]" /></td>';
  125.                 tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
  126.                 tableHTML += '</tr>';
  127.             }
  128.             tableHTML += '</tbody>';
  129.             tableHTML += '</table>';
  130.             $('#lv_table_con').show();
  131.             $('#lv_table').html(tableHTML);
  132.         });
  133.     });
  134. </script>
  135. </body>
  136. </html>

 

 

 

波波
你想把广告放到这里吗?