-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsku_完整版.html
258 lines (232 loc) · 8.59 KB
/
sku_完整版.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!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>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<style type="text/css">
.bh-sku-selected {
color: red;
}
</style>
</head>
<body>
<div>
公母：
<input type="button" class="sku" attr_id="10" value="公"/>
<input type="button" class="sku" attr_id="11" value="母"/>
</div>
<div>
重量：
<input type="button" class="sku" attr_id="20" value="100克"/>
<input type="button" class="sku" attr_id="21" value="200克"/>
</div>
<div>
数量：
<input type="button" class="sku" attr_id="30" value="一对"/>
<input type="button" class="sku" attr_id="31" value="两对"/>
<input type="button" class="sku" attr_id="32" value="三对"/>
</div>
<span id="init_time">init sku time: </span> </br>
<span id="price">--</span> </br>
</span>
<script type="text/javascript">
var startTime = new Date().getTime();
// 属性集
var keys = [
['10', '11'],
['20', '21'],
['30', '31', '32']
];
// 数据集, 一般由后台返回
var data = {
'10;20;30': { price: 1, count: 0 },
'10;20;31': { price: 2, count: 2 },
'10;20;32': { price: 3, count: 3 },
'11;20;30': { price: 4, count: 4 },
'11;20;31': { price: 5, count: 5 },
'11;20;32': { price: 6, count: 6 },
'10;21;30': { price: 7, count: 0 },
'10;21;31': { price: 8, count: 8 },
'10;21;32': { price: 9, count: 0 },
'11;21;30': { price: 10, count: 10 },
'11;21;31': { price: 11, count: 11 },
'11;21;32': { price: 12, count: 0 },
};
//保存最后的组合结果信息
var SKUResult = {};
//初始化得到结果集
function initSKU() {
var i, j, skuKeys = getObjKeys(data);
for (i = 0; i < skuKeys.length; i++) {
var skuKey = skuKeys[i];//一条SKU信息key
var sku = data[skuKey]; //一条SKU信息value
var skuKeyAttrs = skuKey.split(';'); //SKU信息key属性值数组
skuKeyAttrs.sort(function(value1, value2) {
return parseInt(value1) - parseInt(value2);
});
//对每个SKU信息key属性值进行拆分组合
var combArr = combInArray(skuKeyAttrs);
for (j = 0; j < combArr.length; j++) {
addSKUResult(combArr[j], sku);
}
//结果集接放入SKUResult
SKUResult[skuKeyAttrs.join(';')] = {
count: sku.count,
prices: [sku.price]
}
}
}
//获得对象的key
function getObjKeys(obj) {
if (obj !== Object(obj)) throw new TypeError('Invalid object');
var keys = [];
for (var key in obj)
if (Object.prototype.hasOwnProperty.call(obj, key))
keys[keys.length] = key;
return keys;
}
//把组合的key放入结果集SKUResult
function addSKUResult(combArrItem, sku) {
var key = combArrItem.join(';');
if (SKUResult[key]) {//SKU信息key属性·
SKUResult[key].count += sku.count;
SKUResult[key].prices.push(sku.price);
} else {
SKUResult[key] = {
count: sku.count,
prices: [sku.price]
};
}
}
/**
* 从数组中生成指定长度的组合
* 方法: 先生成[0,1...]形式的数组, 然后根据0,1从原数组取元素，得到组合数组
*/
function combInArray(aData) {
if (!aData || !aData.length) {
return [];
}
var len = aData.length;
var aResult = [];
for (var n = 1; n < len; n++) {
var aaFlags = getCombFlags(len, n);
// console.log(JSON.stringify(aaFlags))
while (aaFlags.length) {
var aFlag = aaFlags.shift();
var aComb = [];
for (var i = 0; i < len; i++) {
aFlag[i] && aComb.push(aData[i]);
}
aResult.push(aComb);
}
}
return aResult;
}
/**
* 得到从 m 元素中取 n 元素的所有组合
* 结果为[0,1...]形式的数组, 1表示选中，0表示不选
*/
function getCombFlags(m, n) {
if (!n || n < 1) {
return [];
}
var aResult = [];
var aFlag = [];
var bNext = true;
var i, j, iCnt1;
for (i = 0; i < m; i++) {
aFlag[i] = i < n ? 1 : 0;
}
aResult.push(aFlag.concat());
while (bNext) {
iCnt1 = 0;
for (i = 0; i < m - 1; i++) {
if (aFlag[i] == 1 && aFlag[i + 1] == 0) {
for (j = 0; j < i; j++) {
aFlag[j] = j < iCnt1 ? 1 : 0;
}
aFlag[i] = 0;
aFlag[i + 1] = 1;
var aTmp = aFlag.concat();
aResult.push(aTmp);
if (aTmp.slice(-n).join('').indexOf('0') == -1) {
bNext = false;
}
break;
}
aFlag[i] == 1 && iCnt1++;
}
}
return aResult;
}
//初始化用户选择事件
$(function() {
initSKU();
console.log(SKUResult)
var endTime = new Date().getTime();
$('#init_time').text('init sku time: ' + (endTime - startTime) + ' ms');
$('.sku').each(function() {
var self = $(this);
var attr_id = self.attr('attr_id');
if (!SKUResult[attr_id]) {
self.attr('disabled', 'disabled');
}
}).click(function() {
var self = $(this);
//选中自己，兄弟节点取消选中
self.toggleClass('bh-sku-selected').siblings().removeClass('bh-sku-selected');
//已经选择的节点
var selectedObjs = $('.bh-sku-selected');
if (selectedObjs.length) {
//获得组合key价格
var selectedIds = [];
selectedObjs.each(function() {
selectedIds.push($(this).attr('attr_id'));
});
selectedIds.sort(function(value1, value2) {
return parseInt(value1) - parseInt(value2);
});
var len = selectedIds.length;
var prices = SKUResult[selectedIds.join(';')].prices;
var maxPrice = Math.max.apply(Math, prices);
var minPrice = Math.min.apply(Math, prices);
$('#price').text(maxPrice > minPrice ? minPrice + '-' + maxPrice : maxPrice);
//用已选中的节点验证待测试节点 underTestObjs
$('.sku').not(selectedObjs).not(self).each(function() {
var siblingsSelectedObj = $(this).siblings('.bh-sku-selected');
console.log(siblingsSelectedObj.attr('attr_id'))
var testAttrIds = [];//从选中节点中去掉选中的兄弟节点
if (siblingsSelectedObj.length) {
var siblingsSelectedObjId = siblingsSelectedObj.attr('attr_id');
for (var i = 0; i < len; i++) {
(selectedIds[i] != siblingsSelectedObjId) && testAttrIds.push(selectedIds[i]);
}
} else {
testAttrIds = selectedIds.concat();
}
testAttrIds = testAttrIds.concat($(this).attr('attr_id'));
testAttrIds.sort(function(value1, value2) {
return parseInt(value1) - parseInt(value2);
});
var SKU = SKUResult[testAttrIds.join(';')]
if (!SKU || SKU.count === 0) {
$(this).attr('disabled', 'disabled').removeClass('bh-sku-selected');
} else {
$(this).removeAttr('disabled');
}
});
} else {
//设置默认价格
$('#price').text('--');
//设置属性状态
$('.sku').each(function() {
SKUResult[$(this).attr('attr_id')] ? $(this).removeAttr('disabled') : $(this).attr('disabled', 'disabled').removeClass('bh-sku-selected');
})
}
});
});
</script>
</body>
</html>