商品规格设计与生成: 样式
商品规格设计与生成: 样式
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
;!function(){"use strict";var f,b={open:"{{",close:"}}"},c={exp:function(a){return new RegExp(a,"g")},query:function(a,c,e){var f=["#([\\s\\S])+?","([^{#}])*?"][a||0];return d((c||"")+b.open+f+b.close+(e||""))},escape:function(a){return String(a||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")},error:function(a,b){var c="Laytpl Error：";return"object"==typeof console&&console.error(c+a+"\n"+(b||"")),c+a}},d=c.exp,e=function(a){this.tpl=a};e.pt=e.prototype,e.pt.parse=function(a,e){var f=this,g=a,h=d("^"+b.open+"#",""),i=d(b.close+"$","");a=a.replace(/[\r\t\n]/g," ").replace(d(b.open+"#"),b.open+"# ").replace(d(b.close+"}"),"} "+b.close).replace(/\\/g,"\\\\").replace(/(?="|')/g,"\\").replace(c.query(),function(a){return a=a.replace(h,"").replace(i,""),'";'+a.replace(/\\/g,"")+'; view+="'}).replace(c.query(1),function(a){var c='"+(';return a.replace(/\s/g,"")===b.open+b.close?"":(a=a.replace(d(b.open+"|"+b.close),""),/^=/.test(a)&&(a=a.replace(/^=/,""),c='"+_escape_('),c+a.replace(/\\/g,"")+')+"')}),a='"use strict";var view = "'+a+'";return view;';try{return f.cache=a=new Function("d, _escape_",a),a(e,c.escape)}catch(j){return delete f.cache,c.error(j,g)}},e.pt.render=function(a,b){var e,d=this;return a?(e=d.cache?d.cache(a,c.escape):d.parse(d.tpl,a),b?(b(e),void 0):e):c.error("no data")},f=function(a){return"string"!=typeof a?c.error("Template not found"):new e(a)},f.config=function(a){a=a||{};for(var c in a)b[c]=a[c]},f.v="1.1","function"==typeof define?define(function(){return f}):"undefined"!=typeof exports?module.exports=f:window.laytpl=f}();
</script>
<script id="J_sku_table_content" type="text/html">
<table class="sku-table J_sku_table">
<thead>
<tr>
<th>#</th>
<th>颜色</th>
<th>地区</th>
<th>容量</th>
</tr>
</thead>
<tbody>
{{# $.each(d.list, function(index, item){ }}
<tr data-val="">
<td>{{index+1}}</td>
{{# $.each(item, function(index_v, item_v){ }}
<td>{{item_v.name}}</td>
{{# }) }}
</tr>
{{# }) }}
</tbody>
</table>
</script>
<div id="J_sku_table_container"></div>
<script>
var data = [
[{
"title": "颜色",
"title_k": "color",
"title_id": "1",
"name": "红色",
"id": 1
}, {
"title": "颜色",
"title_k": "color",
"title_id": "1",
"name": "蓝色",
"id": 2
}],
[{
"title": "区域",
"title_k": "region",
"title_id": "2",
"name": "中国大陆",
"id": 3
}, {
"title": "区域",
"title_k": "region",
"title_id": "2",
"name": "港版",
"id": 4
}, {
"title": "区域",
"title_k": "region",
"title_id": "2",
"name": "港版xx",
"id": 4
}
],
[{
"title": "大小",
"title_k": "size",
"title_id": "3",
"name": "16G",
"id": 5
}, {
"title": "大小",
"title_k": "size",
"title_id": "3",
"name": "32G",
"id": 6
},
{
"title": "大小",
"title_k": "size",
"title_id": "3",
"name": "100G",
"id": 6
}
]
];
function cartesianProductOf() {
return Array.prototype.reduce.call(arguments, function (a, b) {
var ret = [];
a.forEach(function (a) {
b.forEach(function (b) {
ret.push(a.concat([b]));
});
});
return ret;
}, [[]]);
}
var list_data = cartesianProductOf(data[0], data[1], data[2]);
var new_data ={"list":list_data};
var gettpl = document.getElementById('J_sku_table_content').innerHTML;
var max_rowspan = data[1].length * data[2].length;
laytpl(gettpl).render(new_data, function (html) {
document.getElementById('J_sku_table_container').innerHTML = html;
processTable(); //执行入口
});
function initTable() {
$('.J_sku_table tbody tr').each(function (i, v) {
var data_field = '';
$(v).find('td').each(function (ii, vv) {
if (ii == 0) return;
data_field = data_field + $(this).text();
$(this).attr('data-field', data_field);
});
});
}
function processTable() {
initTable();
var rowspan = {};
$('.J_sku_table tbody tr td').each(function (i, v) {
var data_field = $(v).attr('data-field');
if (data_field != '' && typeof data_field != 'undefined') {
if (!rowspan[data_field]) rowspan[data_field] = 0;
rowspan[data_field]++;
}
});
var has_rowspan = {};
$('.J_sku_table tbody tr td').each(function (i, v) {
var data_field = $(v).attr('data-field');
if (data_field != '' && typeof data_field != 'undefined') {
if (has_rowspan[data_field]) {
$(v).hide();
} else if (rowspan[data_field]) {
$(v).attr('rowspan', rowspan[data_field])
has_rowspan[data_field] = true;
}
}
});
}
</script>
<style type="text/css">
table.sku-table {
font-size: 14px;
color: #333;
border-width: 1px;
border-color: #ddd;
margin: 30px;
border-collapse: collapse
}
table.sku-table th {
border-width: 1px;
padding: 10px;
border-style: solid;
border-color: #ddd;
color: #666;
background-color: #ededed
}
table.sku-table td {
border-width: 1px;
padding: 5px 10px;
border-style: solid;
border-color: #ddd;
background-color: #fff;
color: #777;
width: auto;
text-align: center;
font-size: 12px
}
table.sku-table td input {
width: 100%;
border: 0;
font-size: 14px;
padding: 0;
margin: 0;
color: #666;
text-align: center
}
input[type=text] {
height: 24px;
display: inline-block;
padding: 2px 12px;
font-size: 14px;
line-height: 24px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
input[type=text]:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
button:focus {
outline: 0
}
</style>