荆轲刺秦王
今天在写复选框的时候,遇到一个小问题,纠结了半天,所以特地在此记录下来。
前台模版用的 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 数组就将问题解决了。