背景：
用于多规格商品的管理，点击多规格属性值时 组装sku属性值，生成对应的sku产品。
根据后台返回的sku数据，渲染到页面上，并且根据js来实现点击请求后台接口去组装数据的效果。
<div class="form-group multi">
<label class="col-sm-2 control-label"></label>
<div class="col-md-6 col-sm-10" id="skus">
<foreach name="skus" item="vo">
<span class="margin-right-20 input-width-100">{$vo.title}</span>
<foreach name="vo.value" item="v">
<label class="checkbox-inline">
<input type="checkbox" name="rows[goods][skus][{$vo.title}]" data-sku-key="{$vo.title}" data-sku-val="{$v}" value="{$v}">{$v}
</label>
</foreach>
<br><br>
</foreach>
</div>
</div>
$('#skus').change(function () {
const skus = getSkusVal();
if (skus.length > 0) {
$('#sku_items').show()
} else {
$('#sku_items').hide()
}
$.ajax({
url:"{:url('AdminGoods/getSkuHtml')}",
type:'POST',
dataType:"json",
data:JSON.stringify(skus),
success:function(res) {
$('.sku_html').html(res.data.html)
}
})
})
function getSkusVal() {
var val = []
$("#skus input[type='checkbox']").each(function (index, item) {
if ($(this).prop("checked")) {
const sku_key = $(this).data('sku-key');
const sku_val = $(this).data('sku-val');
val.push({
sku_key:sku_key,
sku_val:sku_val
});
}
});
return val;
}
上面通过js实现点击sku属性值 请求后台接口，在后台接口进行数据的组装。
use think\facade\View;
public function getSkuHtml($info = null)
{
View::engine()->layout(false);
if ($this->request->isAjax()) {
$params = file_get_contents('php://input');
$params = Json::decode($params);
$skuItems = (new GoodsFormatter())->formatterSkus($params);
$this->assign('sku_items', $skuItems);
$html = $this->fetch('admin_goods/get_sku_html');
$data = [
'html' => $html,
];
$this->success('成功', null, $data);
}
}
public function formatterSkus($skuAttrs)
{
$skuKeys = array_unique(array_column($skuAttrs, 'sku_key'));
$_skus = [];
foreach ($skuKeys as $key) {
foreach ($skuAttrs as $skuAttrVal) {
if ($key == $skuAttrVal['sku_key']) {
$_skus[$key][] = $skuAttrVal['sku_val'];
}
}
}
return combination(array_column($_skus, null));
}
/**
* 组装sku属性值
* @param $array
* @param $index
* @param $skuItems
* @return array
*/
function combination($array, $index = -1, $skuItems = [])
{
global $totalItem;
global $deepKey;
$totalItem = [];
if ($index < 0) {
$deepKey = count($array) - 1;
combination($array, 0, $skuItems);
} else {
if (0 == $index) {
$first = $array[$index];
foreach ($first as $key => $value) {
$totalItem[$key] = $value;
}
} else {
$first = $array[$index];
if (count($skuItems) >= count($first)) {
foreach ($first as $key => $value) {
foreach ($skuItems as $s => $v) {
$totalItem[] = $v.':'.$value;
}
}
} else {
if ($skuItems) {
foreach ($skuItems as $s => $v) {
foreach ($first as $key => $value) {
$totalItem[] = $v.':'.$value;
}
}
}
}
}
if ($index < $deepKey) {
combination($array, $index + 1, $totalItem);
}
}
return $totalItem;
}
最终得到的skuItems
然后在get_sku_html.html文件中渲染。
<div class="form-group" id="sku_items">
<label class="col-sm-2 control-label"></label>
<div class="col-md-8 col-sm-10">
<table class="table table-bordered table-hover">
<tr>
<td class="multi">规格</td>
<td>售价</td>
<td>市场价</td>
<td>成本价</td>
<td>库存</td>
<td>重量</td>
<td>体积</td>
<td class="multi" width="100">操作</td>
</tr>
<tbody>
<foreach name="sku_items" id="vo" key="k">
<notempty name="vo.id">
<input type="hidden" name="rows[products][{$k}][id]" value="{$vo.id|default=0}">
</notempty>
<tr>
<td></td>
<td><input type="text" class="form-control" data-key="price" name="rows[products][{$k}}][price]" value="{$vo.price|default=''}"></td>
<td><input type="text" class="form-control" data-key="market_price" name="rows[products][{$k}][market_price]" value="{$vo.market_price|default=''}"></td>
<td><input type="text" class="form-control" data-key="cost_price" name="rows[products][{$k}][cost_price]" value="{$vo.cost_price|default=''}"></td>
<td><input type="text" class="form-control" data-key="stock" name="rows[products][{$k}][stock]" value="{$vo.stock|default=''}"></td>
<td><input type="text" class="form-control" data-key="weight" name="rows[products][{$k}][weight]" value="{$vo.weight|default=''}"></td>
<td><input type="text" class="form-control" data-key="volume" name="rows[products][{$k}][volume]" value="{$vo.volume|default=''}"></td>
<td>
<a class="del_value">删除</a>
</td>
</tr>
</foreach>
</tbody>
</table>
</div>
</div>
