博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

产品多规格

Posted on 2015-08-24 13:41  米粒3  阅读(201)  评论(0编辑  收藏  举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝SKU添加组合测试</title>
<meta name="viewport" content="width=device-width" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/liandong.js"></script>

<link type="text/css" rel="stylesheet" href="liandong.css">

</head>
<body>

<div id="navtab1" style="width: 100%; border: 1px solid #A3C0E8;">
    <div title="扩展信息" tabid="tabItem3">
        <div id="Div1">
            <div position="center">
                <div style="padding: 5px 8px;" class="div_content">
                    <div class="div_title"><span>产品规格</span></div>
                    <div class="div_contentlist">
                        <ul class="Father_Title"><li>颜色分类</li></ul>
                        <ul class="Father_Item0">
                            <li class="li_width"><label><input id="Checkbox3" type="checkbox" class="chcBox_Width" value="军绿色" />军绿色<span class="li_empty"  contentEditable="true"></span></label></li>
                            <li class="li_width"><label><input id="Checkbox1" type="checkbox" class="chcBox_Width" value="花色" />花色<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox2" type="checkbox" class="chcBox_Width" value="蓝色" />蓝色<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox4" type="checkbox" class="chcBox_Width" value="褐色" />褐色<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox5" type="checkbox" class="chcBox_Width" value="黄色" />黄色<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox6" type="checkbox" class="chcBox_Width" value="黑色" />黑色<span class="li_empty"> </span></label></li>
                        </ul>
                        <br/>
                        <ul class="Father_Title"><li>尺寸</li></ul>
                        <ul class="Father_Item1">
                            <li class="li_width"><label><input id="Checkbox7" type="checkbox" class="chcBox_Width" value="41" />41<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox8" type="checkbox" class="chcBox_Width" value="42" />42<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox9" type="checkbox" class="chcBox_Width" value="43" />43<span class="li_empty"> </span></label></li>
                        </ul>
                        <br/>
                        <ul class="Father_Title"> <li>类型</li></ul>
                        <ul class="Father_Item2">
                            <li class="li_width"><label><input id="Checkbox10" type="checkbox" class="chcBox_Width" value="港澳台" /><span class="Color_Name">港澳台</span><span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox11" type="checkbox" class="chcBox_Width" value="韩国" />韩国<span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox12" type="checkbox" class="chcBox_Width" value="亚太" />亚太<span class="li_empty"> </span></label></li>
                        </ul>
                        <br/>
                        <ul class="Father_Title"> <li>品牌</li></ul>
                        <ul class="Father_Item3">
                            <li class="li_width"><label><input id="Checkbox13" type="checkbox" class="chcBox_Width" value="森马" />森马<span class="Color_Name"></span><span class="li_empty"> </span></label></li>
                            <li class="li_width"><label><input id="Checkbox14" type="checkbox" class="chcBox_Width" value="特步" />特步<span class="li_empty"></span></label></li>
                            <li class="li_width"><label><input id="Checkbox15" type="checkbox" class="chcBox_Width" value="361" />361<span class="li_empty"></span></label></li>
                        </ul>
                        <br/>
                    </div>
                    <div class="div_contentlist2">
                        <ul>
                            <li><div id="createTable"></div></li>
                        </ul>
                        <ul><li><input type="button" id="Button1" class="l-button" value="提交"/></li></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
 1 *{
 2     padding: 0px;
 3     margin: 0px;
 4 }
 5 body{
 6     line-height: 1.6;
 7     font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
 8     color: #222;
 9     font-size: 14px;
10     width:850px;
11     margin:40px auto;
12 }
13 li{list-style: none;margin-right:10px;}
14 li label{cursor: pointer;}
15 .Father_Item0 li{float: left;}
16 .Father_Item1 li{float: left;}
17 .Father_Item2 li{float: left;}
18 .Father_Item3 li{float: left;}
19 
20 /*表格样式*/
21 table#process {
22     font-size:11px;
23     color:#333333;
24     border-width: 1px;
25     border-color: #666666;
26     border-collapse: collapse;
27 }
28 table#process th {
29     border-width: 1px;
30     padding: 8px;
31     border-style: solid;
32     border-color: #666666;
33     background-color: #dedede;
34 }
35 table#process td {
36     border-width: 1px;
37     padding: 8px;
38     border-style: solid;
39     border-color: #666666;
40     background-color: #ffffff;
41 }
  1 /**
  2 * Created by Administrator on 14-12-01.
  3 * 模拟淘宝SKU添加组合
  4 * 页面注意事项:
  5 *      1、 .div_contentlist   这个类变化这里的js单击事件类名也要改
  6 *      2、 .Father_Title      这个类作用是取到所有标题的值,赋给表格,如有改变JS也应相应改动
  7 *      3、 .Father_Item       这个类作用是取类型组数,有多少类型就添加相应的类名:如: Father_Item1、Father_Item2、Father_Item3 ...
  8 */
  9 $(function () {
 10     //SKU信息
 11     $(".div_contentlist label").bind("change", function () {
 12         step.Creat_Table();
 13     });
 14     var step = {
 15         //SKU信息组合
 16         Creat_Table: function () {
 17             step.hebingFunction();
 18             var SKUObj = $(".Father_Title");
 19             //var skuCount = SKUObj.length;//
 20             var arrayTile = new Array(); //标题组数
 21             var arrayInfor = new Array(); //盛放每组选中的CheckBox值的对象
 22             var arrayColumn = new Array(); //指定列,用来合并哪些列
 23             var bCheck = true; //是否全选
 24             var columnIndex = 0;
 25             $.each(SKUObj, function (i, item) {
 26                 arrayColumn.push(columnIndex);
 27                 columnIndex++;
 28                 arrayTile.push(SKUObj.find("li").eq(i).html().replace("", ""));
 29                 var itemName = "Father_Item" + i;
 30                 //选中的CHeckBox取值
 31                 var order = new Array();
 32                 $("." + itemName + " input[type=checkbox]:checked").each(function () {
 33                     order.push($(this).val());
 34                 });
 35                 arrayInfor.push(order);
 36                 if (order.join() == "") {
 37                     bCheck = false;
 38                 }
 39                 //var skuValue = SKUObj.find("li").eq(index).html();
 40             });
 41             //开始创建Table表
 42             if (bCheck == true) {
 43                 var RowsCount = 0;
 44                 $("#createTable").html("");
 45                 var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;\"></table>");
 46                 table.appendTo($("#createTable"));
 47                 var thead = $("<thead></thead>");
 48                 thead.appendTo(table);
 49                 var trHead = $("<tr></tr>");
 50                 trHead.appendTo(thead);
 51                 //创建表头
 52                 $.each(arrayTile, function (index, item) {
 53                     var td = $("<th>" + item + "</th>");
 54                     td.appendTo(trHead);
 55                 });
 56                 var itemColumHead = $("<th  style=\"width:70px;\">价格</th><th style=\"width:70px;\">库存</th> ");
 57                 itemColumHead.appendTo(trHead);
 58                 //var itemColumHead2 = $("<td >商家编码</td><td >商品条形码</td>");
 59                 //itemColumHead2.appendTo(trHead);
 60                 var tbody = $("<tbody></tbody>");
 61                 tbody.appendTo(table);
 62                 ////生成组合
 63                 var zuheDate = step.doExchange(arrayInfor);
 64                 if (zuheDate.length > 0) {
 65                     //创建行
 66                     $.each(zuheDate, function (index, item) {
 67                         var td_array = item.split(",");
 68                         var tr = $("<tr></tr>");
 69                         tr.appendTo(tbody);
 70                         $.each(td_array, function (i, values) {
 71                             var td = $("<td>" + values + "</td>");
 72                             td.appendTo(tr);
 73                         });
 74                         var td1 = $("<td ><input name=\"Txt_PriceSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
 75                         td1.appendTo(tr);
 76                         var td2 = $("<td ><input name=\"Txt_CountSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
 77                         td2.appendTo(tr);
 78                         //var td3 = $("<td ><input name=\"Txt_NumberSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
 79                         //td3.appendTo(tr);
 80                         //var td4 = $("<td ><input name=\"Txt_SnSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
 81                         //td4.appendTo(tr);
 82                     });
 83                 }
 84                 //结束创建Table表
 85                 arrayColumn.pop(); //删除数组中最后一项
 86                 //合并单元格
 87                 $(table).mergeCell({
 88                     // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
 89                     cols: arrayColumn
 90                 });
 91             } else {
 92                 //未全选中,清除表格
 93                 document.getElementById('createTable').innerHTML = "";
 94             }
 95         }, //合并行
 96         hebingFunction: function () {
 97             $.fn.mergeCell = function (options) {
 98                 return this.each(function () {
 99                     var cols = options.cols;
100                     for (var i = cols.length - 1; cols[i] != undefined; i--) {
101                         // fixbug console调试
102                         // console.debug(cols[i]);
103                         mergeCell($(this), cols[i]);
104                     }
105                     dispose($(this));
106                 });
107             };
108             function mergeCell($table, colIndex) {
109                 $table.data('col-content', ''); // 存放单元格内容
110                 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
111                 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
112                 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
113                 // 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
114                 $('tbody tr', $table).each(function (index) {
115                     // td:eq中的colIndex即列索引
116                     var $td = $('td:eq(' + colIndex + ')', this);
117                     // 取出单元格的当前内容
118                     var currentContent = $td.html();
119                     // 第一次时走此分支
120                     if ($table.data('col-content') == '') {
121                         $table.data('col-content', currentContent);
122                         $table.data('col-td', $td);
123                     } else {
124                         // 上一行与当前行内容相同
125                         if ($table.data('col-content') == currentContent) {
126                             // 上一行与当前行内容相同则col-rowspan累加, 保存新值
127                             var rowspan = $table.data('col-rowspan') + 1;
128                             $table.data('col-rowspan', rowspan);
129                             // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
130                             $td.hide();
131                             // 最后一行的情况比较特殊一点
132                             // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
133                             if (++index == $table.data('trNum'))
134                                 $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
135                         } else { // 上一行与当前行内容不同
136                             // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
137                             if ($table.data('col-rowspan') != 1) {
138                                 $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
139                             }
140                             // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
141                             $table.data('col-td', $td);
142                             $table.data('col-content', $td.html());
143                             $table.data('col-rowspan', 1);
144                         }
145                     }
146                 });
147             }
148             // 同样是个private函数 清理内存之用
149             function dispose($table) {
150                 $table.removeData();
151             }
152         },
153         //组合数组
154         doExchange: function (doubleArrays) {
155             var len = doubleArrays.length;
156             if (len >= 2) {
157                 var arr1 = doubleArrays[0];
158                 var arr2 = doubleArrays[1];
159                 var len1 = doubleArrays[0].length;
160                 var len2 = doubleArrays[1].length;
161                 var newlen = len1 * len2;
162                 var temp = new Array(newlen);
163                 var index = 0;
164                 for (var i = 0; i < len1; i++) {
165                     for (var j = 0; j < len2; j++) {
166                         temp[index] = arr1[i] + "," + arr2[j];
167                         index++;
168                     }
169                 }
170                 var newArray = new Array(len - 1);
171                 newArray[0] = temp;
172                 if (len > 2) {
173                     var _count = 1;
174                     for (var i = 2; i < len; i++) {
175                         newArray[_count] = doubleArrays[i];
176                         _count++;
177                     }
178                 }
179                 //console.log(newArray);
180                 return step.doExchange(newArray);
181             }
182             else {
183                 return doubleArrays[0];
184             }
185         }
186     }
187     return step;
188 })
liandong.js