jquery动态生成SKU表格

人心

2019-06-27

sku的概念

SKU=Stock Keeping Unit（库存量单位）。即库存进出计量的基本单元，可以是以件，盒，托盘等为单位。SKU这是对于大型连锁超市DC（配送中心）物流管理的一个必要的方法。现在已经被引申为产品统一编号的简称，每种产品均对应有唯一的SKU号。单品：对一种商品而言，当其品牌、型号、配置、等级、花色、包装容量、单位、生产日期、保质期、用途、价格、产地等属性中任一属性与其他商品存在不同时，可称为一个单品。--百度百科

之前要做一个自定义sku属性并动态生成SKU表格,然后在网上找了一个类似的
 http://www.internetke.com/jsE...
进行学习最后做出的效果如下

需要自定义SKU属性，可自定义SKU有两个纬度：例如颜色和规格，如下图所示
添加SKU属性后，自动生成SKU表格，需要填写表格中每个SKU对应的库存、图片、价格

实现方法：根据输入的属性值生成数组，此数组为多维数组。对数组进行排列组合，形成新的数组。然后进行表格的生成，之后合并相同列。

var step = {
        //SKU信息组合
        Creat_Table: function () {
            
        },//合并行
        hebingFunction: function () {
           
        },
        //组合数组
        doExchange: function (doubleArrays,propvalidArr) {           
    }
    return step;
})

获取所有失去焦点的input，形成属性数组

var SKUObj = $(".attribute .Father_Title");//获取所有的属性
var arrayTile = new Array();//存放所有的属性
var arrayInfo = new Array();//存放所有的属性值
var arrayColumn = new Array();//指定列，用来合并哪些列
var propvalidArr = [];//记录SKU值主键
var columnIndex = 0;
$.each(SKUObj, function (i, item){
    if ($(item).find("input[type='text']").val() != ""){
        var itemName = $(item).parent().find(".attrValue");
        var order = [];
        var skuVal = [];
        $.each(itemName, function (index,value){
            if($(value).find("input[type='text']").val() != ""){
                order.push($(value).find("input[type='text']").val());
                var idx = $(item).attr("propid")+$(value).find("div").attr("propvalid");
                skuVal.push($(item).attr("propid")+$(value).find("div").attr("propvalid"))
            }
        });
        if(order.join()!= ""){
            arrayTile.push($(item).find("input[type='text']").val());
            arrayInfo.push(order);
            arrayColumn.push(columnIndex);
            columnIndex++;
            propvalidArr.push(skuVal);
        }
    }
});

2.arrayInfo是一个多为数组,该数组进行排列组合，就是寻找出所有的组合的可能性

1.[  
      ["白色", "红色"],
    ]
    
     排列组合成为：   
    [  
      ["白色"],
      ["红色"],
    ]

2.[  
      ["白色", "红色"],
      ["200", "300"],
    ]
    排列组合成为：
    [  
      ["白色", "200"],
      ["白色", "300"],
      ["红色", "200"],
      ["红色", "300"],
    ]

实现代码:
    doExchange: function (doubleArrays,propvalidArr) {
        var len = doubleArrays.length;
        if (len >= 2) {
            var arr1 = doubleArrays[0], propArr1 = propvalidArr[0];
            var arr2 = doubleArrays[1], propArr2 = propvalidArr[1];
            var len1 = doubleArrays[0].length, propLen1 = propvalidArr.length;
            var len2 = doubleArrays[1].length, propLen2 = propvalidArr.length;
            var newlen = len1 * len2, propnewlen = propLen1 * propLen2;
            var temp = new Array(newlen), proptemp = new Array(propnewlen);
            var index = 0;
            for (var i = 0; i < len1; i++) {
                for (var j = 0; j < len2; j++) {
                    temp[index] = arr1[i] + "," + arr2[j];
                    proptemp[index] = propArr1[i] + "," + propArr2[j];
                    index++;
                }
            }
            var newArray = new Array(len - 1);
            var propnewArray = new Array(len - 1);
            newArray[0] = temp, propnewArray[0] = proptemp;
            if (len > 2) {
                var _count = 1;
                for (var i = 2; i < len; i++) {
                    newArray[_count] = doubleArrays[i];
                    propnewArray[_count] = propvalidArr[i];
                    _count++;
                }
            }
            return step.doExchange(newArray,propnewArray);

        }
        else {
            var propArr = [];
            propArr.push(doubleArrays[0]);
            propArr.push(propvalidArr[0]);
            return propArr;
        }
    }

sku jquery var 数组