商品SKU选择实现 - CSDN博客
商品SKU选择实现
在客户购买商品的时候，若这个商品存在多种”规格”（SKU），就需要客户手动选择自己想要的哪款。当时并不是每种我们都有库存， 所有就需要提供提供一个筛选功能，当客户选中一个条件的时候，需要设置其他条件中的一些值不可选。 这样就能保证不论客户怎么选择，到最后的选择都是有库存的”规格”（SKU）
开始之前先定义几种术语
属性集: 一个商品全部属性的集合
属性： 商品中的 尺码 颜色 就是两个属性
属性值: 尺码、颜色可有多个值 比如 衣服的尺码：S M XL 衣服的颜色：黑色 白色 蓝色 其中 XL 黑色就是属性值
SKU： Stock Keeping Uint(库存量单位) 由属性值组合而成（这些属性值属于不通的属性）如 一件衣服 (XL,白色) 它能确定商品的&唯一性&，同一款式的衣服 可能有不通的颜色和大小 ，把颜色大小限制住，就能确定这件‘商品’了。
为了简化 我们虚拟出一个的商品， 下面是它的属性集和SKU：
var keys = {
'attr1':['10','11'],
'attr2':['20','21','22','23'],
'attr3':['30','31','32'],
'attr4':['40','41']
/*num是库存*/
var sku_list=[
{'attrs':'10|20|30|40','num':120},
{'attrs':'10|21|30|40','num':10},
{'attrs':'10|22|30|40','num':28},
{'attrs':'10|22|31|41','num':220},
{'attrs':'10|22|32|40','num':130},
{'attrs':'11|23|32|41','num':120},
为选择之前是这种显示状态attr1
41 attr1-attr4中有 2x4x3x2=42种组合，但是有库存的只有上面6种组合我们要做的就是，在选择某一个属性的时候，把其他为选择的属性中的一些值设置为block（锁定状态） 因为它们和已选属性的组合是没有库存的（有库存的只有上面6种）比如：选择 10 和 21后， 有库存的SKU（组合） 只有{'attrs':'10|21|30|40','num':10},attr3中的31&32&以及attr4中的&41&就要设置为blockattr1 *10*
-41-总结1：在所有库存组合(sku_list)中筛选出包含选中属性&#2)的组合(10|21|30|40),&未选的属性（attr3、attr4）中的所有属性值若不在这个组合中就设置为block还有一个问题，在已选属性(attr1,attr2)中 , 我可以把21换成20或22; 因为&10|21&10|22&也是一种可行组合（有库存）,10|23不可行，所以需要20、22也可选,23设置为block或者21不变，修改attr1中的属性值&11|21&不可行，11设置block。attr1 *10*
总结2：&已选属性&(attr1,attr2) 中任意一个属性(attr1)的属性&#2)， 若不能和其他属性（attr2）中的选中属性值(21)&组合成有效（有库存）组合, 则设置该属性(11)为block好了，接下来就是根据上面总结的两条，来进行程序的实现 点击&&可查看demo&&!DOCTYPE
HTML&&&html lang=&en-US&&&&head&&&meta
charset=&UTF-8&&&&title&商品SKU选择DEMO&/title&&&/head&&&body&&&style
type=&text/css&& &ul,li{ padding:0 margin:0} &#panel{
width:500 margin:30} &&&&&.goods_attr{
overflow:} &.goods_attr .label {font: 12px/30px '宋体';color:
#777;width: 50;padding-right: 10float: display:} &.goods_attr
ul {float:width:300} &&&.goods_attr
li{color:#333;overflow:position:float:text-align: vertical-align: border:1px solid #999;text-indent:0; cursor:pointer} &.goods_attr
li.b{border:1px dotted #CCC;color:#DDD; pointer:} &.goods_attr
li.b img {opacity:0.4;} &.goods_attr li.sel{ border:1px solid
#c80a28;color:#333;} &&&.goods_attr
li.text{margin:5px 10px 5px 0; height:23line-height:23text-indent:0;padding:0 23font-style:} &.goods_attr
li.img{ margin-right:10width:35height:35 line-height:35text-align:} &&&&&&/style& &&&&div
id=&panel&& &&div id=&panel_sku_list&&&pre&&/pre&&/div& &&div
id=&panel_sel&& &&&&/div& &&&&/div& &&&&script
src=&&&&/script& &&script
type=&text/javascript&& &/* &属性集 &下面一共有4个属性 &属性item1
下面有 2个属性值 分别是 10,11 &（举个常见的例子 属性尺码 下有 S M L XL 4个属性值 ） &*/ &var
keys = { &'attr1':['10','11'], &'attr2':['20','21','22','23'], &'attr3':['30','31','32'], &'attr4':['40','41'] &}; &//SKU，Stock
Keeping Uint(库存量单位) &var sku_list=[ &{'attrs':'10|20|30|40','num':120}, &{'attrs':'10|21|30|40','num':10}, &{'attrs':'10|22|30|40','num':28}, &{'attrs':'10|22|31|41','num':220}, &{'attrs':'10|22|32|40','num':130}, &{'attrs':'11|23|32|41','num':120}, &]; &&&&&/**init
start */ &&&//显示html结构 &function
show_attr_item(){ &var html=''; &for(k
in keys){ &html+='&div class=&goods_attr& & &span class=&label&&'+k+'&/span&'; &html+='&ul&' &for(k2
in keys[k]){ &_attr_id=keys[k][k2]; &html+='&li
class=&text& val=&'+_attr_id+'& &'; &html+='&span&'+_attr_id+'&/span&'; &html+='&s&&/s&'; &html+='&/li&' &} &html+='&/ul&'; &html+='&/div&'; &} &$('#panel_sel').html(html); &} &//显示数据 &function
show_data(sku_list){ &var str=&&; &for(
k in sku_list){ &str+=sku_list[k]['attrs']+&\t&+sku_list[k]['num']+&\n&; &} &$('#panel_sku_list
pre').html(str); &} &&&show_data(sku_list); &show_attr_item() &&&/**init
end */ &&&//获取所有包含指定节点的路线 &function
filterProduct(ids){ &var result=[]; &$(sku_list).each(function(k,v){ &_attr='|'+v['attrs']+'|'; &_all_ids_in= &for(
k in ids){ &if(_attr.indexOf('|'+ids[k]+'|')==-1){ &_all_ids_in= & &} &} &if(_all_ids_in){ &result.push(v); &} &&&}); &return
&} &&&//获取
经过已选节点 所有线路上的全部节点&// 根据已经选择得属性值，得到余下还能选择的属性值 &function
filterAttrs(ids){ &var products=filterProduct(ids); &//console.log(products); &var
result=[]; &$(products).each(function(k,v){ &result=result.concat(v['attrs'].split('|')); &&&}); &return
&} &&&&&//已选择的节点数组 &function
_getSelAttrId(){ &&&var
list=[]; &$('.goods_attr li.sel').each(function(){ &list.push($(this).attr('val')); &}); &return
&} &&&$('.goods_attr
li').click(function(){ &if($(this).hasClass('b')){ &return
;//被锁定了 &} &if($(this).hasClass('sel')){ &$(this).removeClass('sel'); &}else{ &$(this).siblings().removeClass('sel'); &$(this).addClass('sel'); &&&} &var
select_ids=_getSelAttrId(); &&&//已经选择了的规格 &var
$_sel_goods_attr=$('li.sel').parents('.goods_attr');&&&//
step 1 &var all_ids=filterAttrs(select_ids); &&&//获取未选择的 &var
$other_notsel_attr=$('.goods_attr').not($_sel_goods_attr); &&&//设置为选择属性中的不可选节点 &$other_notsel_attr.each(function(){ &set_block($(this),all_ids); &&&}); &&&//step
2 &//设置已选节点的同级节点是否可选 &$_sel_goods_attr.each(function(){ &update_2($(this)); &}); &&&&&}); &&&function
update_2($goods_attr){ &// 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选 &var
select_ids=_getSelAttrId(); &var $li=$goods_attr.find('li.sel'); &&&var
select_ids2=del_array_val(select_ids,$li.attr('val')); &&&var
all_ids=filterAttrs(select_ids2); &&&set_block($goods_attr,all_ids); &} &&&function
set_block($goods_attr,all_ids){ &&&//根据
$goods_attr下的所有节点是否在可选节点中（all_ids） 来设置可选状态 &$goods_attr.find('li').each(function(k2,li2){ &&&if($.inArray($(li2).attr('val'),all_ids)==-1){ &$(li2).addClass('b'); &}else{ &$(li2).removeClass('b'); &} &&&}); &&&} &function
del_array_val(arr,val){&//去除 数组 arr中的 val ，返回一个新数组 &var
a=[]; &for(k in arr){ &if(arr[k]!=val){ &a.push(arr[k]); &} &} &return
&} &&&&/script& &&&&&&&&/body&&&/html&
本文已收录于以下专栏：
相关文章推荐
Android 选择商品属性sku最近项目中使用SKU属性查询,类似淘宝京东商品的选择,在网上查询了弄了几个源码看看，发现还是实现不了多属性选择问题，再原基础上改动相当费事，所以想干脆自己处理这个问题...
这是关于商品SKU的数据库设计，想了解更多，可以查看这个博客，博主写的很好：/winstonyan/archive//2315886.h...
上文谈到5种商品SKU设计模式，本文将做些细化说明。
　　笔者研究过不少电子商务平台软件，关于SKU的设计各有不同，之所以有这样的区别，是因为面向不同规模的电子商务网站，
存在产品分类复杂...
总体思路1.商品关联商品类别，商品类别关联多个商品属性，其中指定某几个商品属性为SKU关键字段。例如，服装类别的颜色、尺码属性。2.多个SKU商品属性值组合生成唯一的商品SKUID。例如，红色、L=1...
做了两年多针对淘宝的电子商务数据线下数据系统，越到后面越觉得自己还没入门，不管技术上还是业务上，这篇文章既是对自己的积累的一次梳理，更想的是能在和各位朋友交流中，互相进步。
一、SKU及相关概念定义
在设计商品SKU之前，首先让我们熟悉一下SKU和相关的一些概念。
# 什么是SKU：
SKU=Stock Keeping Unit(库存量单位...
总体思路1.商品关联商品类别，商品类别关联多个商品属性，其中指定某几个商品属性为SKU关键字段。例如，服装类别的颜色、尺码属性。2.多个SKU商品属性值组合生成唯一的商品SKUID。例如，红色、L=1...
属性名|属性值
1.同一商品不同SKU库存和售价不同.
2.不同类型的商品具有不同的属性名和属性值(如汽车和服饰),所以属性需要支持...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)求教，淘宝的选择商品SKU的时候，是怎么计算的【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：154,298贴子：
求教，淘宝的选择商品SKU的时候，是怎么计算的收藏
就是有很多规格， 你选中了哪个规格的具体值 下面就会显示对应SKU的input标签让你填
美橙建站之星提供企业建站,网络推广,一站式完美解决方案,美橙互联企业云服务!
唉 电脑没有可以截图的软件。
就是用户在发布商品的时候，比如你这个商品 有颜色和尺寸两个规格，当你选择了 其中的具体值时(蓝色 180/xl)
下面就会弹出对应sku添加框，不知道有人做过吗。 请问怎么判断啊，一个可以判断 选两个就不知道怎么判断了
想截图，登抠抠就可以了
你看 我点了35
和透明 下边就出来一个如果 我只选了一个规格的话 他就不会弹出来 ，而只是提示， 我不知道它是怎么判断的
登录百度帐号推荐应用(柠檬不萌只是酸)
第三方登录：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
现在有四件衣服 比如 裤子 外套 内衣 袜子
然后每件商品有不通的颜色 比如 裤子有黑色 蓝色 白色
内衣有 黑色 白色
袜子有 花色 藏青色
然后每件商品分男 女的 尺码为 男性
女性为 s(比X小一码)
还需要每件商品不同的属性的库存
这样的表怎么设计呢
求大神指点 给设计下数据库
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
实体－属性－值模型（EAV模型）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
希望这篇文章能够帮助你,
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：4被浏览741分享邀请回答暂时还没有回答，开始写第一个回答