jquery动态生成SKU表格

sku的概念

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

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

  1. 需要自定义SKU属性,可自定义SKU有两个纬度:例如颜色和规格,如下图所示图片描述
  2. 添加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;
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值