后台商品属性组合小例子

     今天2016.12.23马上圣诞节了，先祝大家圣诞快乐。最近，一直在忙公司购物webApp项目，用到技术vue vue-router等（等到项目上线后拿出来分享下）。这两天穿插着后台让帮忙做一个关于商品属性组合方面东西。今天交付给后台了，距离下班的这段时间时间把写的东西分享出来。当然代码里边还有很多可以优化的地方，后期如果有时间再拿出来说。

    话不多说，先把结果图拿出来看下，知道是个什么东西。当然可能有些我说的不好，可以再详细的看下代码。

     

    哎呦我去，公司这网速传了老半天。

    直接看效果 https://huashuaipeng.github.io/productdemo.io/demo.html

    大体操作流程是这样的

     1.点击“添加多级型号”按钮，弹出层选择商品的默认型号“颜色或者尺码”（也可以新建）

     2.点击弹出层确定后，商品规格的一些默认选项 如：颜色：：：xxl,xxxl,m,s

     3.选择完对应规格后会进行组合，动态生成表格

     知识点：

     1.用到的js库（jquery,layer.js）jq不说了，layer应该大家也不知道 不知道的同学点这里 http://www.layui.com/doc/modules/layer.html 

     2.面向对象编程

     3.js内部的一些知识 数组 循环等等

    这块核心代码 是两个类 我大概贴出来（当然个人习惯不是说写的很好，请大家指正）类1 ：Skumodel 生成规格 类2：SkuCell动态产生表格内容类

    

/***
             * Skumodel 为生成规格类
             * title为规格名字  string  例：尺码
             * times将要生成的规格项目  Array  例如：尺码：xxl,xl,m,s
             * dataid为产生型号的标识最外层元素上的id   string
             * **/
            var Skumodel = function(title, items, dataid) {
                //最外层div+标题栏
                this.title = title || "";
                this.items = items || [];
                this.container = $('<div class="sku_container" id="' + dataid + '"><div class="sku_modellist_title">' + this.title + '：</div></div>');
                //模型列表
                this.skumodels = $('<div class="sku_models"></div>');
                this.skumlist = $('<div class="sku_list"></div>')
                this.skuinputcon = $('<div class="sku_add"></div>');
                //输入框
                this.skuinput = $('<input type="text" placeholder="请输入型号属性">');
                //新建按钮
                this.addbtn = $('<a>新建</a>');
                this.init(this.items)
            }
            Skumodel.prototype = {
                //初始化显示组件
                init: function(items) {
                    var html = ""
                    for(var i = 0; i < items.length; i++) {
                        html += '<span class="sku_item"><a data-id="' + getIndex() + '">' + items[i] + '</a><i class="sku_item_close">×</i></span>';
                    }
                    //获取所有生成按钮
                    this.skumlist.append($(html))
                    this.skumodels.append(this.skumlist)
                    this.container.append(this.skumodels)
                    this.skuinputcon.append(this.skuinput)
                    this.skuinputcon.append(this.addbtn)
                    this.skumodels.append(this.skuinputcon)
                    $(".sku_modellist").append(this.container);
                    this.bindEvent()
                },
                bindEvent: function() {
                    var self = this;
                    //点击新建按钮产生
                    this.addbtn.click(function() {
                        self.createItem();
                    });
                    this.activeItem();
                    //点击删除按钮删除
                    this.deleteItem();
                    //控制删除符号
                    this.toggleCloseEle();
                },
                //创建sku子元素
                createItem: function() {
                    var value=$.trim(this.skuinput.val())
                    if(value.length <= 0) {
                        layer.alert("请输入内容");
                        return
                    }
                    if(sizes[this.title].indexOf(value)>=0){
                        layer.msg("请勿重复创建")
                        return;
                    }
                    sizes[this.title].push(this.skuinput.val())
                    this.skumlist.append($('<span class="sku_item"><a data-id="' + getIndex() + '">' + value + '</a><i class="sku_item_close">×</i></span>'))
                    this.skuinput.val("")
                },
                //子元素是否选中事件
                activeItem: function() {
                    this.skumlist.on("click", "a", function() {
                        $(this).toggleClass("itemactive");
                        tableContent()
                    });
                },
                //监听删除元素
                deleteItem: function() {
                    var self=this;
                    this.skumlist.on("click", ".sku_item_close", function() {
                        $(this).parent().remove();
                        var text = $(this).parent().find("a").text();
                        var textarr = sizes[self.title];
                        textarr.splice(textarr.indexOf(text), 1)
                        tableContent();
                    });
                },
                //控制删除符号的显示
                toggleCloseEle: function() {
                    //显示删除符号
                    this.skumlist.on("mouseover", ".sku_item", function() {
                        $(this).find(".sku_item_close").css({
                            display: "inline-block"
                        })
                    });
                    //显示删除符号
                    this.skumlist.on("mouseout", ".sku_item", function() {
                        $(this).find(".sku_item_close").css({
                            display: "none"
                        })
                    });
                }
            };

            /****
             * SkuCell动态产生表格内容类
             * cellist为表格内部元素    Array   如["红色","xxl"]
             * dataid为行表格id 产生元素的唯一标识   string
             * ***/
            var SkuCell = function(celllist, dataid) {
                //每行表格的父元素
                this.cellcon = $('<div id="' + dataid + '" class="sku_cell clearfix"></div>');
                //价格输入
                this.moneyInput = $('<div class="sku_t_title"><input /></div>');
                //库存输入
                this.leftInput = $('<div class="sku_t_title"><input /></div>');
                this.init(celllist)
            };
            SkuCell.prototype = {
                constructor: SkuCell,
                init: function(celllist) {
                    var html = "";
                    for(var i = 0; i < celllist.length; i++) {
                        html += '<div class="sku_t_title">' + celllist[i] + '</div>'
                    }
                    this.cellcon.append($(html));
                    this.cellcon.append(this.moneyInput);
                    this.cellcon.append(this.leftInput);
                    $('.sku_tablecell').append(this.cellcon)
                }
            };

接下来就是组合部分

            /***
             * 排列组合计算出选择的规格型号的组合方式
             * 
             * */
            function getResult() {
                var head = arguments[0][0];
                for(var i in arguments[0]) {
                    if(i != 0) {
                        head = group(head, arguments[0][i])
                    }
                }
                tabledata = [];
                $(".sku_cell").each(function(index) {
                    tabledata.push($(this).attr("id"))
                }).hide()
                for(var j = 0, len = head.length; j < len; j++) {
                    var newcell = head[j]["datatext"].split(',')
                    var dataid = head[j]["dataid"];
                    if(tabledata.indexOf(dataid) < 0) {
                        new SkuCell(newcell, dataid)
                    } else {
                        $("#" + dataid).show()
                    }
                }
            };
            //组合前两个数据
            function group(first, second) {
                var result = [];
                for(var i = 0, leni = first.length; i < leni; i++) {
                    for(var j = 0, len = second.length; j < len; j++) {
                        result.push({
                            dataid: first[i]["dataid"] + "-" + second[j]["dataid"],
                            datatext: first[i]["datatext"] + "," + second[j]["datatext"]
                        })
                    }
                }
                return result
            }

详细部分大家下载demo看下，地址：https://github.com/huashuaipeng/productdemo