动态 商品属性

//数据拼装
var thisSelData = [],
    thisSelKey = ["rl", "qt", "tj", "cc", "xz", "kucun", "jiage", "gmfw", "sku"], //保存渲染的顺序从下拉框中判断【key】
    thisSelKeyName = ["容量", "其他", "体积", "尺寸", "新增", "库存", "价格", "购买范围", "SKU"]; //表头的数据

$(function() {
    //类别 属性的选择
    $("#showProSpe").on("change", "input[type='checkbox']", function() {
        // thisSelData = [];
        var thisNewselData = [];
        // 获取所有选中的
        var thisSiblinsChecked = $("#showProSpe input[type='checkbox']:checked");
        for(var i = 0; i < thisSiblinsChecked.length; i++) {
            var thisValue = thisSiblinsChecked[i].value, // 选中的值
                thisKey = thisSiblinsChecked[i]
                .getAttribute("data-key"),
                thisSpecId = thisSiblinsChecked[i]
                .getAttribute("data-id");
            // ////////////
            thisPid = thisSiblinsChecked[i]
                .getAttribute("data-pid"),
                thisPidx = thisSiblinsChecked[i]
                .getAttribute("data-pidx");
            // /////
            // console.log(thisValue + "---" + thisSpecId);
            // 已经有值
            if(thisNewselData.length > 0) {
                // 已经存在的key 复制一条修改key的值
                if(thisNewselData[0].hasOwnProperty(thisKey)) {
                    var thisL = thisNewselData.length;
                    var thisKeyVal = thisNewselData[0][thisKey]; // 相同的key值
                    var count = 0;
                    for(var l = 0; l < thisL; l++) {
                        // 复制相同的json 修改值【】
                        if(thisNewselData[l + count][thisKey] == thisKeyVal) {
                            // 放到当前位置的下一个
                            var thisJ = copyJson(thisNewselData[l +
                                count]);
                            thisJ[thisKey] = thisValue;

                            // 、、、、
                            // 删除之前存在的
                            var thisI = JSON.parse(JSON
                                    .stringify(thisJ.itemSpec)),
                                lcount = 0;
                            for(var ll = 0; ll < thisI.length; ll++) {
                                if(thisI[ll - lcount]["s_id"] == thisKey) {
                                    thisI
                                        .splice(
                                            ll - lcount,
                                            1);
                                    lcount++;
                                }
                            }
                            thisI.push({
                                "s_specId": thisSpecId, // 条目的ID
                                "s_specValue": thisValue, // 条目值
                                "s_id": thisKey, // 类别的ID
                                "s_idx": thisPidx
                                // 类别的ID
                            });
                            thisJ.itemSpec = thisI;
                            // 、、、、、、、、、、
                            thisNewselData.splice(
                                (l + count + 1), 0, thisJ);
                            count++;
                        }
                    }
                } else {
                    // 不存在的每一条都添加属性
                    for(var k = 0; k < thisNewselData.length; k++) {
                        thisNewselData[k][thisKey] = thisValue;
                        // 删除之前存在的
                        var thisI = JSON.parse(JSON.stringify(thisNewselData[k].itemSpec)),
                            lcount = 0;
                        for(var l = 0; l < thisI.length; l++) {
                            if(thisI[l - lcount]["s_id"] == thisKey) {
                                thisI.splice(l - lcount, 1);
                                lcount++;
                            }
                        }
                        thisI.push({
                            "s_specId": thisSpecId, // 条目的ID
                            "s_specValue": thisValue, // 条目值
                            "s_id": thisKey, // 类别的ID
                            "s_idx": thisPidx
                            // 类别的ID
                        });
                        thisNewselData[k].itemSpec = thisI;
                    }
                }
            } else {
                // 数组中的对应的位置放入选中的值
                var thisJson = {
                    "kucun": "0", // 库存
                    "jiage": "0", // 价格
                    "gmfw": "购买范围",
                    "sku": "sku编码",
                    "itemSpec": []
                };
                thisJson.kucun = "";
                thisJson.price = "";
                thisJson.minBuy = "";
                thisJson.maxBuy = "";
                thisJson.skuCode = "";
                thisJson[thisKey] = thisValue;
                thisJson.itemSpec.push({
                    "s_specId": thisSpecId, // 条目的ID
                    "s_specValue": thisValue, // 条目值
                    "s_id": thisKey, // 类别的ID
                    "s_idx": thisPidx
                    // 类别的ID
                });
                thisNewselData.push(thisJson);
            }
            // 、、、、、、、、、、

            /* console.log(JSON.stringify(thisNewselData)); */
        }
        var thisSelKeys = thisSelKey.slice(0, (thisSelKey.length - 4));
        thisSelKeys = thisSelKeys.map(function(i, v, arr) {
            return i.toString();
        });
        // console.log(JSON.stringify(thisSelData));

        for(var i = 0; i < thisSelData.length; i++) {
            for(var j = 0; j < thisNewselData.length; j++) {
                var thisBefore = true;
                for(var k in thisNewselData[j]) {
                    if(thisSelKeys.indexOf(k) > -1 && thisSelData[i].hasOwnProperty(k) && thisNewselData[j][k] != thisSelData[i][k]) {
                        thisBefore = false;
                    }
                }
                if(thisBefore) {
                    thisNewselData[j]["kucun"] = thisSelData[i]["kucun"];
                    thisNewselData[j]["price"] = thisSelData[i]["price"];
                    thisNewselData[j]["jiage"] = thisSelData[i]["jiage"];
                    thisNewselData[j]["minBuy"] = thisSelData[i]["minBuy"];
                    thisNewselData[j]["maxBuy"] = thisSelData[i]["maxBuy"];
                    thisNewselData[j]["skuCode"] = thisSelData[i]["skuCode"];
                }
            }
        }
        thisSelData = thisNewselData;

        // 渲染表格
        renderDomType();
        formToHeavy(); // 表格列去重
    });
    //表格中的库存、价格、g购买范围、sku的事件
    $("#collTbl tbody").on("keyup", "input[type='text']", function() {
        //获取索引
        var thisMsg = $(this).attr("class").split("_"); //包括 索引 属性
        var thisType = thisMsg[0],
            thisArrIndex = thisMsg[1],
            thisValue = $.trim($(this).val());
        switch(thisType) {
            case "kucun":
                thisSelData[thisArrIndex].kucun = thisValue;
                break;
            case "jiage":
                thisSelData[thisArrIndex].price = thisValue;
                break;
            case "gmfw1":
                thisSelData[thisArrIndex].minBuy = thisValue;
                break;
            case "gmfw2":
                thisSelData[thisArrIndex].maxBuy = thisValue;
                break;
            case "sku":
                thisSelData[thisArrIndex].skuCode = thisValue;
                break;
        }
    });
});
//表格去重列
function formToHeavy() {
    var thisTd = $("#collTbl tr:eq(0)").find("td").length - 5;
    //表格去重复列
    for(var i = thisTd; i >= 0; i--) {
        (function(i) {
            setTimeout(function() {
                mergeCells(i);
            })
        })(i);
    }
}

//渲染表格
function renderDomType() {
    var thisHtml = "",
        thisThead = "<tr>";
    for(var i = 0; i < thisSelData.length; i++) {
        thisHtml += "<tr>";
        for(var j = 0; j < thisSelKey.length; j++) {
            if(thisSelData[i].hasOwnProperty(thisSelKey[j])) {
                //tbody
                if(j < (thisSelKey.length - 4)) {
                    thisHtml += "<td>" + thisSelData[i][thisSelKey[j]] + "</td> ";
                }
                //表头
                if(i == 0) thisThead += "<td>" + thisSelKeyName[j] + "</td> ";
            }
        }
        thisHtml += "<td><input type='text' class='kucun_" + i + "'/></td> <td><input type='text' class='jiage_" + i + "'/></td> <td><input type='text' class='gmfw1_" + i + "'/>-<input type='text' class='gmfw2_" + i + "'/></td><td><input type='text' class='sku_" + i + "'/></td> </tr>";
        thisThead += "</tr>";
    }
    $("#collTbl tbody").html(thisHtml);
    $("#collTbl thead").html(thisThead);
}

function mergeCells(col) {
    var count = 0;
    var tbodyTlth = $("#collTbl").find("tr").length;
    for(var i = 0; i < tbodyTlth; i++) {
        for(var j = (i + 1); j <= tbodyTlth; j++) {
            if($("#collTbl tbody tr:eq(" + i + ") td:eq(" + col + ")").text() != $("#collTbl tbody tr:eq(" + j + ") td:eq(" + col + ")").text() || $("#collTbl tbody tr:eq(" + j + ") td:eq(" + col + ")").text() == "") { // 说明当前的安检中心结束
                $("#collTbl tbody tr:eq(" + i + ")").find("td:eq(" + col + ")").attr("rowspan", (j - i)).css({
                    "text-align": "center",
                    "vertical-align": "middle"
                });
                if(j - i > 1) {
                    for(var k = (i + 1); k < j; k++) {
                        $("#collTbl tbody tr:eq(" + k + ")").find("td:eq(" + col + ")").remove();
                        count++;
                    }
                    i = (j - 1);
                }
                break;
            } else {
                continue;
            }
        }
    }
}

//copyJSON
function copyJson(src) {
    var newJson = {};
    for(var prop in src) {
        if(src.hasOwnProperty(prop)) {
            newJson[prop] = src[prop];
        }
    }
    return newJson;
}
//获取最后的数据
function getData() {
    //获取Item
    var item = [],
        sortIndex = 0; //排序序号
    //根据已经保存的key获取值
    for(var i = 0; i < (thisSelKey.length - 4); i++) {
        var thisSiblinsChecked = $("input[type='checkbox'][data-key='" + thisSelKey[i] + "']:checked");
        if(thisSiblinsChecked.length == 0) continue;
        var thisJson = {
            "brandId": "1",
            "createTime": getNowFormatDate(),
            "id": "2",
            "itemValue": []
        };
        for(var j = 0; j < thisSiblinsChecked.length; j++) {
            var thisValue = thisSiblinsChecked[j].value, //选中的值
                thisKey = thisSiblinsChecked[j].getAttribute("data-key");
            sortIndex++;
            thisJson.itemValue.push({
                "brandId": "1",
                "createTime": getNowFormatDate(),
                "id": "2",
                "itemId": "3",
                "modifiedTime": getNowFormatDate(),
                "sortIndex": sortIndex
            });
        }
        item.push(thisJson);

    }
    //这是item
    console.log(JSON.stringify(item));
    console.log("===============");
    //修改storeIem
    for(var i = 0; i < thisSelData.length; i++) {
        //添加修改时间
        thisSelData[i].modifienTime = getNowFormatDate();
        //添加 商品信息
        var thisPName = [];
        for(var j = 0; j < (thisSelKey.length - 4); j++) {
            if(thisSelData[i].hasOwnProperty(thisSelKey[j]))
                thisPName.push(thisSelKeyName[j] + ":" + thisSelData[i][thisSelKey[j]]);
        }
        thisSelData[i].propertiesName = thisPName.join(";");
    }
    console.log(JSON.stringify(thisSelData));

}
//获取当前的时间
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    var seconds = date.getSeconds();
    var minutes = date.getMinutes();
    if(month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if(strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    if(seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
    }
    if(minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
        " " + date.getHours() + seperator2 + minutes +
        seperator2 + seconds;
    return currentdate;

}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title></title>
    </head>

    <body>
        <div id="showProSpe">
            <div>
                <label for="" data-key="rl">容量</label>
                <input type="checkbox" value="15" data-key="rl" />15ML
                <input type="checkbox" value="30" data-key="rl" />30Ml
                <input type="checkbox" value="20" data-key="rl" />20ML
            </div>
            <div>
                <label for="" data-key="qt">其他</label>
                <input type="checkbox" value="发不发达" data-key="qt" />发不发达
                <input type="checkbox" value="代表" data-key="qt" />代表
                <input type="checkbox" value="可以" data-key="qt" />可以
                <input type="checkbox" value="aa" data-key="qt" />aa
            </div>
            <div>
                <label for="" data-key="tj">体积</label>
                <input type="checkbox" value="15" data-key="tj" />15ML
                <input type="checkbox" value="30" data-key="tj" />30Ml
                <input type="checkbox" value="20" data-key="tj" />20ML
            </div>
            <div>
                <label for="" data-key="cc">尺寸</label>
                <input type="checkbox" value="22" data-key="cc" />22
                <input type="checkbox" value="23" data-key="cc" />23
                <input type="checkbox" value="24" data-key="cc" />24
                <input type="checkbox" value="25" data-key="cc" />25
            </div>
            <div>
                <label for="" data-key="xz">新增</label>
                <input type="checkbox" value="22" data-key="xz" />22
                <input type="checkbox" value="23" data-key="xz" />23
                <input type="checkbox" value="24" data-key="xz" />24
                <input type="checkbox" value="25" data-key="xz" />25
            </div>
        </div>
        <input type="button" value="获取数据" onclick="getData()" />

        <div class="mainContent" id="mainContent">
            <table id="collTbl">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>

    </body>

</html>

//数据拼装var thisSelData = [],thisSelKey = ["rl", "qt", "tj", "cc", "xz", "kucun", "jiage", "gmfw", "sku"], //保存渲染的顺序从下拉框中判断【key】thisSelKeyName = ["容量", "其他", "体积", "尺寸", "新增", "库存", "价格", "购买范围", "SKU"]; //表头的数据
$(function() {//类别 属性的选择$("#showProSpe").on("change", "input[type='checkbox']", function() {// thisSelData = [];var thisNewselData = [];// 获取所有选中的var thisSiblinsChecked = $("#showProSpe input[type='checkbox']:checked");for(var i = 0; i < thisSiblinsChecked.length; i++) {var thisValue = thisSiblinsChecked[i].value, // 选中的值thisKey = thisSiblinsChecked[i].getAttribute("data-key"),thisSpecId = thisSiblinsChecked[i].getAttribute("data-id");// ////////////thisPid = thisSiblinsChecked[i].getAttribute("data-pid"),thisPidx = thisSiblinsChecked[i].getAttribute("data-pidx");// /////// console.log(thisValue + "---" + thisSpecId);// 已经有值if(thisNewselData.length > 0) {// 已经存在的key 复制一条修改key的值if(thisNewselData[0].hasOwnProperty(thisKey)) {var thisL = thisNewselData.length;var thisKeyVal = thisNewselData[0][thisKey]; // 相同的key值var count = 0;for(var l = 0; l < thisL; l++) {// 复制相同的json 修改值【】if(thisNewselData[l + count][thisKey] == thisKeyVal) {// 放到当前位置的下一个var thisJ = copyJson(thisNewselData[l +count]);thisJ[thisKey] = thisValue;
// 、、、、// 删除之前存在的var thisI = JSON.parse(JSON.stringify(thisJ.itemSpec)),lcount = 0;for(var ll = 0; ll < thisI.length; ll++) {if(thisI[ll - lcount]["s_id"] == thisKey) {thisI.splice(ll - lcount,1);lcount++;}}thisI.push({"s_specId": thisSpecId, // 条目的ID"s_specValue": thisValue, // 条目值"s_id": thisKey, // 类别的ID"s_idx": thisPidx// 类别的ID});thisJ.itemSpec = thisI;// 、、、、、、、、、、thisNewselData.splice((l + count + 1), 0, thisJ);count++;}}} else {// 不存在的每一条都添加属性for(var k = 0; k < thisNewselData.length; k++) {thisNewselData[k][thisKey] = thisValue;// 删除之前存在的var thisI = JSON.parse(JSON.stringify(thisNewselData[k].itemSpec)),lcount = 0;for(var l = 0; l < thisI.length; l++) {if(thisI[l - lcount]["s_id"] == thisKey) {thisI.splice(l - lcount, 1);lcount++;}}thisI.push({"s_specId": thisSpecId, // 条目的ID"s_specValue": thisValue, // 条目值"s_id": thisKey, // 类别的ID"s_idx": thisPidx// 类别的ID});thisNewselData[k].itemSpec = thisI;}}} else {// 数组中的对应的位置放入选中的值var thisJson = {"kucun": "0", // 库存"jiage": "0", // 价格"gmfw": "购买范围","sku": "sku编码","itemSpec": []};thisJson.kucun = "";thisJson.price = "";thisJson.minBuy = "";thisJson.maxBuy = "";thisJson.skuCode = "";thisJson[thisKey] = thisValue;thisJson.itemSpec.push({"s_specId": thisSpecId, // 条目的ID"s_specValue": thisValue, // 条目值"s_id": thisKey, // 类别的ID"s_idx": thisPidx// 类别的ID});thisNewselData.push(thisJson);}// 、、、、、、、、、、
/* console.log(JSON.stringify(thisNewselData)); */}var thisSelKeys = thisSelKey.slice(0, (thisSelKey.length - 4));thisSelKeys = thisSelKeys.map(function(i, v, arr) {return i.toString();});// console.log(JSON.stringify(thisSelData));
for(var i = 0; i < thisSelData.length; i++) {for(var j = 0; j < thisNewselData.length; j++) {var thisBefore = true;for(var k in thisNewselData[j]) {if(thisSelKeys.indexOf(k) > -1 && thisSelData[i].hasOwnProperty(k) && thisNewselData[j][k] != thisSelData[i][k]) {thisBefore = false;}}if(thisBefore) {thisNewselData[j]["kucun"] = thisSelData[i]["kucun"];thisNewselData[j]["price"] = thisSelData[i]["price"];thisNewselData[j]["jiage"] = thisSelData[i]["jiage"];thisNewselData[j]["minBuy"] = thisSelData[i]["minBuy"];thisNewselData[j]["maxBuy"] = thisSelData[i]["maxBuy"];thisNewselData[j]["skuCode"] = thisSelData[i]["skuCode"];}}}thisSelData = thisNewselData;
// 渲染表格renderDomType();formToHeavy(); // 表格列去重});//表格中的库存、价格、g购买范围、sku的事件$("#collTbl tbody").on("keyup", "input[type='text']", function() {//获取索引var thisMsg = $(this).attr("class").split("_"); //包括 索引 属性var thisType = thisMsg[0],thisArrIndex = thisMsg[1],thisValue = $.trim($(this).val());switch(thisType) {case "kucun":thisSelData[thisArrIndex].kucun = thisValue;break;case "jiage":thisSelData[thisArrIndex].price = thisValue;break;case "gmfw1":thisSelData[thisArrIndex].minBuy = thisValue;break;case "gmfw2":thisSelData[thisArrIndex].maxBuy = thisValue;break;case "sku":thisSelData[thisArrIndex].skuCode = thisValue;break;}});});//表格去重列function formToHeavy() {var thisTd = $("#collTbl tr:eq(0)").find("td").length - 5;//表格去重复列for(var i = thisTd; i >= 0; i--) {(function(i) {setTimeout(function() {mergeCells(i);})})(i);}}
//渲染表格function renderDomType() {var thisHtml = "",thisThead = "<tr>";for(var i = 0; i < thisSelData.length; i++) {thisHtml += "<tr>";for(var j = 0; j < thisSelKey.length; j++) {if(thisSelData[i].hasOwnProperty(thisSelKey[j])) {//tbodyif(j < (thisSelKey.length - 4)) {thisHtml += "<td>" + thisSelData[i][thisSelKey[j]] + "</td> ";}//表头if(i == 0) thisThead += "<td>" + thisSelKeyName[j] + "</td> ";}}thisHtml += "<td><input type='text' class='kucun_" + i + "'/></td> <td><input type='text' class='jiage_" + i + "'/></td> <td><input type='text' class='gmfw1_" + i + "'/>-<input type='text' class='gmfw2_" + i + "'/></td><td><input type='text' class='sku_" + i + "'/></td> </tr>";thisThead += "</tr>";}$("#collTbl tbody").html(thisHtml);$("#collTbl thead").html(thisThead);}
function mergeCells(col) {var count = 0;var tbodyTlth = $("#collTbl").find("tr").length;for(var i = 0; i < tbodyTlth; i++) {for(var j = (i + 1); j <= tbodyTlth; j++) {if($("#collTbl tbody tr:eq(" + i + ") td:eq(" + col + ")").text() != $("#collTbl tbody tr:eq(" + j + ") td:eq(" + col + ")").text() || $("#collTbl tbody tr:eq(" + j + ") td:eq(" + col + ")").text() == "") { // 说明当前的安检中心结束$("#collTbl tbody tr:eq(" + i + ")").find("td:eq(" + col + ")").attr("rowspan", (j - i)).css({"text-align": "center","vertical-align": "middle"});if(j - i > 1) {for(var k = (i + 1); k < j; k++) {$("#collTbl tbody tr:eq(" + k + ")").find("td:eq(" + col + ")").remove();count++;}i = (j - 1);}break;} else {continue;}}}}
//copyJSONfunction copyJson(src) {var newJson = {};for(var prop in src) {if(src.hasOwnProperty(prop)) {newJson[prop] = src[prop];}}return newJson;}//获取最后的数据function getData() {//获取Itemvar item = [],sortIndex = 0; //排序序号//根据已经保存的key获取值for(var i = 0; i < (thisSelKey.length - 4); i++) {var thisSiblinsChecked = $("input[type='checkbox'][data-key='" + thisSelKey[i] + "']:checked");if(thisSiblinsChecked.length == 0) continue;var thisJson = {"brandId": "1","createTime": getNowFormatDate(),"id": "2","itemValue": []};for(var j = 0; j < thisSiblinsChecked.length; j++) {var thisValue = thisSiblinsChecked[j].value, //选中的值thisKey = thisSiblinsChecked[j].getAttribute("data-key");sortIndex++;thisJson.itemValue.push({"brandId": "1","createTime": getNowFormatDate(),"id": "2","itemId": "3","modifiedTime": getNowFormatDate(),"sortIndex": sortIndex});}item.push(thisJson);
}//这是itemconsole.log(JSON.stringify(item));console.log("===============");//修改storeIemfor(var i = 0; i < thisSelData.length; i++) {//添加修改时间thisSelData[i].modifienTime = getNowFormatDate();//添加 商品信息var thisPName = [];for(var j = 0; j < (thisSelKey.length - 4); j++) {if(thisSelData[i].hasOwnProperty(thisSelKey[j]))thisPName.push(thisSelKeyName[j] + ":" + thisSelData[i][thisSelKey[j]]);}thisSelData[i].propertiesName = thisPName.join(";");}console.log(JSON.stringify(thisSelData));
}//获取当前的时间function getNowFormatDate() {var date = new Date();var seperator1 = "-";var seperator2 = ":";var month = date.getMonth() + 1;var strDate = date.getDate();var seconds = date.getSeconds();var minutes = date.getMinutes();if(month >= 1 && month <= 9) {month = "0" + month;}if(strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}if(seconds >= 0 && seconds <= 9) {seconds = "0" + seconds;}if(minutes >= 0 && minutes <= 9) {minutes = "0" + minutes;}var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +" " + date.getHours() + seperator2 + minutes +seperator2 + seconds;return currentdate;
}