首先，需要引入
layui库和jQuery库：
```
html
<link rel="stylesheet" href="https://cdn.staticfile.org/
layui/2.5.6/css/
layui.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/
layui/2.5.6/
layui.all.js"></script>
```
然后，我们可以通过以下方式来实现一个
SKU选择器：
1. 定义属性和
SKU列表
```
javascript
var attrs = [
{name: '尺码', values: ['S', 'M', 'L', 'XL']},
{name: '颜色', values: ['红色', '黄色', '蓝色']}
];
var
skus = [
{attrs: ['S', '红色'], price: 100, stock: 10},
{attrs: ['S', '黄色'], price: 110, stock: 5},
{attrs: ['S', '蓝色'], price: 120, stock: 2},
{attrs: ['M', '红色'], price: 130, stock: 7},
{attrs: ['M', '黄色'], price: 140, stock: 8},
{attrs: ['M', '蓝色'], price: 150, stock: 3},
{attrs: ['L', '红色'], price: 160, stock: 6},
{attrs: ['L', '黄色'], price: 170, stock: 4},
{attrs: ['L', '蓝色'], price: 180, stock: 1},
{attrs: ['XL', '红色'], price: 190, stock: 0},
{attrs: ['XL', '黄色'], price: 200, stock: 0},
{attrs: ['XL', '蓝色'], price: 210, stock: 0}
];
```
2. 渲染属性选择器
```
javascript
var $attrs = $('#attrs');
$.each(attrs, function(i, attr) {
var $attr = $('<div class="
layui-form-item"></div>');
$attr.append('<label class="
layui-form-label">'+attr.name+'</label>');
var $values = $('<div class="
layui-input-block"></div>');
$.each(attr.values, function(j, value) {
$values.append('<input type="checkbox" name="'+attr.name+'" title="'+value+'">');
});
$attr.append($values);
$attrs.append($attr);
});
```
3. 监听属性变化，更新
SKU信息
```
javascript
$('#attrs input').on('change', function() {
var selectedAttrs = [];
$('#attrs input:checked').each(function() {
selectedAttrs.push($(this).attr('title'));
});
var
sku = get
SKU(selectedAttrs);
$('#price').text(
sku ?
sku.price : '未知');
$('#stock').text(
sku ?
sku.stock : '0');
});
function get
SKU(selectedAttrs) {
var
sku = null;
$.each(
skus, function(i, _
sku) {
if (matchAttrs(_
sku.attrs, selectedAttrs)) {
sku = _
sku;
return false;
}
});
return
sku;
}
function matchAttrs(attrs1, attrs2) {
if (attrs1.length != attrs2.length) {
return false;
}
for (var i = 0; i < attrs1.length; i++) {
if (attrs1[i] != attrs2[i]) {
return false;
}
}
return true;
}
```
4. 渲染价格和库存信息
```
html
<div class="
layui-form-item">
<label class="
layui-form-label">价格</label>
<div class="
layui-input-block">
<span id="price">未知</span>元
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">库存</label>
<div class="
layui-input-block">
<span id="stock">0</span>件
</div>
</div>
```
完整的代码如下：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title>
SKU选择器</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/
layui/2.5.6/css/
layui.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/
layui/2.5.6/
layui.all.js"></script>
</head>
<body>
<form class="
layui-form
layui-form-pane" style="margin: 20px;">
<div id="attrs"></div>
<div class="
layui-form-item">
<label class="
layui-form-label">价格</label>
<div class="
layui-input-block">
<span id="price">未知</span>元
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">库存</label>
<div class="
layui-input-block">
<span id="stock">0</span>件
</div>
</div>
</form>
<script>
var attrs = [
{name: '尺码', values: ['S', 'M', 'L', 'XL']},
{name: '颜色', values: ['红色', '黄色', '蓝色']}
];
var
skus = [
{attrs: ['S', '红色'], price: 100, stock: 10},
{attrs: ['S', '黄色'], price: 110, stock: 5},
{attrs: ['S', '蓝色'], price: 120, stock: 2},
{attrs: ['M', '红色'], price: 130, stock: 7},
{attrs: ['M', '黄色'], price: 140, stock: 8},
{attrs: ['M', '蓝色'], price: 150, stock: 3},
{attrs: ['L', '红色'], price: 160, stock: 6},
{attrs: ['L', '黄色'], price: 170, stock: 4},
{attrs: ['L', '蓝色'], price: 180, stock: 1},
{attrs: ['XL', '红色'], price: 190, stock: 0},
{attrs: ['XL', '黄色'], price: 200, stock: 0},
{attrs: ['XL', '蓝色'], price: 210, stock: 0}
];
var $attrs = $('#attrs');
$.each(attrs, function(i, attr) {
var $attr = $('<div class="
layui-form-item"></div>');
$attr.append('<label class="
layui-form-label">'+attr.name+'</label>');
var $values = $('<div class="
layui-input-block"></div>');
$.each(attr.values, function(j, value) {
$values.append('<input type="checkbox" name="'+attr.name+'" title="'+value+'">');
});
$attr.append($values);
$attrs.append($attr);
});
$('#attrs input').on('change', function() {
var selectedAttrs = [];
$('#attrs input:checked').each(function() {
selectedAttrs.push($(this).attr('title'));
});
var
sku = get
SKU(selectedAttrs);
$('#price').text(
sku ?
sku.price : '未知');
$('#stock').text(
sku ?
sku.stock : '0');
});
function get
SKU(selectedAttrs) {
var
sku = null;
$.each(
skus, function(i, _
sku) {
if (matchAttrs(_
sku.attrs, selectedAttrs)) {
sku = _
sku;
return false;
}
});
return
sku;
}
function matchAttrs(attrs1, attrs2) {
if (attrs1.length != attrs2.length) {
return false;
}
for (var i = 0; i < attrs1.length; i++) {
if (attrs1[i] != attrs2[i]) {
return false;
}
}
return true;
}
</script>
</body>
</
html>
```
SKU添加 https://gitee.com/cshaptx4869/sku-table
格式
本文介绍了如何利用layui框架实现Tab页面的切换功能，并详细讲解了结合SKU表格的添加操作。通过引用layui的Tab组件和参考提供的SKU表格项目链接，可以创建动态的页面切换效果并进行库存单元(SKU)的管理。
扫一扫
2658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
