您现在的位置是：网站首页> php专栏扩展知识

php后台列表使用layui switch开关

亦然2019-09-28 13:56:17【扩展知识】人已围观

简介switch开关是后台必不可少的一个html组件。本文记录一下我常用的通过layui来实现状态切换的方法。

在后台开发中，经常用到的就是使用开关控制状态的改变，便于管理。效果如下:

示例代码如下:

1.后台列表页面引入layui资源文件，可以使用layui的cdn地址。

2.列表页面

列表新增一行，用来显示状态。

<td>
<form class="layui-form" action="">
   <input type="checkbox" {if condition="$vo.pay_status eq 1"} checked {/if} name="switch" lay-skin="switch" lay-filter="switchTest" data-url="{:url('news_log/field',array('ids'=>$vo.id))}" lay-text="已支付|未支付">
</form>
</td>

js渲染switch开关，并处理响应事件。

<script>
 layui.use(['form'], function(){
  var form = layui.form
   ,layer = layui.layer
  //监听指定开关
  form.on('switch(switchTest)', function(data){
         var url = $(this).data('url');
         var status = data.elem.checked;//开关是否开启，true或者false
            //后台我需要的是0或1，所以预先在js中处理change的值
            if(status) {
                status = 1;
            } else {
                status = 0;
            }
            $.post(url, {status: status}, function(res) {
                if(res.code) {
                    layer.msg(res.msg);
                }
            });
        });
 });
</script>

3.控制器中处理事件，并返回处理结果。

 public function field()
    {
        if ($this->request->isPost()) {
            $data['id'] = $this->request->param('ids');
            $data['status'] = $this->request->param('status');
            //更新数据
            $result = Db::name('news_log')->where('id',$data['id'])->update(array('pay_status'=>$data['status']));
            if ($result) {
                $msg = '状态设置成功';
                return json(['code'=>1,'msg'=>$msg]);
            }else{
            $res['code'] = 0;
            $res['msg'] = '这是个意外！';
            return $res;
        }
        }
    }

补充:swith也可以增加一个询问框，当用户点击更改状态时，会让用户确认是否更改。效果如下：

实现代码如下:

 layui.use(['form', 'jquery', 'layer'], function () {
            var form = layui.form;
            var jquery = layui.jquery;
            var layer = layui.layer;
            //监听开关事件
            form.on('switch(switchTest)', function (data) {
                var url = $(this).data('url');
                var contexts;
                var x = data.elem.checked;//判断开关状态
                if (x==true) {
                    contexts = "你确定要启动么";
                    status = 1;
                } else {
                    contexts = "你确定要关闭么";
                    status = 0;
                }
                layer.open({
                    content: contexts
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        $.post(url, {status: status}, function(res) {
                            if(res.code) {
                                layer.msg(res.msg);
                            }
                        });
                        //按钮【按钮一】的回调
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                         $.post(url, {status: status}, function(res) {
                            if(res.code) {
                                layer.msg(res.msg);
                            }
                        });
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    , cancel: function () {
                        //右上角关闭回调
                        data.elem.checked = !x;
                        form.render();
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
                return false;
            });
        });

很赞哦!()

上一篇：跨站脚本：反射型XSS

下一篇：博客网页上添加live2D看板娘