easyui-switchbutton结合datagrid

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参数修改即可

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值