自动批量生成商品属性及价格原生js

Html

Css

input {
	text-align:center;
}
.goodsAdd {
	width:100%;
}
.goodsAdd .goodsType {
	width:100%;
}
.goodsAdd .goodsType .goodsTypeItem {
	width:100%;
	height:35px;
	padding-top:5px;
	padding-bottom:5px;
}
.goodsAdd .goodsType .goodsTypeItem button {
	margin-left:10px;
	background-color:#DDDDDD;
	height:32px;
	line-height:16px;
	border:none;
	border-radius:2px;
	padding:10px;
}
.goodsAdd .goodsType .goodsTypeItem .active {
	background-color:#449D44;
	color:#fff;
}
.goodsAdd .goodsLists {
	border-collapse:collapse;
}
.goodsAdd .goodsLists td,.goodsAdd .goodsLists th {
	border:1px solid #f4f4f4;
}
.goodsAdd .submit {
	position:fixed;
	right:10%;
	top:50%;
}

/* 传入的JSON格式数据 */
var goodsTypeData = {
    "颜色": ["红色", "绿色", "黄色", "蓝色"],
    "尺码": ["S", "M", "L"],
    "布料": ["蚕丝", "纯棉", "羽绒"],
    "产地": ["广州", "浙江", "绵阳"]
};

/* 提交数据 */
function submit() {
    var result = [];
    var th = document.querySelectorAll('th');
    var thName = [];
    th.forEach(function(e) {
        thName.push(e.innerText);
    })
    var tr = document.querySelectorAll('tr');
    for (var i = 1, len = tr.length; i < len; i++) {
        var td = tr[i].children;
        var jsonStr = "{";
        for (var j = 0, length = td.length; j < length; j++) {

if (j < th.length - 3) {
                jsonStr += '"' + thName[j] + '":"' + td[j].innerText + '",'
            } else {
                jsonStr += '"' + thName[j] + '":"' + td[j].children[0].value + '",'
            }

}
        jsonStr = jsonStr.substr(0, jsonStr.length - 1)
        jsonStr += "}"
        result.push(JSON.parse(jsonStr))
    }

console.log(result)
}

var subData = {};
var showData = [];
var goodsType = document.querySelector(".goodsType");
var goodTypeStr = "";
renderType();

/* 把类型数据渲染出来 */
function renderType() {
    for (var e in goodsTypeData) {
        var str = "<b>" + e + ": </b>";
        for (var i = 0, len = goodsTypeData[e].length; i < len; i++) {
            str += "<button onclick=select(this,'" + e + "','" + goodsTypeData[e][i] + "')>" + goodsTypeData[e][i] + "</button>"
        }
        goodsType.innerHTML += "<div class='goodsTypeItem'>" + str + "</div>";
    }
}

//点击商品类型效果
function select(ele, e, val) {
    if (ele.className == "") {
        ele.className = "active";
        typeAdd(e, val);
    } else if (ele.className == "active") {
        ele.className = "";
        typeDel(e, val);
    }
}

//增加一个类别
function typeAdd(e, val) {
    var exist = false;
    for (var type in subData) {
        if (type == e) {
            exist = true;
            subData[type].push(val);
        }
    }
    if (exist == false) {
        subData[e] = [];
        subData[e].push(val);
    }
    renders(subData)
}

//删除一个类别
function typeDel(e, val) {
    for (var type in subData) {
        if (type == e) {
            for (var i = 0, len = subData[type].length; i < len; i++) {
                if (subData[type][i] == val) {
                    subData[type].splice(i, 1)
                }
            }
        }
    }
    renders(subData)
}

//根据最终数据, 渲染页面
function renders(data) {
    showData = [];
    /* 排序, 类型少的在前 */
    var sort = [];
    for (var key in data) {
        if (data[key].length != 0) {
            sort.push(data[key].length)
        }
    }
    sort.sort();
    var length = sort.length;
    for (var i = 0; i < length; i++) {
        for (var key in data) {
            if (data[key].length == sort[0]) {
                var obj = {};
                obj.key = key;
                obj.val = data[key];
                showData.push(obj)
                sort.shift();
            }
        }
    }

/* 排序结束 */
    var nums = 1;
    for (var key in data) {
        nums = data[key].length * nums;
    }

var th = "<tr>";
    var showArr = [];
    for (var i = 0, len = showData.length; i < len; i++) {
        th += "<th>" + showData[i].key + "</th>";
        showArr.push(showData[i].val);
    }
    th += "<th>价格</th><th>数量</th><th>SKU</th> </tr>";

/* 将商品转换为dom节点 */
    for (var i = 0, len = showData.length; i < len; i++) {
        var data = showData[i].val;
        showData[i].dom = [];
        for (var j = 0, length = data.length; j < length; j++) {
            var str = "<td >" + data[j] + "</td>";
            showData[i].dom.push(str);
        }
    }

/* 将dom元素一一合并 */
    var doms = showData[0].dom;
    for (var i = 1, len = showData.length; i < len; i++) {
        doms = matching(doms, showData[i].dom)
    }

var tbody = "";
    for (var i = 0, len = doms.length; i < len; i++) {
        var str = "<tr>" + doms[i] + "<td><input type='number' /></td><td><input type='number' /></td><td><input type='text' /></td>" + "</tr>";
        tbody += str;
    }

var goodsLists = document.querySelector(".goodsLists");
    goodsLists.innerHTML = th + tbody;

}

//将两个数组内的每个元素一一匹配 (数组元素为字符串)
function matching(arr1, arr2) {
    var arr = [];
    for (var i = 0, len = arr1.length; i < len; i++) {
        for (var j = 0, length = arr2.length; j < length; j++) {
            var str = arr1[i] + arr2[j];
            arr.push(str);
        }
    }
    return arr;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

自动批量生成商品属性及价格原生js

代码描述：可以根据点击不同的商品属性自动生成可以输入价格数量sku等信息的表格框

1. 将可选的商品类型以json对象形式传入, 即: goodsTypeData
var goodsTypeData = { "颜色":["红色","绿色","黄色","蓝色"], "尺码":["S","M","L"], "布料":["蚕丝","纯棉","羽绒"], "产地":["广州","浙江","绵阳"] };
2. 输入相关信息后, 点击提交即可在submit()函数内获得最终结果: result
3. 通过post请求提交 result 即可
4. 后续会增加商品属性外的可选项目, 目前只支持价格 | 数量 | SKU

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

金三瘦

相关代码

自动批量生成商品属性及价格原生js

最新