电商后台中基本上都有一种根据sku生成表格的功能,例如一个商品有颜色,尺寸,容量三种属性,颜色有['红色','蓝色'],尺寸有['40码','41码','42码'],容量有['100ML','200ML','300ML','400ML'],那么一共有2*3*4=24种sku,展现如下:

这种计算虽然有点麻烦,但还算比较简单,因为比较中规中矩。但是如果实现部分sku的表格,就会比这个更加复杂一点,例如['红色','40码','100ML']的sku是不存在的,也就是全sku表格有一个删除的功能,今天就来讲讲它的实现。

重点分析

如果是实现全sku表格,我们只要知道head=['颜色','尺寸','容量'],content=[['红色','蓝色'],['40码','41码','42码'],['100ML','200ML','300ML','400ML']],就可以绘制出表格。但是如果是部分sku表格,我们就要用类似map的结构来表示当前存在的sku:

然后遍历这个sku的map,得到一个长度为sku叶子节点个数,宽度为属性数组长度的一个二位数组。数组的每个结构如下:

当end为true的时候,表示可以放td,rowspan表示td的行高。我们看看这个二维数组的部分数据:

sku的map数组转变成我们所设想的二维数组也是此次的难点,主要是通过递归完成遍历和下级孩子个数的收集,转换代码如下:

生成表格的时候,遍历这个二维数组,只有当end为true的时候,才会加入一个td,同时设置rowspan:

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字