layui
文章平均质量分 59
漏刻有时
深耕数据可视化与地图GIS技术,融合AI前沿探索,致力于打造智能数据洞察新纪元。通过精美图表展现数据魅力,让复杂信息一目了然;运用GIS技术绘制精准地图,赋能空间数据深度分析。同时,结合AI算法优化数据处理与预测,开启智能决策新篇章。在这里,每一行代码都是对未知世界的探索,每一次可视化都是智慧的火花。
展开
-
layui框架实战案例(27):弹出二次验证
layui勾选删除弹出二次验证原创 2024-04-20 20:04:12 · 350 阅读 · 0 评论 -
layui框架实战案例(26):layui-carousel轮播组件添加多个Echarts图标的效果
在Layui中,使用layui-carousel轮播组件嵌套Echarts图表来实现多个图表的展示。原创 2024-04-04 15:36:26 · 914 阅读 · 1 评论 -
layui框架实战案例(25):laydate中mark的数据后端生成
mark,自定义日期标记。该属性是对 calendar 属性的进一步延伸,灵活度更高。其中日期的格式必须是2008-8-8,而不能是2024-03-07,即当月份和天数是个位数时,不能用0补足。原创 2024-03-25 16:52:39 · 625 阅读 · 0 评论 -
layui框架实战案例(26):自定义表单验证规则
当用户输入内容时,将触发该验证规则,如果输入值包含"|",则会显示错误提示信息。在layui的表单验证中,要禁止出现"|",可以使用正则表达式来实现。方法检查输入值中是否包含"|",如果包含,则返回一个错误提示信息。在上面的示例中,我们定义了一个名为。在上述示例中,我们将自定义验证规则。原创 2024-01-04 09:46:21 · 533 阅读 · 0 评论 -
layui框架实战案例(25):table组件筛选列记忆功能
即点击当前表格右上角筛选图标后,对表头进行显示隐藏勾选,再刷新页面依然保留当前筛选状态。原创 2023-12-19 11:09:57 · 1368 阅读 · 0 评论 -
layui框架实战案例(24):layedit工具栏添加查看源代码按钮的解决方案
layedit是一款基于layui框架的富文本编辑器,适用于后台管理系统、博客编辑等场景,提供了很多实用的功能,包括但不限于:字体、字号、颜色设置,加粗、斜体、下划线、删除线等文字样式设置。图片、链接、表格、列表插入,源代码、全屏、撤销、重做等操作。自定义工具栏。原创 2023-10-23 19:37:54 · 481 阅读 · 5 评论 -
layui框架实战案例(23):select编辑回显内容及事件调用
layui中的form.on事件是一个表单元素的事件监听器,可以监听表单元素的交互事件,如点击、选择、输入等。其用法类似于jQuery的on方法,可以传入一个选择器和回调函数,实现对表单元素的事件监听。设置参数传递,即当传值且与选择名称一致时,设置selected属性。原创 2023-10-23 16:34:10 · 1469 阅读 · 0 评论 -
layui框架实战案例(21):layui table单元格显示图片导致复选框冗余的解决方案
为防止单元格内的图片不能正常显示,需本地重写CSS。原创 2023-10-20 12:36:09 · 997 阅读 · 0 评论 -
layui中多个checkbox只能进行单选且一个被选中则取消其他的选中状态
通过以上步骤,当选中其中一个checkbox时,其他checkbox将会被取消选中,确保只有一个checkbox被选中。原创 2023-09-04 00:00:00 · 2532 阅读 · 2 评论 -
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
Unicode是一种字符编码标准,它为世界上几乎所有的字符(包括字母、数字、标点符号、表情符号和特殊字符)分配了一个唯一的数值标识,用于在计算机中表示和处理文本。你可以在网上找到Unicode字符编码表,以了解每个字符的Unicode编码值。在layui的封装压缩js文件中,只做了错误提示,未将具体的原因,进行展示。总之,Unicode使得在计算机中处理和表示各种字符集变得简单和统一,使得不同国家和文化之间的文字交流成为可能。,基本上都是返回的参数,不是标准的json格式导致的。请求上传接口出现异常。原创 2023-07-19 08:46:51 · 3186 阅读 · 2 评论 -
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
在使用html拼接时,发现layui-progress-bar不显示进度条和文本。,在加载完数据,再次初始化即可。原创 2023-07-08 09:43:48 · 323 阅读 · 0 评论 -
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
在发布文章时,可以将附件上传至富文本编辑器,但是对文件删除时,无法将其从服务器删除。为了便于附件的管理,将附件上传管理,进行单独的项目开发。Layui是一个前端UI框架,它提供了多附件上传的组件,可以方便地在前端实现多附件上传功能。Layui多附件上传组件的使用方法非常简单,只需要加载相关的js和css文件,然后在HTML中定义上传的元素即可。Layui的多附件上传组件默认支持最多同时上传6个文件,可以通过设置number属性值来改变同时上传的文件数量。原创 2023-06-19 01:00:00 · 1156 阅读 · 0 评论 -
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
【代码】layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案。原创 2023-06-03 20:04:44 · 1425 阅读 · 0 评论 -
ChatGPT工作提效之layedit上传多附件的解决方案(layedit赋值、layui.js底层修改、追加模式多附件上传)
Layui 有 layedit 这么一个组件,尽管 layedit 组件早在 2017 年发布的 Layui 2.0版本中就已被弃用了,但当时为了照顾少部分仍在坚持使用 layedit 组件的群体,一直未正式从 Layui 内置组件中剔除。前期项目中就是有这么一个尴尬的情况,想全新更换,无论是时间和成本上都不允许。但是客户的需求增加了上传附件的需求,又不能不满足。借助ChatGPT工作提效之际,完成客户需求,顺便将在实际开发工作中,ChatGPT和实际的差距撰写出来,以飨共勉。原创 2023-06-02 00:15:00 · 565 阅读 · 5 评论 -
layui框架实战案例(21):layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
使用 upload 模块必须与 upload.render(options) 方法打交道,其中的 options即为基础参数,它是一个对象。原创 2023-04-29 09:45:39 · 7469 阅读 · 1 评论 -
layui框架实战案例(20):常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
将近期项目开发中,使用到的layui小技巧进行汇总处理,方便后期的快速调用。上传图片后,需要实时查看效果。需要增加图片预览功能,怎么操作?2.JQ渲染代码在新增页面,通过返回HTML DOM节点中;而处在编辑状态时,直接从数据库读取即可实现图片的预览。二、动态表格数据返回条件判断1.动态表格返回列状态判断使用switch和当前列返回字段d.zp_status进行条件显示判断。2.cols列数据事件操作在代码返回在前端HTML页面时,根据需求情况,可以对每列数据进行展示、格式化处理、按钮触发原创 2023-04-23 07:00:19 · 1024 阅读 · 2 评论 -
layui框架实战案例(19):layui-table模块表格综合应用(筛选查询、导入导出、群发短信、一键审核、照片展示、隐私加密)
table 是 layui 中使用频率非常高的一个组件,用于在表格中对数据进行一系列动态化的操作,涵盖了日常业务所涉及的大部分需求。模块加载名称:table在实际开发应用中,table的使用牵涉前后端的配合使用,如筛选查询重载功能,翻页功能等。复选框事件:点击复选框时触发,回调函数返回一个 object 参数;单元格工具事件:比如编辑、删除,这时可借助单元格工具事件(tool)来实现;头部工具栏事件:点击头部工具栏区域设定了属性为 lay-event=“” 的元素时触发;原创 2023-03-08 09:13:55 · 2852 阅读 · 8 评论 -
layui框架实战案例(18):保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案
在使用layui框架做表单提交的时候,项目需要适时的保存草稿,同时对单选或复选框做必填的验证。原创 2023-01-28 11:43:09 · 1346 阅读 · 2 评论 -
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
默认全部GPS的位置状态,分为在线设备位置展示和所有设备位置展示(包含离线未运行的设备);指定GPS设备时间内的轨迹状态,默认2小时内的经纬度轨迹坐标线覆盖物的展示;指定GPS设备状态展示,包含运行状态和定位状态,由后台API传输数据确定;上述功能全部在SPA实现;百度地图开发平台提供的jsAPI功能比较详尽,同时对应版本的类库说明也比较具体。在实际开发的过程中,根据项目需求,需要对jsAPI进行多次的封装和调用。原创 2023-01-03 15:06:13 · 1689 阅读 · 4 评论 -
数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API、Echarts、百度地图)
本次数据可视化大屏应急管理综合指挥调度系统的开发,需求虽然简单,但是实现的过程确是十分的繁琐。必须将产品加载流程图分析清晰,做好底层的逻辑,才能根据需求开发对应的API接口。原创 2022-12-25 17:23:22 · 2383 阅读 · 6 评论 -
使用php解压缩ZipArchive类实现后台管理升级的解决方案
开发php项目管理系统,由于是新项目且已经部署在生产环境,导致需要根据实际使用情况,进行及时的功能升级或bug修复。layui上传脚本安全考虑,增加上传upToken,防止非页面上传,上传漏洞;配置上传文件类型zip|rar|gz;上传后自动填写文件地址 $(“#zip_url”).val(res.imgUrl);后台解压核心代码设置解压为根目录$dest = “./”;判断服务器是否支持extension_loaded(“zip”)服务;调用解压函数 unzip($zip_url,原创 2022-12-06 11:25:29 · 680 阅读 · 1 评论 -
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
layui.flow,模块包含信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。原创 2022-11-23 13:30:23 · 1214 阅读 · 2 评论 -
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
在xm-select时,需要设置默认使用selected属性选中属性,增加`selected: true`的字段。为此,首先需要读取数据库中已经选择的选项,组成二维数组,然后和选项数据进行数组合并,组成新的data.原创 2022-10-26 17:09:56 · 4308 阅读 · 6 评论 -
layui框架实战案例(15):上传提示413 request entity too large宝塔配置的解决方案
如果在实际上传过程中出现错误提示,即可F12在控制台查看具体的错误情况。在上传代码中加入异常返回的代码。原创 2022-10-10 21:45:57 · 972 阅读 · 0 评论 -
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui切换tabs选项卡时,echarts由于无法获取对应容器高度宽度,导致echarts在渲染的过程中,出现拉伸变形无法正常显示的情况。原创 2022-09-12 20:08:32 · 1237 阅读 · 1 评论 -
layui框架实战案例(13):colorpicker颜色选择器的使用
colorpicker,是layui自带组件,在实际开发过程中,直接调用即可。原创 2022-09-12 19:44:29 · 1460 阅读 · 0 评论 -
layui框架实战案例(12):layui标签输入框inputTag
在项目开发工作过程中,随着对layui使用频率的增加,越来越发现其功能的强大与简洁。同时内置或第三方配套开发的组件,深有开发如虎添翼之感。从数据库读取后,将默认值植入 data: []中即可。将获取的数据数组直接转为字符串,然后赋值到隐藏表单进行调用。原创 2022-08-23 07:38:02 · 2265 阅读 · 1 评论 -
layui框架实战案例(11):表单自定义验证规则
layui框架实战案例(11):表单自定义验证规则原创 2022-07-27 09:52:46 · 563 阅读 · 0 评论 -
layui框架实战案例(9):layPage 静态数据分页组件
layPage 是一款多功能的 js 分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载。layPage 不依赖于任何第三方库,直接拿来用即可,它的接口继承了 layui 系列组件的一贯简洁,极易上手。...原创 2022-07-03 09:01:31 · 1086 阅读 · 0 评论 -
layui框架实战案例(8):web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
cropper.js组件,弹出图片裁剪窗口,支持图片缩放、移动、旋转,将裁剪后的图片以base64的格式传给后端。原创 2022-06-29 15:17:20 · 1235 阅读 · 0 评论 -
layui框架实战案例(10):短信验证码60秒倒计时
layui封装库 <!--layui封装库--> <script src="js/layui/layui.js" charset="utf-8"></script> <link rel="stylesheet" href="js/layui/css/layui.css">构建表单<div style="margin-top: 10px;"> <form class="layui-form">原创 2022-01-18 11:02:11 · 2433 阅读 · 1 评论 -
laypage静态数据分页组件的调用实战代码
引入layui.js封装库 <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/> <!--JS核心库--> <script src="layui/layui.js"></script> <link rel="stylesheet" type="text/css.原创 2022-01-18 10:35:28 · 372 阅读 · 1 评论 -
layui下拉多选框xm-select.js插件的使用
//获取分类; var pArr=[]; $.ajax({ type: 'get', url: "./api/api.php?act=getCategory&token=3cab7ce4142608c0f40c785b5ab5ca24", data: {}, dataType: "json", success: function (res) {..原创 2021-11-02 11:24:49 · 1261 阅读 · 0 评论 -
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
在layui近期的开发中,遇到一则需求:设备的故障原因明确,点选即可,但是又需要维修人员将该原因自动输入到文本框进行记录。同样的事情,做两遍,对操作人员来说是不友好的,何况又是在手机端使用的情况,如果解决不重复劳动,不给维修人员增加麻烦,减少打字环节呢?HTML代码<div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-ce原创 2021-07-02 10:43:52 · 802 阅读 · 0 评论 -
layui联动菜单搜索select表单选项的设置方法
联动菜单用于需要使用ajax来调用后端数据,如下图:一级菜单<div class="layui-input-inline"> <select name="member_depart" lay-verify="required" id="member_depart" lay-filter="member_depart" style="height:10px;" lay-search=""> <option value="">选择单位</option>原创 2021-07-02 10:29:49 · 920 阅读 · 0 评论 -
layui和weui结合手机端select表单底部选择和被遮挡的解决方案
在实际项目操作中,layui和weui相结合,共同来完成前端的展示。其中select表单遇见几个问题,现摘录如下:底部选择默认不添加任何样式表时,select表单会根据手机系统自动判断展示。安卓一般为弹出选择框,IOS系统一般为底部选择。被遮挡解决方案,select所在父级添加自建CSS样式style="overflow:visible;"<div class="weui-cells weui-cells_form" style="overflow:visible;">loc原创 2021-07-01 16:40:40 · 861 阅读 · 0 评论 -
layui动态表格条件语句判断的方式
按钮的条件判断直接在表格渲染的cols判断 , {field: 'pool_able', title: '操作', align: 'center', width: 200, templet: function (d) { if (d.pool_able == "0") { return "<a class='layui-btn layui-btn-xs layui-btn-danger' οnclick='member_del(this," + d.pool_id原创 2021-06-26 21:19:39 · 2504 阅读 · 5 评论 -
layui表单select框同时支持下拉和输入的解决方案
<div class="layui-input-inline"><select name="member_depart" lay-verify="required" id="member_depart" lay-filter="member_depart" style="height:10px;" lay-search><option value="">选择单位</option></select></div>关键代码lay-se.原创 2021-06-26 21:13:09 · 1843 阅读 · 0 评论 -
layui多文件上传与PHP后端对接的解决方案
layui目前暂不支持批量上传(即同时上传多个),但支持添加多个文件(即一个一个上传)版本:layui-v2.5.7后端:php外部文件引入 <script src="js/layui/layui.js"></script> <link rel="stylesheet" href="js/layui/css/layui.css">容器构建<div class="layui-upload"> <button typ.原创 2021-05-20 21:48:28 · 1157 阅读 · 7 评论 -
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
html内容 <div class="layui-form-item"> <label class="layui-form-label">信息内容</label> <div class="layui-input-block"> <textarea id="L_c_content" name="c_content" style="display: none;".原创 2021-03-17 11:33:02 · 1864 阅读 · 3 评论