概述
基於 Layui 的 SkuTable 組件。根據配置動態生成 sku 表。
最新版本下載地址：
效果圖：
新代碼：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>動態SKU表</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
</head>
<body>
<div class="layui-container">
<form action="" class="layui-form fairy-form">
<!-- sku參數表 -->
<div class="layui-form-item">
<label class="layui-form-label">規格：</label>
<div class="layui-input-block">
<div class="fairy-spec-table"></div>
</div>
</div>
<!-- 動態sku表 -->
<div class="layui-form-item">
<label class="layui-form-label">SKU表：</label>
<div class="layui-input-block">
<div class="fairy-sku-table"></div>
</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>
</div>
</div>
</form>
</div>
<!-- 引入 layui.js -->
<script src="./layui/layui.js"></script>
<!-- 引入 skuTable.js -->
<script src="./skuTable.js"></script>
<script>
layui.config({
base: './'
}).use(['form', 'skuTable'], function () {
var form = layui.form, skuTable = layui.skuTable;
//注意！！！ 注意！！！ 注意！！！
//如果配置了相關接口請求的參數，請置本示例於服務器中預覽，不然會有瀏覽器跨域問題
//示例中的json文件僅做格式返回參考，若多次執行添加規格后再為新增后的規格添加規格值，會發現所有新增的規格都增加了該規格值。注意！此處並非是bug，原因是因為示例中返回的新增規格值id是重復的，而在正常接口請求每次返回的新增規則id是不一樣的
var obj = skuTable.render({
//sku表相同屬性值是否合並行
rowspan: true,
//上傳接口地址
//接口要求返回格式為 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
uploadUrl: './json/upload.json',
//添加規格接口地址，如果為空則表示不允許增加規格
//接口要求返回格式為 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
specCreateUrl: './json/specCreate.json',
//添加規格值接口地址，如果為空則表示不允許增加規格值
//接口要求返回格式為 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
specValueCreateUrl: './json/specValueCreate.json',
//sku表格配置參數
skuTableConfig: {
thead: [
{title: '圖片', icon: ''},
{title: '銷售價(元)', icon: 'layui-icon-cols'},
{title: '市場價(元)', icon: 'layui-icon-cols'},
{title: '成本價(元)', icon: 'layui-icon-cols'},
{title: '庫存', icon: 'layui-icon-cols'},
{title: '狀態', icon: ''},
],
tbody: [
{type: 'image', field: 'picture', value: '', verify: '', reqtext: ''},
{type: 'input', field: 'price', value: '0', verify: 'required|number', reqtext: '銷售價不能為空'},
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市場價不能為空'},
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本價不能為空'},
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '庫存不能為空'},
{type: 'select', field: 'status', option: [{key: '啟用', value: '1'}, {key: '禁用', value: '0'}], verify: 'required', reqtext: '狀態不能為空'},
]
},
//規格數據, 一般從接口獲取
specData: [
{
id: "1",
title: "顏色",
child: [
{id: "1", title: "紅", checked: true},
{id: "2", title: "黃", checked: false},
{id: "3", title: "藍", checked: false}
]
}, {
id: "2",
title: "尺碼",
child: [
{id: "4", title: "S", checked: true},
{id: "5", title: "M", checked: true},
{id: "6", title: "L", checked: false},
{id: "7", title: "XL", checked: false}
]
}, {
id: "3",
title: "款式",
child: [
{id: "8", title: "男款", checked: true},
{id: "9", title: "女款", checked: true}
]
}
],
//sku數據
//新增的時候為空對象
//編輯的時候可以從后台接收，會自動填充sku表，可以去掉注釋看效果
// skuData: {
// "skus[1-4-8][picture]": "https://cdn.layui.com/upload/2019_5/168_1559291577683_9348.png",
// "skus[1-4-8][price]": "100",
// "skus[1-4-8][market_price]": "200",
// "skus[1-4-8][cost_price]": "50",
// "skus[1-4-8][stock]": "18",
// "skus[1-4-8][status]": "0",
// "skus[1-4-9][picture]": "",
// "skus[1-4-9][price]": "0",
// "skus[1-4-9][market_price]": "0",
// "skus[1-4-9][cost_price]": "0",
// "skus[1-4-9][stock]": "0",
// "skus[1-4-9][status]": "1",
// "skus[1-5-8][picture]": "",
// "skus[1-5-8][price]": "0",
// "skus[1-5-8][market_price]": "0",
// "skus[1-5-8][cost_price]": "0",
// "skus[1-5-8][stock]": "0",
// "skus[1-5-8][status]": "1",
// "skus[1-5-9][picture]": "",
// "skus[1-5-9][price]": "0",
// "skus[1-5-9][market_price]": "0",
// "skus[1-5-9][cost_price]": "0",
// "skus[1-5-9][stock]": "0",
// "skus[1-5-9][status]": "1"
// }
});
form.on('submit(submit)', function (data) {
//獲取規格數據
console.log(obj.getSpecData());
//獲取表單數據
console.log(data.field);
var state = Object.keys(data.field).some(function (item, index, array) {
return item.startsWith('skus');
});
state ? layer.alert(JSON.stringify(data.field), {title: '提交的數據'}) : layer.msg('sku表數據不能為空', {icon: 5, anim: 6});
return false;
});
});
</script>
</body>
</html>
老代碼（棄用）：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>動態SKU表-白開水</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
<style>
#sku-table thead tr th i,
#sku-table tbody tr td img {
cursor: pointer;
}
</style>
</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>
</tr>
</thead>
<tbody>
<tr>
<td data-id="1">顏色</td>
<td>
<input type="checkbox" title="紅" lay-filter="filter" value="1" checked>
<input type="checkbox" title="黃" lay-filter="filter" value="2">
<input type="checkbox" title="藍" lay-filter="filter" value="3">
</td>
</tr>
<tr>
<td data-id="2">尺碼</td>
<td>
<input type="checkbox" title="S" lay-filter="filter" value="4" checked>
<input type="checkbox" title="M" lay-filter="filter" value="5" checked>
<input type="checkbox" title="L" lay-filter="filter" value="6">
<input type="checkbox" title="XL" lay-filter="filter" value="7">
</td>
</tr>
<tr>
<td data-id="2">款式</td>
<td>
<input type="checkbox" title="男款" lay-filter="filter" value="8" checked>
<input type="checkbox" title="女款" lay-filter="filter" value="9" checked>
</td>
</tr>
</tbody>
</table>
</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(['form', 'upload', 'jquery'], function () {
var form = layui.form, upload = layui.upload, $ = layui.jquery;
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>銷售價(元) <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>狀態 </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="https://shop.yyhjx.net/backend/assets/abec325a/img/sku-add.png" alt="sku圖片"></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><select name="skus[' + item.id + '][status]"><option value="1">啟用</option><option value="0">禁用</option></select></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('');
}
}
/**
* 初始化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');
});
state ? layer.alert(JSON.stringify(data.field), {title: '提交的數據'}) : layer.msg('sku表數據不能為空', {icon: 5, anim: 6});
return false;
});
});
</script>
</body>
</html>
友情鏈接：https://www.copylian.com/technology/230.html