首页
Search
1
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
46 阅读
2
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
38 阅读
3
如何在 IOS Shadowrocket 上配置服务
34 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
34 阅读
5
如何在 Clash for Windows 上配置服务
30 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
635
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
339
篇与
的结果
2024-08-22
Layui如何使用折叠表格,以及默认自动折叠
我们有时在开发项目是需要用到树形接口,这时我们可以Layui的树形表格treetable插件。参数说明:参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级HTML代码:<div> <div> <div> <script type="text/html" id="toolbarDemo"> <div> <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button> <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button> </div> </script> <table id="munu-table" lay-filter="munu-table"></table> </div> </div> </div> <!-- 操作列 --> <script type="text/html" id="auth-state"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>Js代码:<script> layui.use(['table', 'treetable'], function () { var $ = layui.jquery; var table = layui.table; var treetable = layui.treetable; // 渲染表格 layer.load(2); treetable.render({ toolbar: '#toolbarDemo', treeColIndex: 1, treeSpid: -1, treeIdName: 'id', treePidName: 'pid', elem: '#munu-table', url: '{:url("union/Permission/getPermission")}', // url: '__STATIC__/union/api/menus.json', page: false, treeDefaultClose: true, cols: [[ {type: 'numbers'}, {field: 'name', minWidth: 200, title: '权限名称'}, {field: 'ac', title: '方法'}, {field: 'co', title: '控制器'}, {field: 'url', title: '菜单url'}, {field: 'ico', title: '图标'}, {field: 'sort', width: 80, align: 'center', title: '排序号'}, { field: 'isMenu', width: 80, align: 'center', templet: function (d) { if (d.is_menu == 1) { return '<span class="layui-badge layui-bg-gray">按钮</span>'; }else if (d.is_menu == 2) { return '<span class="layui-badge layui-bg-gray">其他</span>'; }else { return '<span class="layui-badge-rim layui-bg-blue">菜单</span>'; } }, title: '类型' }, {templet: '#auth-state', width: 120, align: 'center', title: '操作'} ]], done: function () { layer.closeAll('loading'); } }); $('#btn-expand').click(function () { treetable.expandAll('#munu-table'); }); $('#btn-fold').click(function () { treetable.foldAll('#munu-table'); }); //监听工具条 table.on('tool(munu-table)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'del') { layer.msg('删除' + data.id); } else if (layEvent === 'edit') { layer.msg('修改' + data.id); } }); }); </script>Json结构数据格式:{ "code": 0, "msg": "", "count": 19, "data": [ { "authorityId": 1, "authorityName": "系统管理", "orderNumber": 1, "menuUrl": null, "menuIcon": "layui-icon-set", "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": -1 }, { "authorityId": 2, "authorityName": "用户管理", "orderNumber": 2, "menuUrl": "system/user", "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": 1 }, ] }
2024年08月22日
5 阅读
0 评论
0 点赞
2024-08-22
Layui表格如何显示图片或者图标
Layui如何显示图片或者图标?这个很简单,可以使用 templet 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期格式,图片地址转成图片,图标显示等。显示图片:{{ d.vod_pic }}为图片地址{field: 'article_pic',title: '封面',width: 100,templet:'<div><img src="https://www.tpxhm.com/fdetail/{{ d.vod_pic }}" width="100%"></div>' },显示图标:{{ d.icon }}为图标地址 {field: 'icon',title: '图标',width: 100,templet:'<div><i class="fa {{ d.icon }}"></i></div>' },
2024年08月22日
4 阅读
0 评论
0 点赞
2024-08-22
解决session或cookie过期时Layui不跳出iframe框架问题
用过layui都会遇到登录页面问题,如果是session或者cookie过期时,用户还停留在操作页面,这时后端会加判断跳到登录,而layui还是在iframe框架下打开登录页面,而我们需要的是关闭所有页面,并跳到iframe页面,这时可以通过以下代码来实现,在login.html页面加入如下js代码。<script > $(document).ready(function () { if (window != top) { top.location.href = location.href; } }); </script>
2024年08月22日
3 阅读
0 评论
0 点赞
2024-08-22
layui如何自定义layedit富文本编辑器工具栏
layui自带了layedit富文本编辑器,我们在使用过程中有时候不需要全部工具,或者想自定义工具栏,该如何弄呢?以下方法教大家自定义自己的layedit编辑器。步骤1:定义存放编辑器的盒子<div class="layui-form-item layui-form-text"> <label>小程序内容</label> <div> <textarea name="min_content" class="layui-textarea content" id="content" style="display:none" placeholder="请输入META描述" >{php}if( isset($sys_config->min_content) != '' ) echo $sys_config->min_content ;{/php}</textarea> </div> </div>步骤2:实例化layedit<script> layui.use(['layedit','form'], function () { var form = layui.form ,layer = layui.layer ,$ = layui.$; var layedit = layui.layedit; layedit.set({ //暴露layupload参数设置接口 --详细查看layupload参数说明 uploadImage: { url: '/Attachment/LayUploadFile', accept: 'image', acceptMime: 'image/*', exts: 'jpg|png|gif|bmp|jpeg', size: '10240' } , uploadVideo: { url: '/Attachment/LayUploadFile', accept: 'video', acceptMime: 'video/*', exts: 'mp4|flv|avi|rm|rmvb', size: '20480' } //右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作, //传递参数: //图片: imgpath --图片路径 //视频: filepath --视频路径 imgpath --封面路径 , calldel: { url: '/Attachment/DeleteFile' } //开发者模式 --默认为false , devmode: true //插入代码设置 , codeConfig: { hide: true, //是否显示编码语言选择框 default: 'javascript' //hide为true时的默认语言格式 } , tool: [ 'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face' , '|', 'left', 'center', 'right', '|', 'link', 'unlink','images', 'image_alt', 'video', 'anchors' , '|','table', 'fullScreen'] , height: '90%' }); var layedit = layedit.build('content'); }); </script>
2024年08月22日
14 阅读
0 评论
0 点赞
2024-08-22
Layui结合croppers实现上传图片和裁剪图+踩坑记录
本插件基于layui,根据cropper修改的图片截取(剪裁)上传插件,适用于头像等图片上传。后端接口代码编写采用的PHP框架laravel8写的。也可以改成其他的。插件下载地址:请看图片一、官方文章存在坑,首先先在这里先把坑填了。第一个:必须修改croppers.js中的css和base路径,改成你的项目具体路径第二个:后端接口返回必须和插件一致,否则无法正确保存更改二、最后,完成上面配置后,我们就可以来使用这个上传裁剪了第一种:上传并截图前端html部分代码 <div> <label>管理员头像</label> <div> <div> <button type="button" id="test1" data-src="https://www.tpxhm.com/fdetail/{$find.admin_logo}">上传图片</button> <div> <img id="demo1" style="width: 100px;height: 100px; display: none" > <input type="hidden" name="img111" id="img111"> <p id="demoText"></p> </div> </div> </div> </div>前端js部分代码 layui.config({ base: '{{asset(__ADMIN__)}}/lib/jq-module/cropper/' //layui自定义layui组件目录 }).use(['form','croppers'], function () { var $ = layui.jquery ,form = layui.form ,croppers = layui.croppers ,layer= layui.layer; //创建一个头像上传组件 croppers.render({ elem: '#test1' ,saveW:150 //保存宽度 ,saveH:150 ,mark:1/1 //选取比例 ,area:'900px' //弹窗宽度 ,url: "{{route("ladmin.defend.config_upload")}}" //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样 ,done: function(url){ //上传完毕回调 console.log(url) $('#demo1').attr('src', url); $('#demo1').css('display', 'block'); $('#img111').val(url); $('#test1').attr('data-src', url); //成功返回路径存到数据库 } }); });第二种:修改图片并裁剪前端部分html代码<div> <label>头像</label> <div> <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg"> </div> <div> <div style="margin:0"> <img src="https://www.tpxhm.com/fdetail/672.html" id="srcimgurl"> <input type="hidden" id="img111" name="img111"> </div> </div> <div class="layui-input-inline layui-btn-container" style="width: auto;"> <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button > </div> <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div> </div>前端部分js代码 layui.config({ base: '{{asset(__ADMIN__)}}/lib/jq-module/cropper/' //layui自定义layui组件目录 }).use(['form','croppers'], function () { var $ = layui.jquery ,form = layui.form ,croppers = layui.croppers ,layer= layui.layer; //创建一个头像上传组件 croppers.render({ elem: '#test1' ,saveW:150 //保存宽度 ,saveH:150 ,mark:1/1 //选取比例 ,area:'900px' //弹窗宽度 ,url: "{{route("ladmin.defend.config_upload")}}" //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样 ,done: function(url){ //上传完毕回调 console.log(url) $("#inputimgurl").val(url); $("#srcimgurl").attr('src',url); } }); });最终效果左边为原始图片,右边为裁剪后的图片
2024年08月22日
2 阅读
0 评论
0 点赞
1
...
42
43
44
...
68