[JavaScript知识库]easyui-switchbutton结合datagrid

需求

实现列表显示数据下，单行显示开关按钮，并且可以切换

实现代码

}, {
                title: '是否生效',
                field: 'isEnable',
                width: 180,
                align: "center",
                formatter: function (value, row, index) {
                    // if (value == 'Y') {
                    //     // return '<span>生效</span>';
                    //     return '<input class="easyui-switchbutton" data-options="onText:\'Yes\',offText:\'No\'">';
                    // } else if (value == 'N') {
                    //     // return '<span >不失效</span>';
                    //     return '<input class="easyui-switchbutton" data-options="onText:\'Yes\',offText:\'No\'">';
                    // } else {
                    //     return value;
                    // }

                        if (value === 'Y') {//生效
                            return "<form><input id='" + row.clientId + "'  class='easyui-switchbutton switchBtn' \" checked ></form>"
                        } else if (value === 'N') {//不生效
                            return "<form><input id='" + row.clientId + "'  class=\"easyui-switchbutton switchBtn\" data-options=\"onText:'启用',offText:'禁用' \"></form>"
                        }

                }
            }, {
                title: '客户端网络域名',
                field: 'domainName',
                width: 180,
                align: "center"
            }]],

表格中写完上述代码，需要加上下列代码 $(".switchBtn").switchbutton({才能在表格中显示开关按钮，没加的话，开关按钮显示为空

}, {
                title: '客户端网络域名',
                field: 'domainName',
                width: 180,
                align: "center"
            }]],
            onLoadSuccess: function (data) {
                $('.customButton').linkbutton();
                $(".switchBtn").switchbutton({
                    height: 18,
                    onText: "生效",
                    offText: "不生效",
                    onChange: function (checked) {
                        //Y启用 true N禁用 false
                        var state = 'Y';
                        if (!checked) {
                            state = 'N';
                        }
                        var params = {
                            id: $(this).attr("id"),
                            isEnable: state
                        }
                        $.messager.confirm("系统信息", "确定" + (state === 'N' ? '不生效' : '生效') + "该用户吗？", function (r) {
                            if (r) {
                                $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    url: ctx + "/api/updateEnable",
                                    beforeSend: function () {
                                        // 加载遮罩层
                                        $.messager.progress({
                                            text: '保存中...'
                                        });
                                    },
                                    data: params,
                                    success: function (data) {
                                        if (data.code === 0) {
                                            userector.datagrid('reload');
                                            $.messager.show({
                                                title: '提示',
                                                msg: data.msg
                                            });
                                        } else {
                                            $.messager.alert("错误", data.msg, "error");
                                        }
                                        //关闭遮罩层
                                        $.messager.progress('close');
                                    }
                                });
                            }
                            usector.datagrid('reload');
                        });
                    }

获取参数代码如下
var params = {
clientId: $(this).attr(“id”),
isEnable: state
}
后端接口就正常收取实体或者STRING参数修改即可