最近用到sku商品规格，对于纯后端工程师来说这个有一定难度，参考网上的一些例子撸出来一个。
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">规格：</label>
<div class="layui-input-block">
<table class="layui-table" id="spec-table">
<thead>
<tr>
<th>规格名</th>
<th>规格值</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline" id="skuModel" style="display: none;border: 1px solid #E6E6E6;padding: 20px;margin-right: 0;min-width: 190px;">
<input type="text" name="skuName" id="skuName" class="layui-input" placeholder="请输入规格名" style="margin-bottom: 20px;"
autocomplete="off">
<button class="layui-btn layui-btn-normal" type="button" id="skuConfirm">确认</button>
<button class="layui-btn layui-btn-danger" type="button" id="skuCancel">取消</button>
</div>
<div class="layui-input-inline">
<button class="layui-btn" type="button" id="skuAdd">添加规格</button>
</div>
</div>
<div class="layui-form-item layui-hide">
<label class="layui-form-label">SKU表：</label>
<div class="layui-input-block">
<table class="layui-table" id="sku-table">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<input type="hidden" name="spec" value="">
</div>
</div>
</form>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use(['pinyin', 'form', 'upload', 'jquery'], function() {
var form = layui.form,
upload = layui.upload,
$ = layui.jquery,
;
// form.render()
// 添加规格按钮
$('#skuAdd').click(function() {
$(this).hide();
$('#skuModel').show();
});
// 取消添加规格按钮
$('#skuCancel').click(function() {
$('#skuName').val('');
$('#skuModel').hide();
$('#skuAdd').show();
});
// 添加规格确认按钮
$('#skuConfirm').click(function() {
var skuName = $('#skuName').val();
if (skuName == '') {
layer.msg('请输入规格名');
return;
}
var spec_id = -(($("#spec-table .spec-item").length - 1) + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
$('#spec-table tbody').append('<tr><td data-id="' +
spec_id + '">' + skuName +
'</td><td></td><td><div class="layui-input-block" id="skuValueModel" style="display: none;margin-left: 0;min-width: 190px;">' +
'<input type="text" name="skuValueName" id="skuValueName" class="layui-input layui-input-inline" placeholder="请输入规格值" autocomplete="off">' +
'<button class="layui-btn layui-btn-normal" type="button" id="skuValueConfirm">确认</button>' +
'<button class="layui-btn layui-btn-danger" type="button" id="skuValueCancel">取消</button>' +
'</div>' +
'<div class="layui-input-block" style="width: 64px;">' +
'<button class="layui-btn" type="button" id="skuValueAdd">添加</button>' +
'</div></td></tr>')
$('#skuName').val('');
$('#skuModel').hide();
$('#skuAdd').show();
form.render();
});
// 添加规格值按钮
$("body").on("click", "#skuValueAdd", function(event) {
$(event.currentTarget).parent().hide();
$(event.currentTarget).parent().siblings().eq(0).show();
})
// 取消添加规格值按钮
$("body").on("click", "#skuValueCancel", function(event) {
$(event.currentTarget).parent().hide();
$(event.currentTarget).parent().next().show();
})
// 添加规格值确认按钮
$("body").on("click", "#skuValueConfirm", function(event) {
$(event.currentTarget).parent().hide();
$(event.currentTarget).parent().next().show();
var skuValueName = $(event.currentTarget).siblings("input").val();
// if(ifSkuExit(fullValueName)){
// layer.msg('此规格已存在！');
// return;
// }
var spec_id = -(($("#spec-table .spec-item").length - 1) + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
$(event.currentTarget).parent().parent().siblings().eq(1).append(
'<input type="checkbox" title="' + skuValueName +
'" lay-filter="filter" value="' + spec_id + '">');
//清空input
$(event.currentTarget).siblings("input").val('');
form.render();
})
/**
* 初始化sku表
*/
createSkuTable();
/**
* 监听sku表变化
*/
form.on('checkbox(filter)', function(data) {
createSkuTable();
});
/**
* 监听批量赋值
*/
$(document).on('click', '#sku-table thead tr th i', function() {
var that = this;
layer.prompt(function(value, index, elem) {
$.each($('#sku-table tbody tr'), function() {
$(this).find('td').eq($(that).parent().index()).children(
'input').val(value);
});
layer.close(index);
});
});
/**
* 监听表单提交
*/
form.on('submit(submit)', function(data) {
var state = Object.keys(data.field).some(function(item, index, array) {
return item.startsWith('skus');
});
console.log(JSON.stringify(data.field));
state ? layer.alert(JSON.stringify(data.field), {
title: '提交的数据'
}) : layer.msg('sku表数据不能为空', {
icon: 5,
anim: 6
});
return false;
});
//创建skutable
function createSkuTable(url = '') {
var specData = [];
$.each($('#spec-table tbody tr'), function() {
var child = [];
$.each($(this).find('input[type=checkbox]'), function() {
child.push({
id: $(this).val(),
title: $(this).attr('title'),
checked: $(this).is(':checked')
});
});
var specItem = {
id: $(this).find('td').eq(0).attr('data-id'),
title: $(this).find('td').eq(0).text(),
show: $(this).find('input[type=checkbox]:checked').length > 0,
child: child
};
specData.push(specItem);
});
if ($('#spec-table tbody input[type=checkbox]:checked').length) {
$('#sku-table').parent().parent().removeClass('layui-hide');
var prependThead = [],
prependTbody = [];
$.each(specData, function() {
if (this.show) {
prependThead.push(this.title);
var prependTbodyItem = [];
$.each(this.child, function() {
if (this.checked) {
prependTbodyItem.push({
id: this.id,
title: this.title
});
}
});
prependTbody.push(prependTbodyItem);
}
});
if (prependThead.length > 0) {
$('#sku-table thead').html('<tr>' +
prependThead.map(function(t, i, a) {
return '<th>' + t + '</th>'
}) +
'<th>图片</th>' +
'<th>副标题</th>' +
'<th>销售价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>市场价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>成本价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>库存 <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>库存预警 <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>重量kg <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>体积m<sup>3</sup> <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>货号 <i class="layui-icon layui-icon-cols"></i></th>' +
'</tr>');
}
var prependTbodyTrs = [];
prependTbody.reduce(function(prev, cur, index, array) {
var tmp = [];
prev.forEach(function(a) {
cur.forEach(function(b) {
tmp.push({
id: a.id + ' ' + b.id,
title: a.title + ' ' + b.title
});
})
});
return tmp;
}).forEach(function(item, index, array) {
prependTbodyTrs.push('<tr>' +
item.title.split(' ').map(function(t, i, a) {
return '<td>' + t + '</td>';
}) +
'<td><input type="hidden" name="skus[' + item.id +
'][picture]" value=""><img src="" alt="sku图片"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][spec_name]" value="'+item.title+'" class="layui-input"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="销售价不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][market_price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="市场价不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][cost_price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="成本价不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][stock]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="库存不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][stock_alarm]" value="0" class="layui-input" lay-verify="number"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][weight]" value="0" class="layui-input" lay-verify="number"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][volume]" value="0" class="layui-input" lay-verify="number"></td>' +
'<td><input type="text" name="skus[' + item.id +
'][volume]" value="" class="layui-input"></td>' +
'</tr>');
});
if (prependTbodyTrs.length > 0) {
$('#sku-table tbody').html(prependTbodyTrs.join(''));
$('input[name=spec]').val(JSON.stringify(specData));
form.render('select');
upload.render({
elem: '#sku-table td img',
url: url,
exts: 'png|jpg|ico|jpeg|gif',
accept: 'images',
acceptMime: 'image/*',
multiple: false,
done: function(res) {
if (res.code === 200) {
var url = res.data.url;
$(this.item).attr('src', url).prev().val(url);
layer.msg(res.msg);
} else {
layer.msg(res.msg);
}
return false;
}
});
}
} else {
$('#sku-table').parent().parent().addClass('layui-hide');
$('#sku-table thead').html('');
$('#sku-table tbody').html('');
$('input[name=spec]').val('');
}
}
})
</script>
</body>
</html>
这个好用
这表情很喜感
共 0 条评论