表格内滑块按钮

最新推荐文章于 2023-08-26 15:29:22 发布

帆仔哟

最新推荐文章于 2023-08-26 15:29:22 发布

阅读量175

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/fanzaiyo/article/details/126269514

版权

按钮：

<script type="text/html" id="app_server_status">

    <input type="checkbox" name="operation" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="app_server_status"
           {{ d.operation== 1 ? 'checked' : '' }}>
</script>

js：

var goodtable = table.render({
                elem: '#demo'
                , height: 300   //高度
                , width: 1200    //宽度
                , url: '/user/getUser' //数据接口
                , title: '用户表'
                , page: true //开启分页
                , limit: 5
                , limits: [5, 10]
                , cols: [
                    [ //表头
                        {checkbox: true, fixed: 'left'}
                        , {field: 'id', title: '编号', width: 80, sort: true, fixed: 'left'}
                        , {field: 'domainAccount', title: '用户账号', width: 120}
                        , {field: 'userName', title: '用户姓名', width: 120, sort: true}
                        , {field: 'departmentName', title: '部门名称', width: 120}
                        , {field: 'postNo', title: '岗位', width: 120}
                        , {
                        field: 'operation',
                        title: '操作',
                        width: 120,
                        templet: '#checkboxTpl',
                        unresize: true,
                        hide: true
                    }
                        , {
                        field: 'operation',
                        title: '操作',
                        align: 'center',
                        templet: '#app_server_status',
                        unresize: true,
                        width: 100
                    }
                        , {field: 'userStatus', title: '用户状态', width: 100}
                        , {field: 'braceletInformation', title: '手环信息', width: 100}
                        , {field: 'createTime', title: '创建时间', width: 180, sort: true}
                        , {field: 'description', title: '描述', width: 100}
                    ]
                ]
            });
form.on('switch(app_server_status)', function (data) {
                console.log(this.value);
                console.log(data.elem.checked); //开关是否开启，true或者false
                var boo = data.elem.checked;
                console.log(data.value); //开关value值，也可以通过data.elem.value得到
                $.ajax({
                    type: "post",
                    async: false,
                    data: {"id": this.value, boo},
                    url: "/user/updateUserOperation",
                    success: function (data) {
                        if (data === true) {
                            layer.msg("修改成功")
                        } else {
                            layer.msg("本人不能修改本人状态")
                        }
                    },
                });
            })

注意id，class对应