入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

谈谈电子商务系统中的规格设计,SKU的简单管理

创建时间:2016-03-06 投稿人: 浏览次数:1626

人生有多种活法,我不知道那种才适合我,于是我就是这么左顾右盼地活着


PS:

电子商务系统,一般都会涉及到规格设计,或者叫做SKU管理。我参考过多家电子商务平台,个人感觉 京东的做得不错,但是我并没有办法知道他们内部是怎么实现的(如果你知道就告诉我一下,发方案有酬谢)。 这种技术一直困扰着我 ,我尝试过很多方案,但是没有一种是完美的,能用,但是总感觉又不太完美。要么是后台使用太复杂,要么是前端用户体验不好!经过几年的折腾,今天我又再次遇到了这样的问题,于是准备将这一块好好设计一下。

目标是:后台使用简单,设置灵活。前端易用。

下面说说我的思路:


第一:规格由定价属性组合而成。

第二:组合后的规格,可以随意调整和删除。

第三:规格使用JSON对象加密存储

第四:前端根据JSON对象进行回显和操作。


先来看看前端试验效果:





现在说一下什么是定价属性

定价属性是指:和价格相关的属性。如:颜色,容量,版本等。

把与价格有关系的属性写到规格里面,把与价格无关的属性建议写在介绍里面,不妨把这个当成一种约定。

例如:内存容量是和价格相关的,生产日期一般是和价格无关的,因此容量就是定价属性。


如何在后台添加规格:


请输入与价格有关的属性,多个属性值之间用英文逗号分开,最多输入4个属性,为了增加用户体验,建议尽量最多不要超过3个,并仔细检查输入,确认后请点击生成规格按钮,系统会自动生成规格组合! 

这里是我的业务上的一种规定,大家根据需要进行设置。



没有的属性组合可以删除,点击ALL按钮可以向下复制。

点击确认以后,可以进行生成JSON加密串,可以将加密串存储到字段,也可以使用数据库来存储,本质是一样的。

加密串如下:

eyJCaXRTdHIiOlt7Im9uZWJpdCI6IuminOiJsnznmb3oibIs6YeR6ImyLOe6ouiJsizpk7boibIifSx7Im9uZWJpdCI6IuWuuemHj3wyNTBnLDUwMGcifV0sIkd1aUdlU3RyIjpbeyJLZXlJZCI6IjAiLCJLZXkiOiLnmb3oibItMjUwZyIsIklucHJpY2UiOiIxMzAiLCJQcmljZSI6IjE1MCIsIlNwcmljZSI6IjIwMCIsIkt1Y3VuIjoiMTAwIiwiZGVmYXVsdCI6ImZhbHNlIn0seyJLZXlJZCI6IjEiLCJLZXkiOiLnmb3oibItNTAwZyIsIklucHJpY2UiOiIxMzAiLCJQcmljZSI6IjI1MCIsIlNwcmljZSI6IjIwMCIsIkt1Y3VuIjoiMTAwIiwiZGVmYXVsdCI6ImZhbHNlIn0seyJLZXlJZCI6IjIiLCJLZXkiOiLph5HoibItMjUwZyIsIklucHJpY2UiOiIxMzAiLCJQcmljZSI6IjM1MCIsIlNwcmljZSI6IjIwMCIsIkt1Y3VuIjoiMTAwIiwiZGVmYXVsdCI6InRydWUifSx7IktleUlkIjoiMyIsIktleSI6IumHkeiJsi01MDBnIiwiSW5wcmljZSI6IjEzMCIsIlByaWNlIjoiNDUwIiwiU3ByaWNlIjoiMjAwIiwiS3VjdW4iOiIxMDAiLCJkZWZhdWx0IjoiZmFsc2UifSx7IktleUlkIjoiNSIsIktleSI6Iue6ouiJsi01MDBnIiwiSW5wcmljZSI6IjEzMCIsIlByaWNlIjoiNjUwIiwiU3ByaWNlIjoiMjAwIiwiS3VjdW4iOiIxMDAiLCJkZWZhdWx0IjoiZmFsc2UifSx7IktleUlkIjoiNiIsIktleSI6IumTtuiJsi0yNTBnIiwiSW5wcmljZSI6IjEzMCIsIlByaWNlIjoiNzUwIiwiU3ByaWNlIjoiMjAwIiwiS3VjdW4iOiIxMDAiLCJkZWZhdWx0IjoiZmFsc2UifSx7IktleUlkIjoiNyIsIktleSI6IumTtuiJsi01MDBnIiwiSW5wcmljZSI6IjEzMCIsIlByaWNlIjoiODUwIiwiU3ByaWNlIjoiMjAwIiwiS3VjdW4iOiIxMDAiLCJkZWZhdWx0IjoiZmFsc2UifV19



解密如下:

{"BitStr":[{"onebit":"颜色|白色,金色,红色,银色"},{"onebit":"容量|250g,500g"}],"GuiGeStr":[{"KeyId":"0","Key":"白色-250g","Inprice":"130","Price":"150","Sprice":"200","Kucun":"100","default":"false"},{"KeyId":"1","Key":"白色-500g","Inprice":"130","Price":"250","Sprice":"200","Kucun":"100","default":"false"},{"KeyId":"2","Key":"金色-250g","Inprice":"130","Price":"350","Sprice":"200","Kucun":"100","default":"true"},{"KeyId":"3","Key":"金色-500g","Inprice":"130","Price":"450","Sprice":"200","Kucun":"100","default":"false"},{"KeyId":"5","Key":"红色-500g","Inprice":"130","Price":"650","Sprice":"200","Kucun":"100","default":"false"},{"KeyId":"6","Key":"银色-250g","Inprice":"130","Price":"750","Sprice":"200","Kucun":"100","default":"false"},{"KeyId":"7","Key":"银色-500g","Inprice":"130","Price":"850","Sprice":"200","Kucun":"100","default":"false"}]}


由于我的前端和后端全部是使用JS写成的,因此从性能上来讲,几乎没有太讲究,富客户端的想法。

后台主要JS代码如下:

 <script>

        //功能:规格后端选择控制
        //作者:JXY-贾孝营 QQ:281773404
        //日期:2016-03-05
        //版权:西安易数网络科技有限公司
        //全局变量

        var GGAllJsonStr = { "BitStr": "", "GuiGeStr": "" };
        var BitNameArr = new Array();
        var BitValueArr = new Array();
        init();
        //设置默认
        function SetdefaultJSON() {
            var selectedids = art.dialog.data("defalutids");
            $("#JsonBase64Hidden").val(selectedids);
        }
        //生成规格字符串
        function CreateGuiGe() {
            if ($("#name1").val() == "" && $("#name2").val() == "" && $("#name3").val() == "" && $("#name4").val() == "") {
                alert("至少要输入一个属性");
                return false;
            }
            BitNameArr.splice(0, BitNameArr.length);
            BitValueArr.splice(0, BitValueArr.length);
            //获得属性
            var Zcount = 0;
            var jsonTempstr = "";
            for (var i = 1; i <= 4; i++) {
                var nameStr = Trim($("#name" + i).val(), "g");
                var valueStr = Trim($("#value" + i).val(), "g");
                nameStr = nameStr.replace(new RegExp(",", "g"), ",");
                nameStr = nameStr.replace(new RegExp("|", "g"), "");
                nameStr = nameStr.replace(new RegExp("-", "g"), "——");
                valueStr = valueStr.replace(new RegExp(",", "g"), ",");
                valueStr = valueStr.replace(new RegExp("|", "g"), "");
                valueStr = valueStr.replace(new RegExp("-", "g"), "——");
                if (nameStr != "" && valueStr != "") {
                    BitNameArr[Zcount] = nameStr;
                    BitValueArr[Zcount] = valueStr.split(",");
                    BitValueArr[Zcount] = unique(BitValueArr[Zcount]);
                    //存入JSON BitStr
                    jsonTempstr += "{"onebit":"" + nameStr + "|" + valueStr + ""},";
                    Zcount++;
                }
            }
            //存入到整体JSON
            jsonTempstr = jsonTempstr.substring(0, jsonTempstr.length - 1);
            GGAllJsonStr.BitStr = jQuery.parseJSON("[" + jsonTempstr + "]");
            //根据属性数组生成规格价格表单
            var ArrCount = BitValueArr.length;
            var ReturnStr = "";
            if (BitValueArr[0]) {
                for (var j = 0; j < BitValueArr[0].length; j++) {
                    if (BitValueArr[1]) {
                        for (var k = 0; k < BitValueArr[1].length; k++) {
                            if (BitValueArr[2]) {
                                for (var m = 0; m < BitValueArr[2].length; m++) {
                                    if (BitValueArr[3]) {
                                        for (var l = 0; l < BitValueArr[3].length; l++) {
                                            ReturnStr += BitValueArr[0][j] + "-" + BitValueArr[1][k] + "-" + BitValueArr[2][m] + "-" + BitValueArr[3][l] + "|";
                                        }
                                    } else {
                                        ReturnStr += BitValueArr[0][j] + "-" + BitValueArr[1][k] + "-" + BitValueArr[2][m] + "|";
                                    }
                                }
                            } else {
                                ReturnStr += BitValueArr[0][j] + "-" + BitValueArr[1][k] + "|";
                            }
                        }
                    }
                    else {
                        ReturnStr += BitValueArr[0][j] + "|";
                    }
                }
            }
            CreateGuiGeForm(ReturnStr);
        }
        //生成规格表单
        function CreateGuiGeForm(RsStr) {
            $("#guigeformtable tr.datatr").remove();
            var Arr = RsStr.split("|");
            var mobanstr = "<tr class="datatr"><td>{i}</td><td>{key}</td><td><input type="text" class="form-control required number" id="inprice{i}" /></td><td><input type="text" class="form-control required number" id="price{i}" /></td><td><input type="text" class="form-control required number" id="shichangprice{i}" /></td><td><input type="text" class="form-control required number" id="kucun{i}" /></td><td><input type="radio" name="moren" id="moren{i}"/></td><td><a href="javascript:void(0)" class="btn btn-danger dela">删除</a></td></tr>";
            for (var i = 0; i < Arr.length; i++) {
                if (Arr[i] != "") {
                    var tempstr = mobanstr.replace("{key}", Arr[i]);
                    tempstr = tempstr.replace(new RegExp("{i}", "g"), i);
                    $("#guigeformtable").append($(tempstr));
                }
            }
            $("a.dela").on("click", function () {
                $(this).parent().parent().remove();
            })
            //隐藏属性表格
            $("#bitdiv").hide();
            $("#guigeformdiv").show();
            //校验
            $("#inprice0").focus();
        }
        //去掉所有空格包括中间空格,需要设置第2个参数为:g2
        function Trim(str, is_global) {
            var result;
            result = str.replace(/(^s+)|(s+$)/g, "");
            if (is_global.toLowerCase() == "g") {
                result = result.replace(/s/g, "");
            }
            return result;
        }
        //保存生效
        function SaveSengXiao() {
            if (IsEmptyExist()) {
                alert("数据输入不完整,存在未填项!请完善!");
                return;
            }
            var Rstr = "";
            $("#form1").validate();
            $("#guigeformtable tr.datatr").each(function () {
                var TempStr = "{";
                $(this).children("td").each(function (i) {
                    var tempvalue = 0;
                    if (i > 1 && i < 6) {
                        if (Trim($(this).children(0).val(), "g") != "") {
                            tempvalue = parseFloat(Trim($(this).children(0).val(), "g"));
                        }
                    }
                    if (i == 0) {
                        TempStr += ""KeyId":"" + $(this).text() + "",";
                    }
                    else if (i == 1) {
                        TempStr += ""Key":"" + $(this).text() + "",";
                    }
                    else if (i == 2) {
                        tempvalue += "";
                        TempStr += ""Inprice":"" + tempvalue + "",";
                    }
                    else if (i == 3) {

                        TempStr += ""Price":"" + tempvalue + "",";
                    }
                    else if (i == 4) {

                        TempStr += ""Sprice":"" + tempvalue + "",";
                    }
                    else if (i == 5) {

                        TempStr += ""Kucun":"" + tempvalue + "",";
                    }
                    else if (i == 6) {
                        if ($(this).children(0).is(":checked")) {
                            TempStr += ""default":"true"";
                        } else {
                            TempStr += ""default":"false"";
                        }
                    }

                });
                if ($(this).index() == $("#guigeformtable tr.datatr").last().index()) {
                    TempStr += "}";
                } else {
                    TempStr += "},";
                }
                Rstr += TempStr;
            });
            //json字符串转json对象:jQuery.parseJSON(jsonStr);
            //json对象转json字符串:JSON.stringify(jsonObj);
            //json键值区分大小写
            GGAllJsonStr.GuiGeStr = jQuery.parseJSON("[" + Rstr + "]");
            var b = new Base64();
            var ReturnStr = b.encode(JSON.stringify(GGAllJsonStr));
            //传递参数
            //获得
            var HDCtrlId = art.dialog.data("HDCtrl");
            var origin = artDialog.open.origin;
            var inputhd = origin.document.getElementById(HDCtrlId);
            inputhd.value = ReturnStr;
            art.dialog.close();

        }
        //清除重组
        function ChongZu() {
            var issure = confirm("真的要清空重新生成吗?");
            if (issure) {
                initGGBits();
                GGAllJsonStr.GuiGeStr = "";
                $("#guigeformtable tr.datatr").remove();
                $("#bitdiv").show();
                $("#guigeformdiv").hide();
            }
        }
        //首次装载
        function init() {
            SetdefaultJSON();
            var JsonBase64Str = $("#JsonBase64Hidden").val();
            var b = new Base64();
            var Jsonstr = b.decode(JsonBase64Str);
            GGAllJsonStr = jQuery.parseJSON(Jsonstr);
            initGGForm();//装载规格
            initGGBits();//装载属性
            //界面显示
            if (GGAllJsonStr.GuiGeStr != "" || GGAllJsonStr.GuiGeStr.length > 0) {
                $("#bitdiv").hide();
                $("#guigeformdiv").show();
            }
            else {
                $("#bitdiv").show();
                $("#guigeformdiv").hide();
            }
        }
        //装载规格表单
        function initGGForm() {
            if (GGAllJsonStr.GuiGeStr != "" || GGAllJsonStr.GuiGeStr.length > 0) {
                $("#guigeformtable tr.datatr").remove();
                var GGArr = GGAllJsonStr.GuiGeStr;
                var mobanstr = "<tr class="datatr"><td>{i}</td><td>{key}</td><td><input type="text" class="form-control required number" id="inprice{i}" value="{inprice}"/></td><td><input type="text" class="form-control required number" id="price{i}" value="{price}"/></td><td><input type="text" class="form-control required number" id="shichangprice{i}" value="{sprice}"/></td><td><input type="text" class="form-control required number" id="kucun{i}" value="{kucun}"/></td><td><input type="radio" name="moren" id="moren{i}" {moren}/></td><td><a href="javascript:void(0)" class="btn btn-danger dela">删除</a></td></tr>";
                for (var i = 0; i < GGArr.length; i++) {
                    if (GGArr[i] != "") {
                        var tempstr = mobanstr.replace("{key}", GGArr[i].Key);
                        tempstr = tempstr.replace(new RegExp("{i}", "g"), i);
                        tempstr = tempstr.replace("{inprice}", GGArr[i].Inprice);
                        tempstr = tempstr.replace("{price}", GGArr[i].Price);
                        tempstr = tempstr.replace("{sprice}", GGArr[i].Sprice);
                        tempstr = tempstr.replace("{kucun}", GGArr[i].Kucun);
                        if (GGArr[i].default == "true") {
                            tempstr = tempstr.replace("{moren}", "checked="checked"");
                        } else {
                            tempstr = tempstr.replace("{moren}", "");
                        }
                        $("#guigeformtable").append($(tempstr));
                    }
                }
                $("a.dela").on("click", function () {
                    $(this).parent().parent().remove();
                })
            }
        }
        //装载规格属性
        function initGGBits() {
            for (var i = 0; i < 4; i++) {
                $("#name" + (i + 1)).val("");
                $("#value" + (i + 1)).val("");
            }
            var BitArr = GGAllJsonStr.BitStr;
            if (BitArr != "" && BitArr.length > 0) {
                for (var i = 0; i < BitArr.length; i++) {
                    var tempstr = BitArr[i].onebit;
                    var Arr = tempstr.split("|");
                    $("#name" + (i + 1)).val(Arr[0]);
                    $("#value" + (i + 1)).val(Arr[1]);
                }
            }
        }
        //数组去重复
        function unique(arr) {
            var result = [], hash = {};
            for (var i = 0, elem; (elem = arr[i]) != null; i++) {
                if (!hash[elem]) {
                    result.push(elem);
                    hash[elem] = true;
                }
            }
            return result;
        }
        //检查是不是有空值
        function IsEmptyExist() {
            var Rl = false;
            $("#guigeformtable tr.datatr").each(function () {
                var TempStr = "{";
                $(this).children("td").each(function (i) {
                    if (i > 1 && i < 6) {
                        var tempvalue = Trim($(this).children(0).val(), "g");
                        if (tempvalue == "") {
                            Rl = true;
                        }
                    }
                });
            });
            return Rl;
        }
        //CopayTo
        function CopyTo(index) {
            $("#guigeformtable tr.datatr").each(function () {
                $(this).children("td").each(function (i) {
                    if (i > 1 && i < 6) {
                        if (index == i && i == 2 && $("#inprice0").val() != "") {
                            $(this).children(0).val($("#inprice0").val());
                        }
                        else if (index == i && i == 3 && $("#price0").val() != "") {
                            $(this).children(0).val($("#price0").val());
                        }
                        else if (index == i && i == 4 && $("#shichangprice0").val() != "") {
                            $(this).children(0).val($("#shichangprice0").val());
                        }
                        else if (index == i && i == 5 && $("#kucun0").val() != "") {
                            $(this).children(0).val($("#kucun0").val());
                        }
                    }
                });
            });
        }

    </script>


</pre><p><pre name="code" class="javascript"><span style="color: rgb(138, 109, 59); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; background-color: rgb(252, 248, 227);">前端主要JS代码如下:</span>

<script>
        //功能:规格前端选择控制
        //作者:JXY-贾孝营 QQ:281773404
        //日期:2016-03-05
        //版权:西安易数网络科技有限公司
        //全局变量
        var GGAllJsonStr = { "BitStr": "", "GuiGeStr": "" };
        var JsonCtrlId = "JsonBase64Hidden";
        var CtrDivId = "bituldiv";
        var USelectedKey = "ukey";
        var USelectedPrice = "uprice";
        var ChangeArr = new Array();


        init();



        //首次装载
        function init() {
            var JsonBase64Str = $("#" + JsonCtrlId).val();
            var b = new Base64();
            var Jsonstr = b.decode(JsonBase64Str);
            GGAllJsonStr = jQuery.parseJSON(Jsonstr);
            initGGBitsLi();
        }
        //装载规格属性
        function initGGBitsLi() {
            var limoban = "<li id="{i}{j}" data-lever="{i}" class="bitli" data-title="{title}">{title}</li>";
            var AllReturn = "";
            var BitArr = GGAllJsonStr.BitStr;
            if (BitArr != "" && BitArr.length > 0) {
                for (var i = 0; i < BitArr.length; i++) {

                    var tempstr = BitArr[i].onebit;
                    var Arr = tempstr.split("|");
                    var ulstr = "<ul class="ggul">";
                    ulstr += "<li class="lititle">" + Arr[0] + ": </li>";
                    var BitsValueArr = Arr[1].split(",");
                    for (var j = 0; j < BitsValueArr.length; j++) {
                        var oneli = limoban.replace(new RegExp("{i}", "g"), i);
                        oneli = oneli.replace(new RegExp("{j}", "g"), j);
                        oneli = oneli.replace(new RegExp("{title}", "g"), BitsValueArr[j]);
                        ulstr += oneli + "
";
                    }
                    ulstr += "</ul>";

                    AllReturn += ulstr;
                }
            }
            $("#" + CtrDivId).html(AllReturn);
            SelectDefault();
        }
        //选中默认
        function SelectDefault() {
            var TempArr = GGAllJsonStr.GuiGeStr;
            var DefaultZu = TempArr[0] ? TempArr[0].Key : "";
            for (var j = 0; j < TempArr.length; j++) {
                if (TempArr[j].default == "true") {
                    DefaultZu = TempArr[j].Key;
                    break;
                }
            }
            if (DefaultZu != "") {
                SelectedOneZu(DefaultZu);
            }
            //根据选中情况重画界面
            GetBitsJiaoJi();
        }
        //选中一个组
        function SelectedOneZu(BitCuKey) {
            var Arr = BitCuKey.split("-");
            for (var j = 0; j < Arr.length; j++) {
                $(".bitli").each(function (i, item) {
                    if ($(this).attr("data-lever") == j && $(this).attr("data-title") == Arr[j]) {
                        $(this).removeClass("bitli");
                        $(this).addClass("bitliactive");
                    }
                })
            }
        }
        //用户点击
        $("ul.ggul>li").on("click", function () {
            var ThisTxt = $(this).attr("data-title");
            var ThisLever = $(this).attr("data-lever");
            if (!$(this).hasClass("bitlidisable")) {
                $("[data-lever="" + ThisLever + ""]").each(function (a, b) {
                    $(b).removeClass("bitliactive");
                    $(b).addClass("bitli");
                })
                $(this).addClass("bitliactive");
                ClickRestUi();
            }
        });
        //根据title和index获得可用组合数组
        function GetOkZuHe(txt, lever) {
            //获得有效组合
            var Arr = new Array();
            var TempArr = GGAllJsonStr.GuiGeStr;
            for (var i = 0; i < TempArr.length; i++) {
                var hstr = "-" + TempArr[i].Key + "-";
                if (hstr.indexOf("-" + txt + "-", 0) > -1) {
                    Arr.push(TempArr[i].Key);
                }
            }
            return Arr;
            //还原同级别
            //var tonghang = GGAllJsonStr.BitStr[lever].onebit;
            //ChangeArr[lever] = tonghang.split("|")[1];
            //ClickRestUi();
        }
        //根据有效组合提取属性可选粒子
        function GetOkBitsArr(OkArr) {
            //根据有效组合提取属性组
            var RArr = new Array();
            for (var j = 0; j < OkArr.length; j++) {
                var jArr = OkArr[j].split("-");
                for (var m = 0; m < jArr.length; m++) {
                    if (RArr[m]) {
                        RArr[m] += jArr[m] + ",";
                    } else {
                        RArr[m] = jArr[m] + ",";
                    }
                }
            }
            for (var k = 0; k < RArr.length; k++) {
                RArr[k] = RArr[k].substring(0, RArr[k].length - 1);
            }
            return RArr;
        }
        //遍历个阶层的选中值,然后获得各阶层的可配属性粒子
        //在执行该函数之间要确保有选中项,
        //每次执行要根据选中项进行重画
        function GetBitsJiaoJi() {
            var OKBitsArr = new Array();
            for (var i = 0; i < GGAllJsonStr.BitStr.length; i++) {
                $("[data-lever="" + i + ""]").each(function (a, b) {
                    if ($(b).hasClass("bitliactive")) {
                        var OkArr = GetOkZuHe($(b).attr("data-title"), $(b).attr("data-lever"));
                        OKBitsArr[i] = GetOkBitsArr(OkArr);
                    }
                })
            }
            //合并OKBitsArr,存储的二维数组
            var S0 = "";
            var S1 = "";
            var S2 = "";
            var S3 = "";
            for (var j = 0; j < OKBitsArr.length; j++) {
                for (var k = 0; k < OKBitsArr[j].length; k++) {
                    if (OKBitsArr[j][k]) {
                        if (k == 0) {
                            S0 += OKBitsArr[j][k] + ",";
                        }
                        else if (k == 1) {
                            S1 += OKBitsArr[j][k] + ",";
                        }
                        else if (k == 2) {
                            S2 += OKBitsArr[j][k] + ",";
                        }
                        else if (k == 3) {
                            S3 += OKBitsArr[j][k] + ",";
                        }
                    }
                }
            }
            ChangeArr[0] = S0 != "" ? unique(S0.substring(0, S0.length - 1).split(",")) : "";
            ChangeArr[1] = S1 != "" ? unique(S1.substring(0, S1.length - 1).split(",")) : "";
            ChangeArr[2] = S2 != "" ? unique(S2.substring(0, S2.length - 1).split(",")) : "";
            ChangeArr[3] = S3 != "" ? unique(S3.substring(0, S3.length - 1).split(",")) : "";
           
        }
        //根据组合属性重画界面
        function ClickRestUi() {
            //获得当前所选交集数据
            GetBitsJiaoJi();
            //重画可选情况
            for (var i = 0; i < ChangeArr.length; i++) {
                if (ChangeArr[i] != "") {
                    var tempArr = ChangeArr[i];
                    $("[data-lever="" + i + ""]").each(function (a, b) {
                        if (!contains(tempArr, $(b).attr("data-title"))) {
                            $(b).removeClass("bitli");
                            $(b).removeClass("bitliactive");
                            $(b).addClass("bitlidisable");
                        } else {
                            $(b).removeClass("bitlidisable");
                            $(b).addClass("bitli");
                        }
                    })
                }
            }
            //更新价格
            GetKeyAndPrice();
        }
        //根据选址获得值和价格此方法
        //可以根据需要进行配置
        function GetKeyAndPrice()
        {
            //获得Ukey
            var ukey = "";
            for (var i = 0; i < GGAllJsonStr.BitStr.length; i++) {
                $("[data-lever="" + i + ""]").each(function (a, b) {
                    if ($(b).hasClass("bitliactive")) {
                        ukey += $(b).attr("data-title") + "-";
                    }
                })
            }
            ukey = ukey.substring(0, ukey.length - 1);
            $("#" + USelectedKey).val(ukey);
            //获得uprice
            var uprice = 0;
            for (var i = 0; i < GGAllJsonStr.GuiGeStr.length; i++) {
                if (GGAllJsonStr.GuiGeStr[i].Key == ukey)
                {
                    uprice = parseInt(GGAllJsonStr.GuiGeStr[i].Price);
                }
            }
            $("#" + USelectedPrice).val(uprice);
            //alert(ukey+"=="+uprice);
        }
        //数组去重复
        function unique(arr) {
            var result = [], hash = {};
            for (var i = 0, elem; (elem = arr[i]) != null; i++) {
                if (!hash[elem]) {
                    result.push(elem);
                    hash[elem] = true;
                }
            }
            return result;
        }
        //去掉所有空格包括中间空格,需要设置第2个参数为:g2
        function Trim(str, is_global) {
            var result;
            result = str.replace(/(^s+)|(s+$)/g, "");
            if (is_global.toLowerCase() == "g") {
                result = result.replace(/s/g, "");
            }
            return result;
        }
        //是否包含在数组中
        function contains(a, obj) {
            for (var i = 0; i < a.length; i++) {
                if (a[i] === obj) {
                    return true;
                }
            }
            return false;
        }
    </script>



总结:

一:本方法主要是操作简单,图省事,灵活性高,可以减少系统的复杂度。

二:上述JS只是为了表明大意,并不能直接使用,方法需要改进的地方很多,为了演示效果给淡化了。

三:系统中存储与读取需要根据统计分析需要做分解。

四:可能我做的也不好,只是给大家一种解决问题的思路




阅读更多
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
  • 上一篇:没有了
  • 下一篇:没有了
未上传头像