$(".spec-content").on("change",function () {
//当.spec-content中的内容发生改变的时候执行 sku.createTable()方法。
sku.createTable();
});
var sku = {
createTable: function () {...},//创建表格
getSkuTr: function () {...},//获取sku
dosku: function () {...},//生成sku
mergeTable: function () {...}//合并表格
}
GitHub地址: https://github.com/songsongZhou/skuUpload。(线上用的layerui,GitHub上的demo是一个简化版,但是功能是一样)
你能看到这篇文章说明你对sku已经有了一定的了解,这里就不做过多说明,这篇文章主要带你实现任意层级的规格组合,图中只有三级是因为做了限制。
整个规格数据包含在.spec-content中,表格生成在#createTable中。这里有4个规格颜色、套餐、存储、版本,当然也可以是n个,熟悉完布局下面我们来分析代码。
选则规格.png
原始数据—specArray
处理后数据—sku
处理后的数组长度 length=2,因为sku的生成规则是n * n * ... 也就是 1 * 1 * 2=2。拿到这个数组你就可以生成对应的表格了。主要方法 duSku(),getSkuTr()。
下次会写Android 和 js 实现商城购买的规格匹配方法,效果参考淘宝商品详情购物逻辑,可实现库存0判断自动灰,选中一个规格时自动计算对应sku的库存区间,价格区间
网友评论