模擬淘寶的產品SKU資訊新增組合
阿新 • • 發佈:2018-12-19
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="Scripts/jquery-1.8.2.min.js"></script> <title></title> <script> $(function () { //SKU資訊 $(".div_contentlist label").bind("change", function () { step.Creat_Table(); }); var step = { //SKU資訊組合 Creat_Table: function () { step.hebingFunction(); var SKUObj = $(".Father_Title"); //var skuCount = SKUObj.length;// var arrayTile = new Array(); //標題組數 var arrayInfor = new Array(); //盛放每組選中的CheckBox值的物件 var arrayColumn = new Array();//指定列,用來合併哪些列 var bCheck = true;//是否全選 var columnIndex = 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(); $("." + itemName + " input[type=checkbox]:checked").each(function () { order.push($(this).val()); }); arrayInfor.push(order); if (order.join() == "") { bCheck = false; } //var skuValue = SKUObj.find("li").eq(index).html(); }); //開始建立Table表 if (bCheck == true) { var RowsCount = 0; $("#createTable").html(""); var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;\"></table>"); table.appendTo($("#createTable")); var thead = $("<thead></thead>"); thead.appendTo(table); var trHead = $("<tr></tr>"); trHead.appendTo(thead); //建立表頭 $.each(arrayTile, function (index, item) { var td = $("<td>" + item + "</td>"); td.appendTo(trHead); }); var itemColumHead = $("<td style=\"width:70px;\">價格</td><td style=\"width:70px;\">數量</td> "); itemColumHead.appendTo(trHead); //var itemColumHead2 = $("<td >商家編碼</td><td >商品條形碼</td>"); //itemColumHead2.appendTo(trHead); var tbody = $("<tbody></tbody>"); tbody.appendTo(table); ////生成組合 var zuheDate = step.doExchange(arrayInfor); if (zuheDate.length > 0) { //建立行 $.each(zuheDate, function (index, item) { var td_array = item.split(","); var tr = $("<tr></tr>"); tr.appendTo(tbody); $.each(td_array, function (i, values) { var td = $("<td>" + values + "</td>"); td.appendTo(tr); }); var td1 = $("<td ><input name=\"Txt_PriceSon\" class=\"l-text\" type=\"text\" value=\"\"></td>"); td1.appendTo(tr); var td2 = $("<td ><input name=\"Txt_CountSon\" class=\"l-text\" type=\"text\" value=\"\"></td>"); td2.appendTo(tr); //var td3 = $("<td ><input name=\"Txt_NumberSon\" class=\"l-text\" type=\"text\" value=\"\"></td>"); //td3.appendTo(tr); //var td4 = $("<td ><input name=\"Txt_SnSon\" class=\"l-text\" type=\"text\" value=\"\"></td>"); //td4.appendTo(tr); }); } //結束建立Table表 arrayColumn.pop();//刪除陣列中最後一項 //合併單元格 $(table).mergeCell({ // 目前只有cols這麼一個配置項, 用陣列表示列的索引,從0開始 cols: arrayColumn }); } },//合併行 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)); }); }; // 如果對javascript的closure和scope概念比較清楚, 這是個外掛內部使用的private方法 function mergeCell($table, colIndex) { $table.data('col-content', ''); // 存放單元格內容 $table.data('col-rowspan', 1); // 存放計算的rowspan值 預設為1 $table.data('col-td', $()); // 存放發現的第一個與前一行比較結果不同td(jQuery封裝過的), 預設一個"空"的jquery物件 $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> <style type="text/css"> form { margin: 0; } textarea { display: block; } </style> <style> .chcBox_Width { width: 18px; } .li_width { width: 110px; } .guige_ul { padding-left: 20px; background-color: #F8F8F8; } .table_head { line-height: 23px; margin-left: 20px; border-color: #D7D7D7; } </style> <link href="Content/css/addProduct.css" rel="stylesheet" /> </head> <body style="padding: 10px"> <div id="navtab1" style="width: 100%; border: 1px solid #A3C0E8;"> <div title="擴充套件資訊" tabid="tabItem3"> <div id="Div1"> <div position="center"> <div style="padding: 5px 8px;" class="div_content"> <div class="div_title"> <span class="infor_title"> </span>產品規格 <div> <hr /> </div> </div> <div class="div_contentlist"> <ul class="Father_Title"> <li>顏色分類:</li> </ul> <ul class="Father_Item0" style="padding-left: 20px; background-color: #F8F8F8;"> <li class="li_width1"> <label> <input id="Checkbox3" type="checkbox" class="chcBox_Width" value="軍綠色" />軍綠色<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox1" type="checkbox" class="chcBox_Width" value="花色" />花色<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox2" type="checkbox" class="chcBox_Width" value="藍色" />藍色<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox4" type="checkbox" class="chcBox_Width" value="褐色" />褐色<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox5" type="checkbox" class="chcBox_Width" value="黃色" />黃色<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox6" type="checkbox" class="chcBox_Width" value="黑色" />黑色<span class="li_empty"> </span></label></li> </ul> <ul class="Father_Title"> <li>尺寸:</li> </ul> <ul class="Father_Item1" style="padding-left: 20px; background-color: #F8F8F8;"> <li class="li_width"> <label> <input id="Checkbox7" type="checkbox" class="chcBox_Width" value="41" />41<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox8" type="checkbox" class="chcBox_Width" value="42" />42<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox9" type="checkbox" class="chcBox_Width" value="43" />43<span class="li_empty"> </span></label></li> </ul> <ul class="Father_Title"> <li>型別:</li> </ul> <ul class="Father_Item2" style="padding-left: 20px; background-color: #F8F8F8;"> <li class="li_width"> <label> <input id="Checkbox10" type="checkbox" class="chcBox_Width" value="港澳臺" /><span class="Color_Name">港澳臺</span><span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox11" type="checkbox" class="chcBox_Width" value="韓國" />韓國<span class="li_empty"> </span></label></li> <li class="li_width"> <label> <input id="Checkbox12" type="checkbox" class="chcBox_Width" value="亞太" />亞太<span class="li_empty"> </span></label></li> </ul> </div> <div class="div_contentlist2"> <ul> <li> <div id="createTable"> </div> </li> </ul> <ul> <li> <input type="button" id="Button1" class="l-button" value="提交" /> </li> </ul> </div> </div> </div> </div> </div> </div> </body> </html>