线上项目示例GIF
$(".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已经有了一定的了解，这里就不做过多说明，这篇文章主要带你实现任意层级的规格组合，图中只有三级是因为做了限制。
布局结构.png
整个规格数据包含在.spec-content中，表格生成在#createTable中。这里有4个规格颜色、套餐、存储、版本，当然也可以是n个，熟悉完布局下面我们来分析代码。
选则规格.png
原始数据—specArray
处理后数据—sku
处理后的数组长度 length=2,因为sku的生成规则是n * n * ... 也就是 1 * 1 * 2=2。拿到这个数组你就可以生成对应的表格了。主要方法 duSku（），getSkuTr（）。
下次会写Android 和 js 实现商城购买的规格匹配方法,效果参考淘宝商品详情购物逻辑，可实现库存0判断自动灰，选中一个规格时自动计算对应sku的库存区间，价格区间
网友评论