layui实现商品sku过滤选择编辑表单提交效果代码
代码语言:html
所属分类:表单美化
代码描述:layui实现商品sku过滤选择编辑表单提交效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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 type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> </head> <body> <div class="layui-container"> <form action="" class="layui-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> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> <script> /* * Name: skuTable * Author: cshaptx4869 * Project: https://github.com/cshaptx4869/skuTable */ layui.define(['jquery', 'form', 'upload', 'layer'], function (exports) { "use strict"; var $ = layui.jquery, form = layui.form, upload = layui.upload, layer = layui.layer, MOD_NAME = 'skuTable'; class SkuTable { options = { skuIcon: '//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90', uploadUrl: '', specData: [], skuData: {}, 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: '', reqtext: ''}, ] } }; constructor(options) { this.options = $.extend(this.options, options); this.renderSpecTable(); this.renderSkuTable(); this.listen(); } listen() { var that = this; /** * 监听所选规格值的变化 */ form.on('checkbox(fairy-spec-filter)', function (data) { var specData = []; $.each($('.fairy-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).data('id'), title: $(this).find('td').eq(0).text(), child: child}; specData.push(specItem); }); that.options.specData = specData; that.renderSkuTable(); }); /** * 监听批量赋值 */ $(document).on('click', '.fairy-sku-table thead tr th i', function () { var that = this; layer.prompt({title: $(that).parent().text().trim() + '批量赋值'}, function (value, index, elem) { $.each($('.fairy-sku-table tbody tr'), function () { $(this).find('td').eq($(that).parent().index()).children('input').val(value); }); layer.close(index); }); }); } /** * 渲染规格表 */ renderSpecTable() { var table = '<table class="layui-table fairy-spec-table"><thead><tr><th>规格名</th><th>规格值</th></tr></thead><tbody>'; $.each(this.options.specData, function (index, item) { table += '<tr>'; table += `<td data-id="${item.id}">${item.title}</td>`; table += '<td>'; $.each(item.child, function (key, value) { table += `<input type="checkbox" title="${value.title}" lay-filter="fairy-spec-filter" value="${value.id}" ${value.checked ? 'checked' : ''}>`; }); table += '</td>'; table += '</tr>'; }); table += '</tbody></table>'; $('.fairy-spec-table').replaceWith(table); form.render(); } /** * 渲染sku表 */ renderSkuTable() { var that = this, table = '<table class="layui-table fairy-sku-table">'; if ($('.fairy-spec-table tbody input[type=checkbox]:checked').length) { var prependThead = [], prependTbody = []; $.each(this.options.specData, function (index, item) { var isShow = item.child.some(function (value, index, array) { return value.checked; }); if (isShow) { prependThead.push(item.title); var prependTbodyItem = []; $.each(item.child, function (key, value) { if (value.checked) { prependTbodyItem.push({id: value.id, title: value.title}); } }); prependTbody.push(prependTbodyItem); } }); table += '<colgroup><col width="70">'.repeat(prependThead.length + 1) + '</colgroup>'; table += '<thead>'; if (prependThead.length > 0) { var theadTr = '<tr>'; theadTr += prependThead.map(function (t, i, a) { return '<th>' + t + '</th>'; }).join(''); this.options.skuTableConfig.thead.forEach(function (item) { theadTr += '<th>' + item.title + (item.icon ? ' <i class="layui-icon ' + item.icon + '" style="cursor: pointer;" title="批量赋值"></i>' : '') + '</th>'; }); theadTr += '</tr>'; table += theadTr; } table += '</thead>'; 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) { var tr = '<tr>'; tr += item.title.split('-').map(function (t, i, a) { return '<td>' + t + '</td>'; }).join(''); that.options.skuTableConfig.tbody.forEach(function (c) { switch (c.type) { case "image": tr += '<td>&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0