skuTable 动态生成sku表（原创）

所属分类： JQ特效输入自动完成

查看演示立即下载

插件描述：基于Layui 的 SkuTable 组件,根据配置动态生成 sku 表。

更新时间：2021-12-08 20:39:24

更新说明：增加sku图片移入放大功能

使用说明：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

<!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>
    <form action="" class="layui-form fairy-form">
        <!-- sku参数表 -->
        <div>
            <label>规格：</label>
            <div>
                <div id="fairy-spec-table"></div>
            </div>
        </div>
        <!-- 动态sku表 -->
        <div>
            <label>SKU表：</label>
            <div>
                <div id="fairy-sku-table"></div>
            </div>
        </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(['form', 'skuTable'], function () {
        var form = layui.form, skuTable = layui.skuTable;
        //注意！！！ 注意！！！ 注意！！！
        //如果配置了相关接口请求的参数，请置本示例于服务器中预览，不然会有浏览器跨域问题
        //示例中的json文件仅做格式返回参考，若多次执行添加规格后再为新增后的规格添加规格值，会发现所有新增的规格都增加了该规格值。注意！此处并非是bug，原因是因为示例中返回的新增规格值id是重复的，而在正常接口请求每次返回的新增规则id是不一样的
        var obj = skuTable.render({
            //规格表容器id
            specTableElemId: 'fairy-spec-table',
            //sku表容器id
            skuTableElemId: 'fairy-sku-table',
            //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}
                    ]
                }
            ],
            //获取规格数据接口地址，如果为空或者不配置则使用 specData 参数配置
            //接口要求返回格式参考 specData.json
            // specDataUrl: './json/specData.json',
            //sku数据
            //新增的时候为空对象
            //编辑的时候可以从后台接收，会自动填充sku表，可以去掉注释看效果
            // skuData: {
            //     "skus[1-4-8][picture]": "/",
            //     "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"
            // },
            //获取SKU数据接口地址，如果为空或者不配置则使用skuData配置
            //接口要求返回格式参考 skuData.json
            // skuDataUrl: './json/skuData.json',
        });
        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>

更新时间：2021-12-07 21:44:30

更新说明：增加specDataUrl、skuDataUrl、skuNameType、skuNameDelimiter配置参数配置参数配置参数

更新时间：2021-12-07 00:03:33

更新说明：修复拖拽过渡效果无效问题

更新时间：2021-12-06 01:25:45

更新说明：增加规格/规格值删除功能

更新时间：2021-12-04 00:40:10

更新说明：增加规格拖拽功能

更新时间：2021-09-12 22:11:58

更新说明：增加specTableElemId和skuTableElemId配置参数

更新时间：2021-08-13 01:01:34

更新说明：修改layui的引入方式为本地文件等

更新时间：2021-08-12 00:05:55

更新说明：增加是否开启规格表增加规格/规格值的配置参数

更新时间：2021-08-07 20:44:56

更新说明：增加sku表相同属性值是否合并行的配置参数

更新时间：2021-08-06 22:24:03

更新说明：修复规格参数改变时sku表数据被重置问题

更新时间：2021-08-06 00:18:44

示例

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!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>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/lay                            特别申明：
			本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
			本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
			如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com


					


					
												
							
						        上一个特效：
						        jquery swiper轮播图						    
							
						        下一个特效：
						        原生js自定义雷达图(原创)						    
						
					
				
			
			
									
				    
				        				            
				                
				                    
				                    jQuery模糊查询插件
				                
				            
				        				            
				                
				                    
				                    身份证校验及提取信息插件IDCardPaser(原创)
				                
				            
				        				            
				                
				                    
				                    jQuery指定内容高亮(原创)
				                
				            
				        				            
				                
				                    
				                    jQuery房贷计算器
				                
				            
				        				            
				                
				                    
				                    Isotope.js 神奇的动态布局库
				                
				            
				        				        
				    
							
		

		





		2018-2023 凤凰网络版权所有.