123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <!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>
- <link type="text/css" rel="stylesheet" href="css/shCore.css" />
- <link type="text/css" rel="stylesheet" href="css/shCoreDefault.css"/>
- <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
- <script type="text/javascript" src="js/json2.js"></script>
- <script type="text/javascript" src="js/shCore.js"></script>
- <script type="text/javascript" src="js/shBrushJScript.js"></script>
- <script type="text/javascript">SyntaxHighlighter.all();</script>
- <style type="text/css">
- .bh-sku-selected {color: red;}
- </style>
- <script type="text/javascript">
- var startTime = new Date().getTime();
- var keys = [['24', '25'], ['12', '13'], ['31', '32']];
- var data = {"24;12;31": {price: 366.00, count: 46}, "25;12;32": {price: 406, count: 66}}
- //保存最后的组合结果信息
- var SKUResult = {};
- //获得对象的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 add2SKUResult(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]
- };
- }
- }
- //初始化得到结果集
- 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++) {
- add2SKUResult(combArr[j], sku);
- }
- //结果集接放入SKUResult
- SKUResult[skuKeyAttrs.join(";")] = {
- 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);
- 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();
- 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');
- 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);
- });
- if(!SKUResult[testAttrIds.join(';')]) {
- $(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>
- </head>
- <body>
- <div>
- 属性2:
- <input type="button" class="sku" attr_id="24" value="24"/>
- <input type="button" class="sku" attr_id="25" value="25"/>
- </div>
- <div>
- 属性1:
- <input type="button" class="sku" attr_id="12" value="12"/>
- <input type="button" class="sku" attr_id="13" value="13"/>
- </div>
- <div>
- 属性3:
- <input type="button" class="sku" attr_id="31" value="31"/>
- <input type="button" class="sku" attr_id="32" value="32"/>
- </div>
- <span id="init_time">init sku time: </span> </br>
- <span id="price">--</span> </br>
- <pre class="brush: js;">
- var keys = [
- ['24', '25'],
- ['12', '13'],
- ['31', '32']
- ];
- var data = {
- "24;12;31": {price: 366.00, count: 46},
- "25;12;32": {price: 406, count: 66}
- }
- </pre>
- </span>
- </body>
- </html>
|