Layui+mvc+ef的switch开关传值改变状态前台后台完整功能

前台

在layui的数据表格中加入switch开关按钮

  { field: 'IsOpen', title: "权限", width: 200, align: 'center', templet: switchTpl},

绑定按钮  switchTpl 是 tempet 中定义的

<script id="switchTpl" type="text/html">
    <input type="checkbox" name="state" value={{d.IsOpen}} lay-skin="switch" lay-text="开启|关闭" pid={{d.PersonId}} lay-filter="state" {{ d.IsOpen == '1' ? 'checked' : '' }} />
</script>

加了这俩之后前台就已经能显示了,其中d.IsOpen 是数据库中的字段   注意 pid 是当前行的id值  这是非常重要的

事件

 
        //switch开关事件
        form.on('switch(state)', function (data) {
            this.checked ? data.value = 1 : data.value = 0; //更改选中和未选中时,传动后台的值,此时选中传1,未选中传0。
            layer.msg('权限:' + (this.checked ? '开启' : '关闭'), {
                offset: '6px',
                time: 500,
            });
            var kg = data.value; //将该值传到后端即可使用。(如,直接在ajax中传值)
            var id = $(this).attr('pid');//获取当前行的id值,pid是在上面定义的
           
            $.post("/Person/open", { id: id,isopen: kg }, function (data) {
                var res = JSON.parse(data);
                if (res.code == 0) {
                  
                    table.reload('idTest', { page: { curr: $(".layui-laypage-em").next().html() } })//删除后刷新table
                    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                    //删除操作

                }
                else {
                    alert("操作失败!");
                }
            });
        });
       

form报错的要在实例化一下

  layui.use('table', function () {
        var table = layui.table;//实例化layui 表格
        var layer = layui.layer;
        var form = layui.form;
        $ = layui.$;

mvc后台

   public ActionResult open(int id, int isopen)
        {
            if (id > 0 )
            {
                XinHua_2021Entities db = new XinHua_2021Entities();
                XH_PersonInfo user = db.XH_PersonInfo.Where(d => d.PersonId == id).FirstOrDefault<XH_PersonInfo>();
                if (isopen == 1)
                {
                    user.IsOpen = 1;
                }
                else
                {
                    user.IsOpen = 0;
                }
               
                if (db.SaveChanges() > 0)
                {
                    return Json("{\"code\": 0,\"msg\": \"\",\"data\": {\"src\": \"\"}}");
                }
                else
                {
                    return Json("{\"code\": 1,\"msg\": \"\",\"data\": {\"src\": \"\"}}");
                }



            }
            else
            {
                return Content("操作失败!");
            }

        }

效果图

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值