SKU=库存单位(库存量单位)。即库存进出计量的基本单元,可以是以件,盒,托盘等为单位。
SKU是用来定价和管理库存的,比如一个产品有很多颜色,很多配置,每个颜色和配置的组合都会形成新的产品,这时就产生很多SKU, SKU在传统线下行业也是一个非常常用的概念,尤其是服装行业,同款不同尺码不同色都是独立的SKU,需要有独立的条形码,独立的库存管理等。
实现效果
源码
& lt; !DOCTYPE HTML>
& lt; html lang=癳n - us”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>商品SKU选择DEMO3
& lt;/head>
& lt; body>
& lt;风格类型=" text/css "比;
ul,李{填充:0 px;保证金:0 px;}
{#面板宽度:500 px;保证金:30 px汽车;}
.goods_attr{溢出:隐藏;}
.goods_attr .label{字体:12 px/30 px的宋体”;颜色:# 777;宽度:50 px;; padding-right: 10 px;浮动:左;显示:块;}
.goods_attr ul{浮动:左;宽度:300 px;}
李.goods_attr{颜色:# 333;溢出:隐藏;位置:相对;浮动:左;text-align:中心;vertical-align:中间;边界:1 px固体# 999;indent: 0;光标:指针}
.goods_attr李。b{边界:1 px虚线# CCC;颜色:# DDD;指针:没有;}
.goods_attr李。b img{不透明度:0.4;}
.goods_attr李。选取{边界:1 px固体# c80a28;颜色:# 333;}
.goods_attr李。文本{保证金:5 px 10 px 5 px 0;高度:23 px;行高:23 px; indent: 0;填充:0 23 px;字体样式:正常;}
.goods_attr李。img {margin-right: 10 px;宽度:35 px;高度:35 px;行高:35 px; text-align:中心;}
& lt;/style>
& lt; div id=懊姘濉北?
& lt; div id=" panel_sku_list "祝辞& lt; pre> & lt;/pre> & lt;/div>
& lt; div id=皃anel_sel”比;
& lt;/div>
& lt;/div>
& lt;脚本src=" http://libs.baidu.com/jquery/1.9.0/jquery.min.js "祝辞& lt;/script>
& lt; script>
var关键字={
:' attr1 ' (“10”,“11”,“12”),
' attr2 ': [“20”,“21”,“22”,“23”),
“attr3”: [“30”,“31”,“32”),
“attr4”:【“40”、“41”】
};//SKU,库存单位(库存量单位)
var sku_list=[
{“attrs”:“10 | 20 30 40 | |”,“num”: 120},
{“attrs”:“10 30 40 | | | 21日”,“num”: 10},
{“attrs”:“10 30 | | | 22日40”,“num”: 28},
{“attrs”:“10 | 22 | | 41 31日”,“num”: 220},
{“attrs”:“10 | | 32 | 22日40”,“num”: 130},
{“attrs”:“11 | 23 32 | | 41”,“num”: 120},
{“attrs”:“11 | 22 32 | | 41”,“num”: 120},
{“attrs”:“11 | 22 31 | | 41”,“num”: 120},
{“attrs”:“11 | | 22日31日| 40”,“num”: 120},
{“attrs”:“12 | | 22日31日| 40”,“num”: 120},
];//显示html结构
函数show_attr_item () {
var html=";//k是下标,跟php不同
键(k) {
html +=' & lt; div类=癵oods_attr”比;& lt;跨类="标签"祝辞+ k +的& lt;/span>”;
html +=& lt; ul>”
(k2键[k]) {
_attr_id=键[k] (k2);
html +=' & lt;李类="文本" val=" + _attr_id +”祝辞的;
html +=& lt; span>”+ _attr_id + & lt;/span>;
html +=' & lt; s> & lt;/s>;
html +=& lt;/li>”
}
html +=& lt;/ul>;
html +=& lt;/div>;
}
$ (' # panel_sel ') . html (html);
}//显示数据
函数show_data (sku_list) {
var str=" ";
在sku_list (k) {
str +=sku_list [k] [' attrs '] +“t \”+ sku_list [k] (“num”) +“\ n”;
}
$ (' # panel_sku_list pre ') . html (str);
}
show_data (sku_list);
show_attr_item ();//返回对象中的一个数组,有attr属性
函数filterProduct (ids) {
结果var=[];
美元(sku_list) . each(函数(k、v) {
_attr=' | ' + v (“attrs”) + ' | ';
_all_ids_in=true;
在ids (k) {
如果(_attr.indexOf (“|”+ ids [k] + ' | ')==1) {
_all_ids_in=false;
打破;
}
}//把数组中所的id在那行的所有元素都压入的结果。最后返回
如果(_all_ids_in) {
result.push (v);
}
});
返回结果;
}
函数filterAttrs (ids) {
var=filterProduct产品(ids);//console.log(产品);
结果var=[];
(产品),每美元(函数(k、v) {//括号内的还是返回一个数组,concat函数是拼接一个或多个函数。
结果=result.concat (v (' attrs '] .split (“|”));
});
返回结果;
}//已选择的节点数组
函数_getSelAttrId () {
var列表=[];
$('。goods_attr li.sel ') . each(函数(){
list.push($(这).attr (val));
});
返回列表;
}//注册点击事件
$('。goods_attr李”).click(函数(){
如果($ ().hasClass (b)) {
返回;//被锁定了
}
如果($ ().hasClass (sel)) {
(美元).removeClass(“选取”);
其他}{
美元(这).siblings () .removeClass(“选取”);
(美元).addClass(“选取”);
}
var select_ids=_getSelAttrId ();//console.log (select_ids);////已经选择了的规格
var id=filterAttrs (select_ids);//如果id不在已选id所在行组成的数组中,则然他禁止点击
$ (' # panel_sel ');(‘李’),每人(函数(k2, li2) {
如果(.inArray美元($ (li2) .attr (“val”), ids)==1) {
$ (li2) .addClass (b);
其他}{
$ (li2) .removeClass (b);
}
});
});
& lt;/script>
& lt;/body>
& lt;/html>
