后台商品屬性組合小例子

     今天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