🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
LayUI搜索优化、列表显示和删除功能 [TOC] ## 一、列表显示优化 ### 1、后台处理 影片列表 ~~~ public function index(){ $data['pageSize'] = 15; $data['page'] = max(1,(int)input('get.page')); $data['wd'] = trim(input('get.wd')); $where = array(); $data['wd'] && $where = 'title like "%'.$data['wd'].'%"'; $data['data'] = $this->db->table('video')->where($where)->order('id desc')->pages($data['pageSize']); // 关联查询公共属性名称 $label_ids = []; foreach ($data['data']['lists'] as $item) { !in_array($item['channel_id'],$label_ids) && $label_ids[] = $item['channel_id']; !in_array($item['charge_id'],$label_ids) && $label_ids[] = $item['charge_id']; !in_array($item['area_id'],$label_ids) && $label_ids[] = $item['area_id']; } $label_ids && $data['labels'] = $this->db->table('video_label')->where('id in('.implode(',',$label_ids).')')->cates('id'); $this->assign('data',$data); return $this->fetch(); } ~~~ ### 2、模板渲染 ~~~ <tbody> {volist name="data.data.lists" id='vo'} <tr> <td>{$vo.id}</td> <td>{:isset($data['labels'][$vo['channel_id']])?$data['labels'][$vo['channel_id']]['title']:''}</td> <td>{:isset($data['labels'][$vo['charge_id']])?$data['labels'][$vo['charge_id']]['title']:''}</td> <td>{:isset($data['labels'][$vo['area_id']])?$data['labels'][$vo['area_id']]['title']:''}</td> <td>{$vo.title}</td> <td>{$vo.pv}</td> <td>{$vo.score}</td> <td>{$vo.status==0?'<span style="color:red">下线</span>':'正常'}</td> <td>{:date('Y-m-d H:i:s',$vo.add_time)}</td> <td> <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button> </td> </tr> {/volist} </tbody> ~~~ ## 二、删除 删除前弹出确认按钮 ### 1、HTML结构 ~~~ <tbody> {volist name="data.data.lists" id='vo'} <tr> <td>{$vo.id}</td> <td>{:isset($data['labels'][$vo['channel_id']])?$data['labels'][$vo['channel_id']]['title']:''}</td> <td>{:isset($data['labels'][$vo['charge_id']])?$data['labels'][$vo['charge_id']]['title']:''}</td> <td>{:isset($data['labels'][$vo['area_id']])?$data['labels'][$vo['area_id']]['title']:''}</td> <td>{$vo.title}</td> <td>{$vo.pv}</td> <td>{$vo.score}</td> <td>{$vo.status==0?'<span style="color:red">下线</span>':'正常'}</td> <td>{:date('Y-m-d H:i:s',$vo.add_time)}</td> <td> <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button> </td> </tr> {/volist} </tbody> ~~~ ### 2、功能实现 ~~~ <script type="text/javascript"> layui.use(['layer','laypage'],function(){ layer = layui.layer; $ = layui.jquery; }); // 删除 function del(id){ layer.confirm('确定要删除吗?', { icon:3, btn: ['确定','取消'] }, function(){ $.post('/admins.php/admins/video/delete',{'id':id},function(res){ if(res.code>0){ layer.alert(res.msg,{icon:2}); }else{ layer.msg(res.msg); setTimeout(function(){window.location.reload();},1000); } },'json'); }); } </script> ~~~