当前位置：首页 > article >正文

Layui 列表中switch按钮的使用

article 2025/2/21 9:17:13

1 定义模板

其中行id列名、需要判定的列名要修改后才能用

<script type="text/html" id="yesOrNo-switch">
    <input type="checkbox" value="{{= d.行id列名 }}" title="是|否" lay-skin="switch" lay-filter="yesOrNo-value" {{= d.需要判定的列名=='1'?'checked':''}}>
</script>

2 使用模板

使用 templet 关联模板

{
    field: 'state',
    title: '是否达成',
    templet:'#yesOrNo-switch'
},

3 事件触发

form.on('switch(yesOrNo-value)', function(obj){
let data = {
    id : this.value,
    state: obj.elem.checked?'1':'0'
};
$.ajax({
    url: '/xxx/xxx/updateState',
    data: JSON.stringify(data),
    dataType: 'json',
    contentType: 'application/json',
    type: 'put',
    success: function (result) {
        if (result.success) {
            layer.msg("修改成功", {icon: 1, time: 1000}, function () {
            });
        } else {
            layer.msg(result.msg, {icon: 2, time: 1000});
        }
    }
});
});