商城 sku 组合 抄袭 [ 求助交流 ]
最近无聊时写看到淘宝后台发布里有个规格组合功能，于是到网上找了段，然后更改加点自己的需求，总感觉非常别扭，代码如下：
<div class="div_content" style="padding: 5px 8px;">
<div class="div_title">
<span>宝贝规格：</span>
</div>
<div class="div_contentlist">
<ul class="Father_Title">
<li>尺码:</li>
</ul>
<ul class="Father_Item0">
<li style="display: inline-block;" class="li_width in_all">
<label class="in_all">
<input type="checkbox" t_value="XXS" value="62168" name="goodsAttrId[]" class="chcBox_Width" id_62168="62168" id="Checkbox1">
</label>
<span class="span_nom_attr_val_test" tid="62168">XXS</span>
<span class="li_empty"> </span>
</li>
<li style="display: inline-block;" class="li_width in_all">
<label class="in_all">
<input type="checkbox" t_value="XS" value="62169" name="goodsAttrId[]" class="chcBox_Width" id_62169="62169" id="Checkbox2">
</label>
<span class="span_nom_attr_val_test" tid="62169">XS</span>
<span class="li_empty"> </span>
</li>
</ul>
<ul class="Father_Title">
<li>颜色:</li>
</ul>
<ul class="Father_Item1">
<li style="display: inline-block;" class="li_width in_all">
<label class="in_all">
<input type="checkbox" t_value="多色/渐变色" value="62144" name="goodsAttrId[]" class="chcBox_Width" id_62144="62144" id="Checkbox1">
</label>
<span class="span_nom_attr_val_test" tid="62144">多色/渐变色</span>
<span class="li_empty"> </span>
</li><li style="display: inline-block;" class="li_width in_all">
<label class="in_all">
<input type="checkbox" t_value="白色" value="62145" name="goodsAttrId[]" class="chcBox_Width" id_62145="62145" id="Checkbox2">
</label>
<span class="span_nom_attr_val_test" tid="62145">白色</span>
<span class="li_empty"> </span>
</li><li style="display: inline-block;" class="li_width in_all">
<label class="in_all">
<input type="checkbox" t_value="红色" value="62146" name="goodsAttrId[]" class="chcBox_Width" id_62146="62146" id="Checkbox3">
</label>
<span class="span_nom_attr_val_test" tid="62146">红色</span>
<span class="li_empty"> </span>
</li>
</ul>
</div>
<div class="div_contentlist">
<ul>
<li>
<div id="createTable-create"></div>
</li>
</ul>
</div>
</div>
<--script-->
//==================
$(function(){
var arr_val = new Array();
//===============================
$("input[name='Txt_PriceSon[]']").live('blur',function(){ if($(this).val()){ arr_val[$(this).attr('str-price')]=$(this).val();}});
$("input[name='Txt_CountSon[]']").live('blur',function(){ if($(this).val()){ arr_val[$(this).attr('str-count')]=$(this).val(); }});
$("input[name='Txt_NumberSon[]']").live('blur',function(){ if($(this).val()){ arr_val[$(this).attr('str-number')]=$(this).val();}});
$("input[name='Limit_NumberSon[]']").live('blur',function(){ if($(this).val()){ arr_val[$(this).attr('str-limit')]=$(this).val();}});
$("input[name='Txt_SnSon[]']").live('blur',function(){ if($(this).val()){ arr_val[$(this).attr('str-sn')]=$(this).val();} });
//规格信息
$(".div_contentlist label").live("click", function(){
step.Creat_Table();
});
var step = {
//规格信息组合
Creat_Table: function () {
step.hebingFunction();
var SKUObj = $(".Father_Title");
//var skuCount = SKUObj.length;//
var arrayTile = new Array(); //标题组数
var arrayInfor = new Array(); //盛放每组选中的CheckBox值的对象
var arrayInfor_n = new Array(); //盛放每组选中的CheckBox值的对象,指非自定义的属性值
var arrayColumn = new Array(); //指定列，用来合并哪些列
var bCheck = true;//是否全选
var columnIndex = 0;
var y=0;
$.each(SKUObj, function (i, item){
arrayColumn.push(columnIndex);
columnIndex++;
arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));
var itemName = "Father_Item" + i; //选中的CHeckBox取值
var order = new Array();
var order_n = new Array();
$("." + itemName + " input[type=checkbox]:checked").each(function (){
//order.push($(this).val());
order.push($(this).attr("t_value"));
order_n.push($(this).attr("value"));
});
arrayInfor.push(order);
arrayInfor_n.push(order_n);
if (order.join() == ""){
bCheck = false;
}
//var skuValue = SKUObj.find("li").eq(index).html();
});//开始创建Table表
if (bCheck == true) {
//隐藏库存和价格
$('#Goods_goods_number,#Goods_goods_price,#Goods_buy_limit').hide();
$('.goods_number_hide').hide();
var RowsCount = 0;
$("#createTable-create").html("");
var table = $("<table class=\"list_table\" id=\"process\" border=\"1px;\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:80%;padding:5px;\"></table>");
table.appendTo($("#createTable-create"));
var thead = $("<thead> </thead>");
thead.appendTo(table);
var trHead = $("<tr></tr>");
trHead.appendTo(thead);
//创建表头
$.each(arrayTile, function (index, item) {
var td = $("<th>" + item + "</th>");
td.appendTo(trHead);
});
var itemColumHead = $("<th style=\"width:70px;\">价格</th><th style=\"width:70px;\">库存</th> ");
itemColumHead.appendTo(trHead);
var itemColumHead2 = $("<th>限制每次购买量</th><th>商家编码</th><th>商品条形码</th>");
itemColumHead2.appendTo(trHead);
var tbody = $("<tbody> </tbody>");
tbody.appendTo(table);
////生成组合
var zuheDate = step.doExchange(arrayInfor);
var zuheDate_n = step.doExchange(arrayInfor_n);
//alert(zuheDate_n);
if (zuheDate.length > 0){
//创建行
$.each(zuheDate, function(index, item){
//alert(zuheDate_n[index]);
var td_array = item.split(",");
var td_array_n = (zuheDate_n[index]).split(",");
//=========================================
var str_price=(arr_val['p_'+td_array_n]!=undefined)?arr_val['p_'+td_array_n]:'';
var str_count=(arr_val['c_'+td_array_n]!=undefined)?arr_val['c_'+td_array_n]:'';
var str_limit=(arr_val['l_'+td_array_n]!=undefined)?arr_val['l_'+td_array_n]:'';
var str_number=(arr_val['n_'+td_array_n]!=undefined)?arr_val['n_'+td_array_n]:'';
var str_sn=(arr_val['s_'+td_array_n]!=undefined)?arr_val['s_'+td_array_n]:'';
//=========================================
var tr = $("<tr> </tr>");
tr.appendTo(tbody);
$.each(td_array, function(i, values){
if(i==0){
if(td_array_n[i+1]!='undefined')
var td = $("<td >" + values + "</td> <input type='hidden' name='AttrbuteColor[]' value='"+td_array_n[i]+":"+td_array_n[i+1]+"'> ");
else
var td = $("<td >" + values + "</td> <input type='hidden' name='AttrbuteColor[]' value='"+td_array_n[i]+"'> ");
}else{
var td = $("<td >" + values + "</td>");
}
td.appendTo(tr);
});
var td1 = $("<td ><input str-price='p_"+td_array_n+"' name=\"Txt_PriceSon[]\" style=\"width: 106px;\" class=\"l-text\" type=\"text\" value='"+str_price+"'></td>");
td1.appendTo(tr);
var td2 = $("<td ><input str-count='c_"+td_array_n+"' name=\"Txt_CountSon[]\" style=\"width: 106px;\" class=\"l-text\" type=\"text\" value='"+str_count+"'></td>");
td2.appendTo(tr);
var td3 = $("<td ><input str-limit='l_"+td_array_n+"' name=\"Limit_NumberSon[]\" style=\"width: 106px;\" class=\"l-text\" type=\"text\" value='"+str_limit+"'></td>");
td3.appendTo(tr);
var td4 = $("<td ><input str-number='n_"+td_array_n+"' name=\"Txt_NumberSon[]\" style=\"width: 106px;\" class=\"l-text\" type=\"text\" value='"+str_number+"'></td>");
td4.appendTo(tr);
var td5 = $("<td ><input str-sn='s_"+td_array_n+"' name=\"Txt_SnSon[]\" style=\"width: 106px;\" class=\"l-text\" type=\"text\" value='"+str_sn+"'></td>");
td5.appendTo(tr);
});
}
//结束创建Table表
arrayColumn.pop();//删除数组中最后一项
//合并单元格
$(table).mergeCell({
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
cols: arrayColumn
});
} else{
//显示隐藏的库存和价格
$('#Goods_goods_number,#Goods_goods_price,#Goods_buy_limit').show();
$('.goods_number_hide').show();
//未全选中,清除表格
document.getElementById('createTable-create').innerHTML="";
}
},//合并行
hebingFunction: function(){
$.fn.mergeCell = function (options) {
return this.each(function () {
var cols = options.cols;
for (var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console调试
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td($封装过的), 默认一个"空"的$对象
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
// 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('tbody tr', $table).each(function (index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
// 取出单元格的当前内容
var currentContent = $td.html();
// 第一次时走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行与当前行内容相同
if ($table.data('col-content') == currentContent) {
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
$td.hide();
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// 同样是个private函数 清理内存之用
function dispose($table) {
$table.removeData();
}
},
//组合数组
doExchange: function (doubleArrays) {
var len = doubleArrays.length;
if (len >= 2) {
var arr1 = doubleArrays[0];
var arr2 = doubleArrays[1];
var len1 = doubleArrays[0].length;
var len2 = doubleArrays[1].length;
var newlen = len1 * len2;
var temp = new Array(newlen);
var index = 0;
for (var i = 0; i < len1; i++) {
for (var j = 0; j < len2; j++) {
temp[index] = arr1[i] + "," + arr2[j];
index++;
}
}
var newArray = new Array(len - 1);
newArray[0] = temp;
if (len > 2) {
var _count = 1;
for (var i = 2; i < len; i++) {
newArray[_count] = doubleArrays[i];
_count++;
}
}
//console.log(newArray);
return step.doExchange(newArray);
}
else {
return doubleArrays[0];
}
}
}
return step;
});
//======================
<--/script---->
大家帮忙改改
共 2 条回复
-
-
Asiahelper 回复于 2017-02-22 19:10 举报6666666666啊
经理
liuxuean 深圳
注册时间：2013-04-06
最后登录：2019-08-14
在线时长：19小时48分
最后登录：2019-08-14
在线时长：19小时48分
- 粉丝5
- 金钱1035
- 威望0
- 积分1225