layui
关注
分享
扫一扫
layui
Aimyone
这个作者很懒，什么都没留下…
展开
-
layui 数据表格 排序操作后 表格样式渲染失败
1，展示问题开始排序操作后2，解决 function hstable(data) { //设置初始排序 var datasw=data? data.commonPage.result.resultlist : [] var table = layui.table; var initSort=(tableLeft&&tableLeft.initSort)?tableLeft.initSort:{"field":"cyDate","原创 2021-09-27 15:14:08 · 702 阅读 · 0 评论 -
layui 数据表格 sort排序，filter过滤——soulTable
1，效果图2，页面代码 <div class="fp-table" style="margin-left:0.5%;width: 86%"> <table id="fapztable" lay-filter="faptool" style="margin-bottom: 0px;"></table> </div> 3，js代码//引入扩展组件 layui.config({ base: '/static原创 2021-09-04 14:46:23 · 3881 阅读 · 1 评论 -
layui 监控某一控件数值，隐藏或显示另一控件
1，效果图2，说明当我【方式】选择按作业，显示模型和数据版本控件当我【方式】选择按成本，隐藏模型和数据版本控件另外当【模型】选择按实际设备，数据版本控件才可以操作3，页面代码<form class="layui-form" action="" lay-filter="formDemo"> <div class="addwrap"> <div class="flex flex-jusity-center flex-align-cent原创 2021-09-04 10:16:04 · 1319 阅读 · 0 评论 -
layui multiSelect 多选下拉框 事件监听
1，效果图2，代码// 添加 multiple="multiple" <div class="layui-inline"> <select id="tabletype" name="tabletype" multiple="multiple" lay-filter="tabletypechange"> <option value="模型表">模型表</option> <option value原创 2021-08-23 14:41:43 · 3529 阅读 · 2 评论 -
layui select 下拉框 监听值变化 值回显
1，效果图2，功能说明【院区】控件的值发生改变，【任务】控件的下拉框值的范围也随之改变3，知识点注意：这种select的控件监测只针对form模块元素4，非form模块元素的select值监控触发使用onchange监听【院区】控件值的变化，如果 【院区】控件选择值为 1，则【任务】控件下拉值为 1，2，3如果【院区】控件选择值为 A，则【任务】控件下拉值为 A，B，C <label style="margin-left: 10px;">院区 </label>原创 2021-08-21 14:38:50 · 1761 阅读 · 0 评论 -
layui radio 单选按钮 监听值变化 禁用其他控件
1，效果图2，功能说明当我选择【按实际设备】时，数据版本控件可以操作，当我选择【按设备标准】时，数据版本控件禁用，不可操作3，代码 <div class="flex flex-align-center flex-jusity-center height26"> <div class="layui-form-item flex"> <label class="layui-form-label" style="margin原创 2021-08-21 09:58:56 · 747 阅读 · 0 评论 -
layui table数据表格 导出excel 格式化导出数据 支持复杂表头导出
1，效果图界面图excel文件2，代码//工具类的插件引入<script type="text/javascript" src="${ctx}/static/layui-v2.5.6/layui.js"></script>//触发按钮<button type="button" onclick="toExcel()">导出结果</button>//表格样式<div> <table id="fapztable"原创 2021-08-12 10:23:42 · 1619 阅读 · 1 评论 -
layui treeGrid树形表格数据导出excel文件
1，效果图界面显示导出效果2，数据格式4，引入文件xlsx.full.min.js5，代码 //触发按钮 <button type="button" onclick="exportcalcdetail()">导出结果</button> //树形表格 <div> <table id="fapztable" lay-filter="faptool" style="margin-bottom: 0px;"></table&g原创 2021-08-12 09:59:55 · 1397 阅读 · 1 评论 -
layui 数据表格 单元格 颜色设置
1，效果图2，代码 {field: 'APPROVALSTATUS', title: '审批状态',rowspan:2, width: 110, align: 'center', halign: 'center',filter:true,sort:true, templet: function (row) { switch (row.APPROVALSTATUS) { case 0: return '&l原创 2021-07-26 15:53:44 · 2842 阅读 · 0 评论 -
layui 动态表格 templet模板函数
1，需求说明关于动态标题栏的相关知识跳转链接：layui 静态 动态复杂多表头2，尝试的用法 var chenbenkemuList=${chenbenkemuList}; var columnAry=[] for (var i = 0; i < chenbenkemuList.length; i++) { var onechenbenkemu = chenbenkemuList[i]; var widthnum=11原创 2021-07-26 15:14:19 · 3538 阅读 · 2 评论 -
layui 动态列，splice首行添加，push尾部添加
1，目标代码 cols: [ [ {type: 'checkbox'}, {field: 'name', title: '标题', width:110, align: 'center', halign: 'center',rowspan:2}, {field: 'name', title: '标题', width:110, align: 'center', halign: 'center',rowspan:2},原创 2021-07-22 14:04:52 · 978 阅读 · 0 评论 -
layui 静态 动态复杂多表头
1，我要做什么现在我打算做一个这样的表头2，复杂表头的几个重要属性跨行：rowspan跨列：colspan3，分析需求红色为多表头的一数组橙色为多表头的二维数组4，静态多表头代码 cols: [ [ {field: 'name', title: '标题', width:110, align: 'center', halign: 'center',rowspan:2}, {field: 'name', title: '原创 2021-07-21 10:03:29 · 2243 阅读 · 0 评论 -
layui 表单提交两次
1，先展示一下代码<!DOCTYPE html><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><%@ include file="/**/meta.jsp"%><head> <title>Title</title> <meta name="viewport" content="width=devi原创 2021-07-19 11:04:04 · 1295 阅读 · 0 评论 -
layui 选项卡tab切换事件监听 iframe内容刷新
1，效果图2，tab切换展示代码（datapage.jsp）// 注意：要引入layui相关的插件<body> <div class="layui-tab layui-tab-brief" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">数据</li> <li>查询</li>原创 2021-07-14 16:37:25 · 3626 阅读 · 0 评论 -
layui 单选框radio 监控事件
1，图示2，需求说明：当我选中单选框时，会触发事件，当我取消单选框时，也会触发事件3，代码<div class="layui-input-block"> <input type="radio" name="cbmodel" value="man" lay-filter="cbmodel" lay-skin="primary" title="男"> <input type="radio" name="cbmodel" value="woman" lay-filt原创 2021-06-30 16:13:41 · 712 阅读 · 0 评论 -
layui 数据表格初始化 指定字段默认排序 initSort
1，图示：2，代码：方法一：initSort:initSort var tableLeft; var initSort=(tableLeft&&tableLeft.initSort)?tableLeft.initSort:{"field":"updated","type":"desc"}; console.log(initSort); if(initSort.type === 'asc'){ //升序 data =原创 2021-06-30 14:53:26 · 3104 阅读 · 0 评论 -
layui 编辑框 颜色码
1，效果图2，说明制作一个编辑弹窗，可以设置颜色3，代码 <form class="layui-form" action=""> <input type="hidden" name="id" value="${entity.id}" /> <div class="backgroundf addwrap" style="background: white;"> <div class="layui-form">原创 2021-06-21 09:38:44 · 1023 阅读 · 0 评论 -
layui 读取excel文件 数据表格展示 支持条件查询
1，效果图excel 内容html 页面内容2，文件存放目录：3, 后端代码IndexControllerimport java.io.*;import java.util.*;import com.alibaba.fastjson.JSON;import com.dldata.drgscase.utils.POIUtil;import com.dldata.drgscase.utils.StringUtil;import org.apache.poi.hssf.usermod原创 2021-05-29 17:04:10 · 1277 阅读 · 0 评论 -
input 输入框是否数值验证 onblur onkeyup
1，使用展示1.1. onblur 表示失去焦点时触发失去焦点之后1.2. onkeyup 表示键盘每输完一个字符之后触发，就是键盘上的按键被放开时。2，代码 <input id="age" name="age" class="layui-input" style="width: 130px;height: 24px" onblur ="value = isNaN(parseFloat(value))? 0 : parseFloat(value)"> &l原创 2021-05-27 11:35:22 · 1390 阅读 · 0 评论 -
layui 编辑框 时间控件无法正常显示
1，效果图2，描述：点击时间控件时，时间控件的选择器不显示，一闪而过，换到其他页面，重新返回时，时间选择器正常显示3，解决：添加 trigger:'click’ <label class="layui-form-label">安装日期</label> <div class="layui-input-block marginleft10"> <input type="text" id="InstallTime" name="Install原创 2021-05-17 16:23:59 · 1704 阅读 · 0 评论 -
layui 枚举类 下拉选择框
效果图1，前端代码： <label class="layui-form-label">类别</label> <div class="layui-input-inline"> <select style="width: 200px" name="unitclass" id="unitclass" class="layui-select"> <option value=""></option>原创 2021-05-17 15:27:34 · 369 阅读 · 0 评论 -
layui 将数据以json格式显示 标记json与非json内容
1，效果图：2，前端代码：2.1 父页面前端代码 function unitdataCheck() { dLong.layeropen(800,600, "核算单元完整性校验", "${ctx}/BillItemController/dataJson?mark=unit") }2.2 子编辑页面（CheckJson.jsp）代码 <script type="text/javascript"> layui.config({ b原创 2021-05-13 17:23:43 · 2138 阅读 · 0 评论 -
layui 页面错误弹窗提示
效果图：需求：**错误弹窗的数据内容：bug原因+bug定位**后端代码： try { //略 } catch (Exception e) { log.error("系统错误！"+e.getMessage()+",paramMap:"+JSON.toJSONString(paraMap),e); StringWriter stringWriter=new StringWriter(); //获取原创 2021-03-22 11:40:13 · 3445 阅读 · 0 评论 -
浏览器 分辨率调整 按钮隐藏
一， 起因：由于项目需要部署在不同的服务器上，服务器的分辨率的不同，可能会导致长度不够，操作按钮被隐藏二，解决分辨率调整：如果调节自己电脑的分辨率，调来调去很麻烦，所以使用浏览器调整浏览器分辨率调整步骤：1，在浏览器，打开项目，鼠标右键，点击检查2，点击长方形图标，进入页面，调节分辨率3，退出系统，重新进行登录即可三， 解决按钮隐藏：像这样被隐藏的按钮，建议分两行展示解决思路：1，在按钮外面加一个div 标签2，调节数据表格的边距，为按钮腾出空间...原创 2021-03-19 10:54:02 · 1137 阅读 · 0 评论 -
layui tableSelect 数据表格下拉框 编辑页面默认值
效果图：功能说明：在修改数据的时候，打开编辑页面，打开数据表格下拉框时，已选中原有数据 <label class="layui-form-label">单选</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" class="layui-input" value="${entity.code}" ts-selected="${enti原创 2021-03-18 15:57:50 · 3246 阅读 · 1 评论 -
数据表格展示，读取xml文件 | 代码示例
1，效果图第一页面 list：第二页面 demo：2，xml数据<validatedata> <validateitem name="邮政编码格式" errorinfo="邮政编码格式不正确."> <![CDATA[ function fo(){ var value='#{字段名}'; var valueTrim=value.replace("/^(\s原创 2021-02-01 11:41:51 · 541 阅读 · 0 评论 -
ace 基础使用
效果图：1，导入包在pom.xml文件中配置`<dependency> <groupId>org.webjars</groupId> <artifactId>ace</artifactId> <version>04.09.2013</version></dependency>2，引入包<script type="text/javascript" src="${ctx}原创 2021-01-28 17:39:14 · 1102 阅读 · 0 评论 -
layui 手风琴折叠
效果图：1，引入文件注意：文件的位置不一样，引入的路径也不同 <link rel="stylesheet" href="/static/layui/css/layui.css" /> <script type="text/javascript" src="/static/layui/layui.js"></script>2，编写div样式<div style="width: 100%; " id="divtitle" >原创 2021-01-26 14:37:05 · 2546 阅读 · 1 评论 -
layui 复选框全选失去效果——soulTable
1，如图问题：当我选择标题栏的复选框的时候，数据表格中的数据复选框并没有选中，全选效果失效2，代码 <div style="padding: 3px 0;"> <table id="testlayuitable" lay-filter="testlayuitable"></table> </div> function business(data) { var table = layui.table;原创 2021-01-22 14:04:38 · 1445 阅读 · 0 评论 -
layui 前端分页 后端分页
1，前端分页效果图：代码： layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,limit:2000 // 当前页数 ,limits:原创 2020-11-18 15:28:09 · 3213 阅读 · 0 评论 -
layui 数据表格 数据多颜色显示
1，效果图：2，代码： {field: 'reportstatus', title: '上报状态', width: 150, align: 'left' , halign: 'center', sort: true, filter: true, templet: function (row) { if (row.reportstatus == "0") { return '<span style="color: #409EFF;"原创 2020-11-17 16:25:50 · 1226 阅读 · 0 评论 -
layui addNavTab 导航栏添加选项卡 layer 全屏弹窗
1，导航栏弹窗解释：点击父页面按钮，跳转到新的导航栏页面，两个页面同级如图：代码：window.topWin.addNavTab(title, url,id);2，全屏页面弹窗解释：在父页面的基础上，点击页面按钮，新的占据全屏的页面如图：代码： window.topWin.layer.open({ type: 2, // 这里为 2 0:信息框,默认 1:页面层 2:iframe层 3:加载层 4:tips层 title: '信原创 2020-11-17 15:11:33 · 1108 阅读 · 0 评论 -
layui 复选框 数据表格 复选框 全选取消全选
效果图：全选，取消全选流程步骤图：代码：1，按钮控件<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reportall()"> 上报权限全选</button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reviewall()">原创 2020-11-10 14:46:55 · 2693 阅读 · 0 评论 -
layui 页面时间格式转换 datetime
1，数据库存储格式****2，原来格式****3，修改后格式****4，使用代码** {field: 'csDate', title: '出生日期', width: 150, align: 'left', halign: 'center',templet(row){ var lw = new Date(row.csDate); var lastY = lw.getFullYear();原创 2020-11-05 14:16:28 · 2510 阅读 · 0 评论 -
layui扩展组件—— soulTable之编辑筛选条件隐藏
这是官网的效果图但是在使用的使用根本不需要下面的编辑筛选条件，因为标题中漏斗的编辑筛选条件等同于这个操作，所以我要实现的目标就是隐藏下面的图表，操作后效果如图jsp代码： <style> .soul-bottom-contion { height: 31px; /*line-height: 29px;*/ border-top: solid 1px #e6e6e6; dis原创 2020-10-30 17:03:55 · 3124 阅读 · 2 评论 -
layui 数据表格 动态标题栏
效果图步骤1，前端设置url2，后端根据传递参数，查询表的元字段数据，传入前端3，前端接收数据，遍历循环放入列中代码前端代码： var cols = []; function dydatagrid() { if(!interId){ dLong.layerInfo("请选择接口！"); return; } var postdata={ interId:原创 2020-10-21 17:17:40 · 5339 阅读 · 0 评论 -
layui tableSelect 数据表格下拉框 条件查询
效果图：步骤1，引入插件tableSelectlayui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable/tableChild', tableMerge: '原创 2020-10-16 14:53:31 · 10762 阅读 · 1 评论 -
layui 双击，单击表格数据选中 颜色标记选中行
展示图被选中的记录行将会被显式标记代码操作的表格 <div class="fp-table" style="width: 100%"> <table id="hstable" lay-filter="hstool"></table> </div>js layui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 versi原创 2020-10-16 14:19:39 · 1544 阅读 · 0 评论 -
layui 级联下拉框 动态数据
前端代码<!DOCTYPE html><html xmlns:th="http://www.w3.org/1999/xhtml"><head th:replace="common/head::head"></head><body><div class="layui-container"> <bloc...原创 2019-10-28 18:00:02 · 1498 阅读 · 0 评论 -
layui 获取复选框选中状态 checkbox赋值回显
https://blog.youkuaiyun.com/qq_33048333/article/details/80609553转载 2020-09-16 09:51:56 · 1591 阅读 · 0 评论