在layui中按钮绑定点击事件

最新推荐文章于 2024-03-27 12:34:06 发布

原创最新推荐文章于 2024-03-27 12:34:06 发布 · 2.2w 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍如何利用LayUI框架实现商品发布功能，包括导入必要的CSS和JS文件，编写HTML结构，并通过JavaScript控制商品发布弹窗及数据提交等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导入css样式

  <link rel="stylesheet" href="https://www.3ftc.com/theme/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="https://www.3ftc.com/theme/sys/style/admin.css" media="all">

2.导入js

  <script src="https://www.3ftc.com/theme/layui/layui.js"></script>

3.html

    <button class="layui-btn layuiadmin-btn-forum-list" data-type="add">发布商品</button>

4.js

layui.config({
    base: 'https://www.3ftc.com/theme/sys/js/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'upload'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table
    ,upload = layui.upload;

  
		//事件
    var active = {   
      add: function(){
        layer.open({
           type: 2    // 0：信息框，默认 1：页面层 2：iframe层 3：加载层 4：tips层
          ,title: '添加商品'
          ,content: '${ROOT}/sys/goods/form'
          ,maxmin: false
          ,area: ['800px', '550px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-food-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);
            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
            	var c = iframeWindow.layui.layedit.getContent(index);
            	data.field.remark = c;
              var field = data.field; //获取提交的字段
              $.ajax({
                  url:"${ROOT}/sys/goods/save",
                  data:field,
                  type:'post',
                  dataType:'json',
                  success:function(json) {
                      if(json.code == 0) {
                    	  layer.msg(json.msg, { icon: 1, time: 2000 });
	        				$(".layui.table").not('.header').parents('tr').next().remove();
	        				setTimeout(function () {
	        					window.location.href = "${ROOT}/sys/goods/list";
	                        }, 1500);
			              layer.close(index); //关闭弹层
                      } else {
                          layer.msg(json.msg);
                      }
                  }
              });
            });  
            
            submit.trigger('click');
          }
        }); 
      },
     
    };
	
	
	
	 $('.layui-btn').on('click', function () {   
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
  });
  
  
    
  });