插件描述：基于layui的单规格多规格商品组件
更新时间：2022-05-16 00:50:33
更新说明：修复有sku数据返回但回显没有填充问题
更新时间：2022-01-15 14:45:02
更新说明：增加productId、productTypeId配置参数
更新时间：2021-12-23 09:13:00
更新说明：修复拖拽规格后删除规格/规格值出现的错乱问题
更新时间：2021-12-19 00:41:24
更新说明：增加使用说明以及修复同个商品类型值重复选中时的样式问题
使用方法
<!doctype html>
<html>
<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 id="app">
<form action="" class="layui-form fairy-form">
<!--商品规格选项-->
<div id="fairy-is-attribute"></div>
<!--商品类型选择-->
<div id="fairy-product-type"></div>
<!--商品属性表-->
<div id="fairy-attribute-table"></div>
<!--商品规格表-->
<div id="fairy-spec-table"></div>
<!--商品库存表-->
<div id="fairy-sku-table"></div>
<div>
<div>
<button 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>
<script>
layui.config({
base: './lay-module/', // 设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
}).use(['layer', 'form', 'skuTable',], function () {
var layer = layui.layer,
form = layui.form,
skuTable = layui.skuTable;
var skuTableObj = skuTable.render({
isAttributeElemId: 'fairy-is-attribute',
productTypeElemId: 'fairy-product-type',
attributeTableElemId: 'fairy-attribute-table',
specTableElemId: 'fairy-spec-table',
skuTableElemId: 'fairy-sku-table',
//商品规格模式 0单规格 1多规格
mode: 0,
//是否开启sku表行合并
rowspan: true,
//图片上传接口
uploadUrl: './json/upload.json',
//获取商品类型接口
productTypeUrl: './json/productTypeData.json',
//获取商品类型下的规格和属性接口
attrSpecUrl: './json/attrSpecData.json',
//创建规格接口
specCreateUrl: './json/specCreate.json',
//删除规格接口
specDeleteUrl: './json/specDelete.json',
//创建规格值接口
specValueCreateUrl: './json/specValueCreate.json',
//删除规格值接口
specValueDeleteUrl: './json/specValueDelete.json',
//sku数据接口
skuDataUrl: './json/skuData.json',
//单规格SKU表配置
singleSkuTableConfig: {
thead: [
{title: '销售价(元)', icon: 'layui-icon-cols'},
{title: '市场价(元)', icon: 'layui-icon-cols'},
{title: '成本价(元)', icon: 'layui-icon-cols'},
{title: '库存', icon: 'layui-icon-cols'},
{title: '状态', icon: ''},
],
tbody: [
{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: '状态不能为空'},
]
},
//多规格SKU表配置
multipleSkuTableConfig: {
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: '',
reqtext: ''
},
]
},
});
form.on('submit(submit)', function (data) {
//获取表单数据
console.log(data.field);
if (skuTableObj.getMode() == 0) {
//单规格
layer.alert(JSON.stringify(data.field), {title: '提交的数据'});
} else {
//多规格
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>更新时间：2021-12-16 00:44:50
PREVIOUS:
NEXT:
相关插件-图表,丰富的输入
轻量级图形报表插件JSCharts
JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。
图表
讨论这个项目（16）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
Y. 0
2024/7/8 16:12:01
-
设置的值怎么回显啊
Y.0
2024/7/8 16:41:58
-
回显后没有默认选中规格值
Y.0
2024/7/8 17:48:41
-
排序后无法回显数据
风 ， 吹凉了夜 1
2023/5/18 16:02:57
大佬，我补充一点将skuData转成对象的代码，如有不妥的地方还望指教
function test1(str) { //str即表单提交的data.field
const params = new URLSearchParams(str);
const obj = {};
for (const [key, value] of params) {
let k = key.slice(0, 4);
if (k != "skus") continue;
const matches = key.match(/skus\[(\d+-\d+-\d+-\d+)\]\[(\w+)\]/);
const sku = matches[1];
const prop = matches[2];
if (!obj[sku]) {
obj[sku] = {};
}
obj[sku][prop] = value;
}
console.log(obj);
}
回复
J 0
2022/10/19 10:58:52
-
为什么添加规格和规格值会报错啊，一直显示这个Status:405，error，请稍后再试！
风 ， 吹凉了夜0
2023/5/18 16:00:04
-
请详细阅读源码
风 ， 吹凉了夜0
2023/5/18 16:00:04
-
请详细阅读源码
字研字禹ら 0
2022/10/1 13:20:50
-
大佬, 能不能在生成sku笛卡尔积中增加一个删除的操作, 因为有些时候, 商品的某些规格组合实际是不存在的.
Y.0
2024/7/8 16:09:01
-
不存在就禁用啊。
浅花若萱丶落离殇° 0
2022/5/26 17:31:26
-
请教一下，最新的更新2022-05-16 00:50:33，这个我要更新那个文件呢？
cshaptx48690
2022/6/22 9:18:39
-
skuTable.js文件
Assassin 0
2022/1/16 15:19:03
-
你好是不是通过ajax直接将data.field提交到后台，可是json对象中有中括号，后台php解析json字符串的时候解析不了
cshaptx48691
2022/1/17 15:42:36
-
建议使用 application/x-www-form-urlencoded 这种方式发起 ajax 请求 那么 $_POST 可以直接获取到数组形式的数据 而用 application/json 这种方式发起的 ajax 请求 处理数据上会比较麻烦
Assassin0
2022/1/19 14:01:31
-
最后用form 提交搞定了 ，但是发现了一个问题 可遇不可求 有时候添加规格值渲染不出来，必须在选择一下商品类型才能出来，5天我遇到了3回，想复现这个问题不好复现，谢谢作者这个插件很实用
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
