layui监听表单开关后做出询问框

最新推荐文章于 2023-06-10 05:30:07 发布

杨葱儿

最新推荐文章于 2023-06-10 05:30:07 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

分类专栏： Layui

本文链接：https://blog.youkuaiyun.com/weixin_44285250/article/details/96864208

Layui 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在layui框架中使用表格控件实现商品上下架功能。通过监听表格中的开关状态变化，弹出确认对话框并执行相应的后端API调用以更新商品状态。文章详细展示了具体的JavaScript代码实现及HTML结构。

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

<div class="layui-row" style="margin-top: 6px">
	<div class="layui-col-xs12">
		<table id="lists" lay-filter="demoEvent"></table>
	</div>
</div>

cols: [[ //表头
        {field: 'sg_status', title: '上下架',templet:"#titleTpl"}
    ]]





layui.use('form', function(){
    var form = layui.form
        ,layer = layui.layer
    //监听指定开关
    form.on('switch(switchTest)', function(data){
        var this_data = data.othis;
	//          console.dir($(this_data).text());
        var txt = '';
        if ($(this_data).text() == 'OFF'){
            txt = '下架后修理厂均无法采购，是否确认？';
        }else{
            txt = '是否确认上架此商品？';
        }
        //询问框
        layer.confirm(txt, {
            btn: ['确定','取消'], //按钮
            cancel: function(index, layero){//右上角关闭后执行
                ser_on();
            }
        }, function(){//确定
            var input = data.elem;
            var id =  $(input).attr("data-id");
            $.post('{:U("api/goods/update_status")}',{'swg_id':id},function(data){
                //console.log(data);
                if(data.success){
                    layer.msg(data.msg);
                }else{
                    layer.msg(data.msg);
                    function refreshCount() {
                        ser_on();
                    }
                }
            });
        }, function(){//取消
            ser_on();
        });
    });
});

<script type="text/html" id="titleTpl">
	{{#  if(d.wg_status == 1){ }}
	<div class="layui-form-item"><input type="checkbox"  lay-filter="switchTest" data-id="{{d.wg_id}}" checked="" name="switch" lay-skin="switch" lay-text="ON|OFF"></div>
	{{#  } else { }}
	<div class="layui-form-item"><input type="checkbox"  lay-filter="switchTest" data-id="{{d.wg_id}}"  name="switch" lay-skin="switch" lay-text="ON|OFF"></div>
	{{#  } }}
</script>