商品SKU,LAYUI模块化SKU,商品多规格,商品多规格上传图片

商品SKU,LAYUI模块化SKU,商品多规格,商品多规格上传图片

标签: sku  layui  js  jquery

本插件基于layui 模块化导入导出

针对后台管理系统为layui构建的

解决了 layui后台管理中 电商多规格商品上传图片等功能

git地址 https://gitee.com/zhangguiyang/laySku
github地址 https://github.com/Mrzhangguiyang/laySku

57aa567b3f9f423042f953e441d485b1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8” />
  5. <title>laySku</title>
  6. <meta name=“viewport” content=“width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
  7. <link rel=“stylesheet” type=“text/css” href=“layui/layui/css/layui.css” />
  8. </head>
  9. <body>
  10. <div class=“layui-form” id=“SKU_TYPE”></div>
  11. <div id=“skuTable”></div>
  12. <div class=“layui-form-item”>
  13. <div class=“layui-input-block”>
  14. <button id=“skuSubmit” type=“submit” class=“layui-btn” lay-submit=“” lay-filter=“demo1”>立即提交</button>
  15. </div>
  16. </div>
  17. </body>
  18. <script src=“layui/layui/layui.js”></script>
  19. <script>
  20. layui.config({
  21. base: ‘js/’ //静态资源所在路径
  22. }).extend({
  23. server: ‘server’,
  24. laySku: ‘laySku’
  25. }).use([‘server’,‘laySku’],function(exports) {
  26. var server = layui.server,
  27. table = layui.table,
  28. form = layui.form,
  29. laySku = layui.laySku,
  30. $ = layui.$;
  31. var sku = new laySku({
  32. id:‘SKU_TYPE’,//checkbox选择框
  33. container_id:‘skuTable’,//容器id渲染table
  34. data:server.data,//数据类型
  35. rowReturn:true,//是否绑定tr单击事件
  36. rowMaster:function(res){//绑定tr单击事件执行的操作
  37. console.log(res)
  38. },
  39. btn:‘skuSubmit’,//按钮提交
  40. skuSubmitBind:function(res){//提交之后的某些操作
  41. console.log(res)
  42. },
  43. uploadSrc:‘https://httpbin.org/post’,//图片上传接口
  44. uploadBefore:function(obj,elem){//上传之前的操作
  45. obj.preview(function(index, file, result){
  46. elem.append(‘<img style=”width:38px;height:38px;object-fit:cover;” src=”http://xxh2019.oss-cn-beijing.aliyuncs.com/hmyp/JULoX1578887334705.jpg”>’)
  47. });
  48. },
  49. uploadDone:function(){//上传图片成功的操作
  50. },
  51. uploadError:function(){//上传图片失败的操作
  52. }
  53. })
  54. sku.init()
  55. })
  56. </script>