TP5 layui 复选框的 add 和 edit

荆轲刺秦王

今天在写复选框的时候，遇到一个小问题，纠结了半天，所以特地在此记录下来。

前台模版用的 layui 后台框架是 TP5.0

插个话题，TP5.0 和 TP5.1 有一点区别

1. input 助手函数，接收数组的时候

$info = input('info/a');  //TP5.0版本接收数组要加/a  5.1则不用

2. Composer 安装验证码的时候，要指定 1 的版本

两个小细节，需要注意。

言归正传：

先看一下，最终效果：

数据库的相对应的字段是 varchar 数据类型为：1,2,3    1代表标间  2代表双人间  3代表三人间 中间用逗号隔开

废话不多说，直接上代码：

edit :

<div class="layui-form-item">
            <label class="layui-form-label">酒店房间类型</label>
            <div class="layui-input-block">
                <input type="checkbox" name="info[room_type]" value="1" title="标间" {eq name="room_type_1" value="1"}checked{/eq}>
                <input type="checkbox" name="info[room_type]" value="2" title="双人间" {eq name="room_type_2" value="2"}checked{/eq}>
                <input type="checkbox" name="info[room_type]" value="3" title="三人间" {eq name="room_type_3" value="3"}checked{/eq}>
            </div>
        </div>

依旧会有编辑器的报错信息，但是不要在意，不影响正常运行。

相对应的控制器 edit 的代码：

public function edit($id){
        if(request()->isPost()){
            $info = input('info/a');
            $info['room_type'] = input('room_type');
            $info['hotel_picture'] = '/'.substr($info['hotel_picture'],strpos($info['hotel_picture'], 'images'));
            $res = Db::name('hotel')->update($info);
            if($res){
                echo to_json(1,'','修改成功');exit();
            }else{
                echo to_json(0,'','修改失败');exit();
            }
        }else{
            $hotelInfo = Db::name('hotel')->find($id);
            $room_type = explode(',',$hotelInfo['room_type']);
            $room_type_1 = isset($room_type[0])?$room_type[0]:'';
            $room_type_2 = isset($room_type[1])?$room_type[1]:'';
            $room_type_3 = isset($room_type[2])?$room_type[2]:'';
            $this->assign('room_type_1',$room_type_1);
            $this->assign('room_type_2',$room_type_2);
            $this->assign('room_type_3',$room_type_3);
            $this->assign('room_type',$room_type);
            $this->assign('info',$hotelInfo);
            return view();
        }
    }

 方法很笨，将字段的值，分成三个值传到前台，这一点做得非常不好，如果有小伙伴有好一点办法，可以再评论区里留言讨论。

 

关于 add 方法，更多的注意点应该是：关于接收值的问题，这里我使用另一个值来接受：

<div class="layui-form-item">
            <label class="layui-form-label">酒店房间类型</label>
            <div class="layui-input-block">
                <input type="checkbox" name="info[room_type]" value="0" title="标间">
                <input type="checkbox" name="info[room_type]" value="1" title="双人间">
                <input type="checkbox" name="info[room_type]" value="2" title="三人间">
            </div>
        </div>

JS 部分：

layui.use(['form','jquery','element','layer'], function(){
        var form = layui.form;
        var jq = layui.jquery;
        var layer = layui.layer;

        //监听提交
        form.on('submit(formData)', function(data){
            //layer.msg(JSON.stringify(data.field));
            loading = layer.load(2, {
                shade: [0.2,'#000']
            });
            var param = data.field;
            console.log(param);
            
            //这里是复选框

            var arr = new Array();
            $("input:checkbox[name='info[room_type]']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            data.field.room_type = arr.join(",");//将数组合并成字符串

            //复选框结束

            jq.post('{:url("add")}',param,function(json){
                layer.close(loading);
                if(json.status == 1){
                    layer.msg(json.msg, {icon: 1, time: 1600}, function(){
                        window.location.href="{:url('hotel/add')}";
                    });
                }else{
                    layer.msg(json.msg, {icon: 2, anim: 6, time: 1600});
                }
            },'json');
            return false;
        });
    });

相对应的 add 控制器：

public function add(){
        if(request()->isPost()){
            $info = input('info/a');  //TP5.0版本接收数组要加/a  5.1则不用
            $info['room_type'] = input('room_type');
            $info['hotel_picture'] = '/'.substr($info['hotel_picture'],strpos($info['hotel_picture'], 'images'));
            $info['is_del'] = 0;
            $res = Db::name('hotel')->insert($info);
            if($res){
                echo to_json(1,'','添加成功');exit();
            }else{
                echo to_json(0,'','添加失败');exit();
            }
        }else{
            return view();
        }
    }

至此，整个复选框的问题就解决了。

 

 

2019年3月26日更新

上线前测试的时候，发现我的复选框的状态不太对，主要体现在 edit 的时候：

现在修改一下 edit 函数的代码：

public function edit($id){
        if(request()->isPost()){
            $info = input('info/a');
            $info['room_type'] = input('room_type');
            //$info['hotel_picture'] = '/'.substr($info['hotel_picture'],strpos($info['hotel_picture'], 'images'));
            $res = Db::name('hotel')->update($info);
            if($res){
                echo to_json(1,'','修改成功');exit();
            }else{
                echo to_json(0,'','修改失败');exit();
            }
        }else{
            $hotelInfo = Db::name('hotel')->find($id);
            $room_type = explode(',',$hotelInfo['room_type']);
            $this->assign('room_type',$room_type);
            $this->assign('info',$hotelInfo);
            return view();
        }
    }

然后是 edit 的模板文件：

<div class="layui-form-item">
            <label class="layui-form-label">酒店房间类型</label>
            <div class="layui-input-block">
                <input type="checkbox" name="info[room_type]" value="1" title="标间" {if in_array(1,$room_type)}checked{/if}>
                <input type="checkbox" name="info[room_type]" value="2" title="双人间" {if in_array(2,$room_type)}checked{/if}>
                <input type="checkbox" name="info[room_type]" value="3" title="三人间" {if in_array(3,$room_type)}checked{/if}>
            </div>
        </div>

一个 in_array 数组就将问题解决了。