厦门德仔
分享与交流:信息化建设、数字化转型、项目管理、流程梳理与再造、前后端开发、财务管理、数据库、网络、家庭教育与人生感悟等希望我的博客能带您愉快心情。
展开
-
【Layui】layui表单必填项带*样式
【代码】【Layui】layui表单必填项带*样式。原创 2024-01-24 10:24:22 · 538 阅读 · 0 评论 -
【Layui】layui table表格字段过长,鼠标放到上面展示完整信息
【代码】【Layui】layui table表格字段过长,鼠标放到上面展示完整信息。原创 2023-12-06 14:49:24 · 1082 阅读 · 0 评论 -
【Layui】动态时间线
分析结构Layui中与时间线相关的预设类及其大致结构如下图所示,官网中采用无序列表为例介绍时间线的样式,但从layui.css文件来看,使用其它元素也可以,测试时采用div元素作为时间线顶层元素及时间线项也能显示时间线样式。相关样式layui-timeline 代表一个时间线|-- layui-timeline-item 代表一个时间节点|-- layui-timeline-axis 代表左边的竖线|-- layui-timeline-content 时间线的内容。原创 2023-11-25 23:11:59 · 1076 阅读 · 0 评论 -
【Layui】layui 单选框、多选框radio 元素判断是必填项 lay-verify=‘required‘
/,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素。//获取当前所在的form元素,如果存在的话。大家好,又见面了,我是你们的朋友全栈君。简单验证复选框,单选框必填。//获取需要校验的元素。//对非输入框设置焦点。转载 2022-12-29 09:04:34 · 3724 阅读 · 0 评论 -
[Layui]弹窗中再弹窗让新弹窗再父页面下弹出
Layui弹窗无论是效果还是操作性都是非常棒的,lauyui弹窗通常因为大小及多窗口效果不太理想。如何让新弹窗像第一次弹出在父页弹出。问题:如果有返回值就直接返回到第一次打开的页面了。原创 2022-11-14 21:08:15 · 910 阅读 · 0 评论 -
【dhtmlxGant(甘特图)】常用功能
本文将介绍如何使用使用 dhtmlxGantt 在页面中创建基本的甘特图,并且能够将数据保存/更新至数据库(例如服务器上的数据库)。本文中最终的代码可以作为创建甘特图应用的基础样例代码。转载 2022-11-10 10:15:54 · 5510 阅读 · 7 评论 -
【Layui】Layui表格全部数据!导出
开发工具:Visual Studio2017前端框架:layui使用了layui自带的导出功能后,真的是超级便捷,但是只能导出当前页的数据,又研究了下文档,发现还有【导出任意数据】的功能,也就意味着可以导出全部页的数据,几句代码就能搞定,简直不要太爽。代码和效果图会在最后贴出。注意1:自带的导出功能为 layui 2.4.0 开始新增,若是旧版本的layui文件需要重新去官网下载。注意2:layui 2.4.0 同时还新增筛选列和打印的功能,也是蛮实用的功能。开启【导出,筛选列和打印】功能代码如下,代码转载 2022-10-27 11:28:02 · 2439 阅读 · 0 评论 -
【Layui】layui 自定义icon 图标
Layui 提供的图标较少,通常不能满足个性化的需求,阿里,font-awesome等提供免费的图库,那么如何扩展呢?原创 2022-10-14 09:47:14 · 2952 阅读 · 0 评论 -
【Layui】表单赋值 / 取值与任意位置按钮提交表单
1.通常表单赋值,通过Jquery赋值,每给标签单独赋值,显得非常笨着,希望直接可以给form表单赋值。key-value方式。2.在v2.7.0之前提交表单,按钮必须在表单内才可以直接获取表单data,如果在任意位置,则需要捕获标签取值,然后组装成对象,序列化对象传入后台,代码量大而且容易出错。原创 2022-09-20 11:42:28 · 2246 阅读 · 0 评论 -
[Laui]通过子页面给主页面(框架)添加Tab
最近在做一个基于LAYUI的后台管理系统,通常在树状菜单动态加载tabpage到iframe中,另外一种场景表格或者子页面打开新页面时如果内容较多弹出窗体体验不够友好,希望动态添加到iframe中。转载 2022-09-20 07:57:47 · 902 阅读 · 0 评论 -
【layui】ajax传递对象参数,后台使用FromBody接收对象参数
前端传递对象参数至后台原创 2022-06-10 20:47:26 · 1507 阅读 · 0 评论 -
【Layui】layui table 的toolbar 根据状态展示 不同按钮
比如 我根据 isPublish 状态来展示部分数据,按照格式。此时在 toolbar 的。根据发布状态展示不同按钮。转载 2022-09-09 10:39:06 · 3117 阅读 · 0 评论 -
【Layui】layui时间选择器只选择时和分,不显示秒
最近在做车间一个看板时,需要显示时间段区间:如08:00-11:45 不需精确到秒。原创 2022-09-09 08:41:51 · 1874 阅读 · 0 评论 -
【Layui】关闭当前页面并刷新父页面
// 关闭当前页面 并刷新父页面var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);window.parent.location.reload();原创 2022-07-06 14:29:15 · 5334 阅读 · 0 评论 -
【LayUI】layui子窗口某行选中后,将相关参数传递回父页面
页面信息交互:子页面传值父页面。原创 2022-06-09 08:06:07 · 811 阅读 · 0 评论 -
【layui】主页优化:tab选中背景色&默认主页且不允许关闭
1.1 现在tab选中字体和背景色都没有明显变化,对用户不太友好!1.2 期望效果1.3 添加CSS控制:1.4 预览效果同上2.1 查看代码:2.2 修改代码:2.3 预览效果2.4 同样添加css控制2.5 预览效果原创 2022-06-13 08:50:54 · 3338 阅读 · 0 评论 -
【Layui】layui实际应用中批量button点击事件的正确添加及处理方式
给出两种批量按钮事件添加及处理方法btnAction.htmlbtnAction.js转载 2022-06-10 20:24:24 · 1450 阅读 · 0 评论 -
【Layui】layui中iframe子页面中的链接点击后在父页面中动态添加tab选项
iframe子页面的主要HTML结构(js文件是在子页面中引入):添加异常履历效果:原创 2022-06-01 14:06:16 · 853 阅读 · 0 评论 -
【Layui】layui的下拉多选框实现
此次使用的xm-select插件,一款始于layui,下拉选择框的多选解决方案插件快速上手使用:1.首先下载xm-select.js文件,然后放到项目里下载地址:https://toscode.gitee.com/maplemei/xm-select/tree/master/dist2.写一个 <div class="layui-form" > <div class="layui-form-item"> <label class="layui-f转载 2022-05-22 10:00:02 · 18947 阅读 · 1 评论 -
【layui】Layui的tag标签
Layui的tag标签文档地址DEMOtag.jstag.css自己来做一个简单展示吧文档地址http://lh_yun.gitee.io/lih_tag/doc.htmlDEMO<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit原创 2022-04-28 14:00:35 · 1516 阅读 · 0 评论 -
【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers"; table.render({ elem: '#currentTableId', url: url, height: 700, width: 1600,原创 2022-04-25 13:36:33 · 2210 阅读 · 0 评论 -
[Layui]layui输入框如何设置禁止输入
layui输入框设置禁止输入的方法:首先打开相应的代码文件;然后通过设置输入框属性为“disabled readonly class=“layui-input layui-disabled””来实现禁止输入即可layui input禁止输入功能disabledclass = “layui-disabled”readonly (这个可以不要)章...原创 2022-04-02 13:46:38 · 7965 阅读 · 0 评论 -
【Layui】加载任意组织机构的机构图
加载任意组织机构的机构图加载任意组织机构的机构图准备工作:下载orgChart 扩展组件DEMO效果加载任意组织机构的机构图很多时候我们需要浏览组织机构图。而且是任意节点的组织机构图。通过机构的id进行过滤准备工作:下载orgChart 扩展组件加载扩展模块DEMO<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>layui orgCharts &l原创 2022-03-25 09:34:50 · 546 阅读 · 0 评论 -
【layui】layui loading窗口的使用
loading窗口的使用loading窗口的使用效果JS:函数ajax 调用loading窗口的使用今天突然间想做一个用户数据同步的功能,同步过程中有个等待的时间,回调之后弹出回调数据,感觉不太友好。layui 有个loading的内置组件,参考别人的来试试!效果JS:函数 function showloading(t) { if (t) {//如果是true则显示loading console.log(t);原创 2022-03-24 13:31:39 · 3683 阅读 · 0 评论 -
[Layui]上传文件带进度条+表单提交功能优化
上传文件带进度条+表单提交功能优化前期做了一个简视频提交;每次只提交一个需要重新上传。视频文件较大时候没有进度提示,用户体验并不好,今天做一个简单的优化!如果监听提交表单时候,回调路径可能还未完成。提交空白路径到后台。故submit 监听不做任何处理,只为actionbind 上传文件接口并加载进度条HTML: <form class="layui-form" lay-filter="example" id="sysVideoForm"> <div cl原创 2022-03-23 12:40:20 · 891 阅读 · 2 评论 -
[Layui]layui多个tab加载数据并在标题显示每个tab的数据条数
功能描述:在页面中有多个tab需要切换,页面加载或点击搜索按钮时异步获取全部tab的数据,并在tab的表头中显示每个tab的数据条数。效果如图所示:关键的html代码:<div class="layui-card-body"> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title" style="padding-right: 30px;height: auto!important;转载 2022-03-20 09:00:58 · 893 阅读 · 0 评论 -
【layui】修改页面layer.open弹出层给子页面标签赋值
修改页面layer.open弹出层给子页面标签赋值欢迎使用Markdown编辑器欢迎使用Markdown编辑器 //监听工具条 table.on('tool(auth-table)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'edit') {原创 2022-03-18 11:30:30 · 2067 阅读 · 0 评论 -
【layui】左侧菜单自动缩放
左侧菜单自动缩放效果HTML:JS效果HTML: <div class="layui-header"> <div class="layui-logo">赛特勒资讯平台</div> <!-- 头部区域(可配合layui已有的水平导航) --> <ul class="layui-nav layui-layout-left"> &原创 2022-03-17 20:12:00 · 1758 阅读 · 0 评论 -
[Layui]主页全面显示,ESC退出
#主页全面显示,ESC退出效果: <!-- 全屏按钮 --> <li class="layui-nav-item"> <a href="#" data-toggle="fullscreen"><i class="layui-icon layui-icon-screen-full"></i></a> </原创 2022-03-17 17:30:22 · 496 阅读 · 0 评论 -
[Layui]主页tab选项卡操作(刷新页面,刷新选项卡,关闭,关闭其他,全部关闭)
主页tab选项卡操作(刷新页面,刷新选项卡,关闭,关闭其他,全部关闭)效果如下:CSS <style> .layui-tab-item { height: 100%; width: 100%; } .rightmenu { position: absolute; width: 100px; z-index: 999转载 2022-03-17 17:04:09 · 3301 阅读 · 1 评论 -
[Layui]使用扩展组件iconSelected和numberinput 提高用户体验
使用扩展组件iconSelected和numberinput 提高用户体验在我们进行菜单维护的时候,通常需要输入图标名称和序号。为提供体验使用扩展组件iconSelected和numberinput 。组件:HTML: <div class="layui-form-item"> <label class="layui-form-label required">图标</label>原创 2022-03-17 11:04:01 · 551 阅读 · 0 评论 -
[Layui]treetable加载layui图标
treetable加载layui图标干涩的图标名称:为提高用户体验,把表格中图标直接显示到表格。因为是初学,首先查看一下文档模板列测试结果仍然不显示问题出在哪里呢?查看一下具体的元素原来是class写错 icon变量应该写在里面的修改:重新测试: ...原创 2022-03-17 10:56:04 · 1451 阅读 · 0 评论 -
[Layui]后台大布局tab风格动态菜单-无限层
后台大布局tab风格动态菜单-无限层结合前2篇,进行JS改造即可* *name: 名称 *url: iframe地址 *icon:图标 *childMenus:子菜单 *注意:该菜单支持无限级的菜单,如果用的级别较多请自行修改导航的样式,不然会引起位置错乱 */[ { "name": "文档", "url": "pages/wendang.html", "icon": "layui-icon-snowflake", "ch原创 2022-03-16 16:10:27 · 1084 阅读 · 0 评论 -
[Layui]后台大布局-单页面动态-无限层级
后台大布局-单页面动态<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">原创 2022-03-16 16:06:37 · 844 阅读 · 0 评论 -
[Layui]后台大布局tab风格-静态页面
[Layui]后台大布局tab风格直接上干货:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>赛特勒资讯平台布局</title> <link原创 2022-03-16 16:01:49 · 579 阅读 · 0 评论 -
【Layui】后台布局页面-静态单页面
后台布局页面-静态单页面HTML后台布局页面:左边菜单栏点击右边主题加载页面.HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible"原创 2022-03-16 15:58:27 · 2196 阅读 · 0 评论 -
[Layui]layui使用tree实现树形下拉菜单
一. 效果演示 基于V2.6.8二. 插入css样式、引用js插件 <link rel="stylesheet" href="~/layui/css/layui.css" media="all"> @*<link rel="stylesheet" type="text/css" href="~/layui/font/">*@ <style type="text/css"> .treeSelect .layui-select-titl原创 2022-03-13 09:19:49 · 1277 阅读 · 0 评论 -
[Layui]Layui 获取树全部选中的节点ID
直接上代码 //递归 function getChildNodes(treeNode, res) { //conosle.log(treeNode); for (var i in treeNode) { res.push(treeNode[i].id); res = getChildNodes(treeNode[i].原创 2022-03-12 07:36:54 · 1513 阅读 · 0 评论 -
【Layui】layui tree数据格式转换
这里写自定义目录标题在获取数据构建tree中,数据一般为两种形式:1、json格式,以id pid表征父子节点关系 var data1=[ {id:'aa',pId:'0',text:'root1'}, {id:'bb',pId:'aa',text:'left1'}, {id:'cc',pId:'aa',text:'left2'}, {id:'dd',pId:'0',text:'root2'}, {id:'ee',p转载 2022-03-12 07:29:37 · 793 阅读 · 0 评论 -
[Layui]JS实现Layui树形表格treetable演示下载
地址:添加链接描述后面写一篇完整的前后端处理DEMO原创 2022-03-10 15:45:24 · 1623 阅读 · 0 评论