layui的表格的状态switch实现

最新推荐文章于 2024-11-22 12:01:23 发布

原创最新推荐文章于 2024-11-22 12:01:23 发布 · 448 阅读

CC 4.0 BY-SA版权

这段代码展示了如何在用户界面中使用layui的switch组件来切换用户状态，并通过Ajax发送PUT请求到后台更新用户状态。当开关被选中时，status设置为1，反之为0。请求成功后会显示'操作成功'的提示信息，失败则显示'操作失败'。

templet: function (d) {
        if (d.status == 1) {
            return '<input type="checkbox" name="status" checked lay-filter="status" lay-skin="switch" lay-text="启用|停用" id=' + d.id + '>'
        } else if (d.status == 0) {
            return '<input type="checkbox" name="status" lay-filter="status" lay-skin="switch" lay-text="启用|停用" id=' + d.id + '>'
        }
    }

form.on('switch', function (data) {
    var status = 0;
    var id = data.elem["id"];
    if (data.elem.checked) {
        status = 1;
    }
    var param = {};
    param.id = id;
    param.status = status;
    var reqObj = JSON.stringify(param);
    var access_token = localStorage.getItem("super_token");
    $.ajax({
        type: "PUT",
        url: setter.domain + '/system/user/change-status',
        contentType: "application/json",
        data: reqObj,
        dataType: "json",
        headers: {
            "token": access_token
        },
        success: function (res) {
            layer.msg("操作成功");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg("操作失败");
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
});