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 })
