2.show.html · thinkphp5学习笔记(二)

~~~ {include file="public/header"/}  <style> .actions { background: #f5f5f5; padding: 10px 15px 8px; list-style: none; z-index: 3; margin: 0; } .actions label { margin-right: 10px; font-weight: 500; display: inline-block; max-width: 100%; margin-bottom: 5px; } .actions input { margin-right: 5px; vertical-align: -10%; } .actions .btn_upload { position: absolute; right: 30px; top: -38px; /* top: -25px;*/ margin: 1px -4px 0 0; } /*aaa*/ .imgs { min-height: 400px; border: 0px solid #f00; } .imgs ul { padding: 0; margin: 10px -6px; border: 0px solid #f00; } .imgs ul li { float: left; width: 150px; } .imgs ul li > div { padding: 7px; } .imgs ul li .fancybox { position: relative; display: block; border: 0px solid #f00; } .imgs ul li img { width: 137px; margin: 0; height: 140px; } .imgs ul li .fancybox p { position: absolute; left: 0; bottom: 0; text-align: center; margin: 0; width: 100%; color: #fff; background: rgba(0,0,0,0.3); } .imgs ul li label { margin: 8px 0 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } .imgs ul li input { margin-right: 5px; margin-top: 5px; } .imgs ul li .btns { margin: 0 -1px; } .imgs ul li .btns a { margin: 0 1px; color: #2196f3; cursor:pointer; } </style> <div class="actions"> <label class="btn_select"><input class="all" type="checkbox"/><span>全选</span></label> <a onclick="admin_edittag('批量修改分组','/admin/imgfile/edittag/','500','510')" class="layui-btn layui-btn-normal" ><i class="layui-icon"></i> 批量分组</a> <a onclick="delAll()" class="layui-btn layui-btn-danger"><i class="layui-icon"></i> 批量删除</a>  <div style="position: relative;"> <a href="javascript:;" class="btn_upload layui-btn layui-btn-normal waves-effect" id="test1" style="z-index: 1;"> <i class="layui-icon"></i> 上传照片</a> </div> </div> <div class="layui-tab-content"> <div class="layui-tab-item layui-show" style="margin-top: 20px;">     <form class="piliangshanchan"> <div class="imgs" style="/*min-height: 709px;*/"> <ul> {volist name="file" id="vo" empty="暂无该类信息~"} <li data-id="827"> <div> <a class="fancybox" href="#" title="新天地"> <img class="lazy" src="/public{$vo.url}" > <p> 1440 x 1080 </p> </a> <label class="btn_select"> <input type="checkbox" name="id[]" class="checkbox" id="checkbox" value="{$vo.id}"> <span> ...{$vo.url|mb_substr=-12,-1}g </span> </label> <div class="btns"> <a onClick="admin_show(this,'{$vo.url}')"> 链接 </a> <a onClick="admin_edit('修改分组','/admin/imgfile/edit/id/{$vo.id}.html','500','510')"> 分组 </a> <a onClick="admin_del(this,'{$vo.id}')"> 删除 </a> </div> </div> </li> {/volist} </ul> <p class="clear"> </p> </div> </form>  </div> </div> <script src="/public/admin/js/jquery.min.js"></script> <script src="/public/admin/js/layui/layui.all.js"></script> <script src="/public/admin/js/admin.js"></script> <script src="/public/static/js/ueditor/ueditor.config.js"></script> <script src="/public/static/js/ueditor/ueditor.all.min.js"></script> <script> //查看链接 var r='{$root}'+'/public'; function admin_show(obj,url){ layer.confirm(r+url,function(index){ //发异步把用户状态进行更改 }) } // 修改分组 function admin_edit(title,url,w,h){ xadmin_show(title,url,w,h); } // 删除 function admin_del(obj,id){ layer.confirm('确认要删除吗？',function(index){ //发异步把用户状态进行更改 $.get("{:url('imgfile/delete')}",{id:id},function(data){ window.location.replace(location.href); layer.msg(data); }); }); } // 批量修改分组 function admin_edittag(title,url,w,h){ if($('.checkbox').is(':checked')) { /*******************************************************/ // xadmin_show(title,url,w,h); $.ajax({ url:"{:url('imgfile/tag')}", data:$('.piliangshanchan').serialize(), dataType: "json", type:'post', async: false, success:function(res) { //alert(res.ids); xadmin_show(title,url,w,h,res.ids); } }) /*******************************************************/ }else{ layer.msg('请选择~~'); } } //批量删除提交 function delAll () { if($('.checkbox').is(':checked')) { layer.confirm('确认要删除吗？',function(index){ //捉到所有被选中的，发异步进行删除 /*******************************************************/ $.ajax({ url:"{:url('imgfile/delall')}", data:$('.piliangshanchan').serialize(), dataType: "json", type:'post', async: false, success:function(res) { //console.log(res); if(res.status == 1) { window.location.replace(location.href); layer.msg(res.message+"，共删除"+res.num+"数据"); // window.location.reload(); } else { layer.msg(res.message); } } }) /*******************************************************/ //layer.msg('删除成功', {icon: 1}); }); }else{ layer.msg('请选择~~'); } } $(function() { var ue = UE.getEditor('content'), uploadEditor = UE.getEditor('upload-photo-btn'), photoListItem, uploadImage; uploadEditor.ready(function () { uploadEditor.setDisabled(); uploadEditor.hide(); uploadEditor.addListener('beforeInsertImage', function (t, arg) { $.each(arg, function (index, item) { photoListItem = '<div class="photo-list"><input type="text" name="photo[]" value="' + item.src + '" class="layui-input layui-input-inline">'; photoListItem += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>'; $('#photo-container').append(photoListItem).on('click', '.remove-photo-btn', function () { $(this).parent('.photo-list').remove(); }); }); }); }); $('#upload-photo-btn').on('click', function () { uploadImage = uploadEditor.getDialog("insertimage"); uploadImage.open(); }); }); </script>  {include file="public/footer"/} ~~~