LAYUI - 技术教程文章
layui table合计但是未计算的解决【代码】
在项目里table开启合计功能，但是并未进行数据计算，后来发现是field写错了的问题，上代码for(var i = 0; i < that.checkboxAll.data.length; i++) {var $data = that.checkboxAll.data[i];if($data.visible) {const val = $data.value;th.push({ field: val, //field是表格数据列的唯一标识，就是这里之前写错了，导致table合计无法实现title: ‘<span class="layui-icon-tips" layui-tip-data=" ‘ + that.checkboxAll.data[i]...
LayUI表单【代码】
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title></title><link rel="stylesheet" href="layui/css/layui.css"></head><body><!-- 你的HTML代码 --><script src="layui/layui.js"></script><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-i...
使用webapi绑定layui数据表格完整增删查改记录
因为每次给layui数据表格绑定数据或者类似操作的时候 总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正以下是一个完整的数据表格i项目的增删改查案例先来看后台LayuiContext db = new LayuiContext(); Result res = null; #region 分页查询/查询参数为姓名/性别/班级 利用if添加判断条件 [HttpGet] public IHttpActionResult StudentList2(int page, int limit, s...
layui form里的select元素动态赋值无效【代码】
需要重新更新渲染下select下拉框使用 form.render(‘select‘); $.ajax({url:url,contentType:"application/json;charset=UTF-8",type:‘GET‘,async:false,success: function (res) {let data=res.results,str1=`<option value="">请选择资产</option>`;data.map((item,index)=>{console.log(item)str1+=`<option value="${item.id}">${item.name}</option>`})$("#quiz2").html(str1);console.log(data);for...
使用layui上传图片【代码】
插入前端代码 jsp<link rel="stylesheet" href="lib/layer/ui/css/layui.css" media="all"><div class="table-box box2"><h3><span>上传图片</span></h3><p class="p1"><a id="photo" class="img"><!-- <img src="images/member_pic1.jpg" /> --></a></p><div class="p2"><script src="lib/jquery/1.9.1/jquery.js"></script><button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>上传图片</b...
layui 操作Tab
https://blog.csdn.net/Ldown2014/article/details/101947506 https://fly.layui.com/jie/64039/原文：https://www.cnblogs.com/hzjdpawn/p/13289608.html
layui 的nav导航 事件监控，获取DOM元素
<body > <ul class="layui-nav layui-nav-tree" lay-filter="leftNav"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;"><i class="iconfont"></i>菜单管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" data-url="menu1.html" data-id=‘1‘ data-text="后台菜单"><span class="l-line"></span>后台...
layui穿梭框使用
《说明先引入layui组件框架》<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><c:set var="ctx" value="${pageContext.request.contextPath}" /><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>穿梭框组件</title> <link rel="stylesheet" href="${ctx}/layui/css/layui.css"></head><body> <div id="t...
后台返回数据渲染Layui表格【代码】
1、layui表格数据返回的格式是有限制的，这时候可以自己定义一个类来接收数据库查出来的结果然后再来渲染layui表格，下面自己定义一个类,这个类定义了两个方法publicclass JsonToken {publicint code;public String msg;public Object data;publicint count;publicint pages; //返回数据符合layui需要的数据格式；第一个是状态码，0表示成功，第二个是提示信息，第三个是要返回的数据，第四个是数据的总数量public JsonToken(int c...
layui细节
lay-filter="test" 相当于 layui给元素起的第二个名字 为了点击时间的时候 属性名（test） 在名字为这个名称的元素里面查找对应的属性框现在有两种方式 我试用过的第一种实在页面上展示直接写表格里面的数据无需 写js 在layui封装的方法里面去写layui-data 标签里面直接写js脚本即可，这种方式的弊端就是无法在页面的表格里面输入图片， 还有就是在js页面上面写 我们可以在写每一列的时候 追加 templet 方法即可在页面表格里面输...
00010 - layui 表格table 高度自适应充满页面
var tableIns = table.render({elem:‘#taskOptLogListTable‘,url: ctx+‘/task/taskOptLog/query‘,error:admin.error,cellMinWidth: 80,toolbar: ‘#taskOptLogListTable-toolbar‘,defaultToolbar: [{title: ‘条件过滤‘ //标题,layEvent: ‘searchDiv‘ //事件名，用于 toolbar 事件中使用,icon: ‘layui-icon-search‘ //图标类名},‘filter‘, ‘print‘, ‘exports‘],cols: [[{field:‘userName‘, title: ‘操作人‘, a...
00014-layui 打开多页签tabs 弹窗layer
showRec:function () {var checkStatus = table.checkStatus(‘egressionListTable‘)var recs = checkStatus.data;if(!recs || recs.length!=1){layer.msg(‘请选择一条记录‘);return;}var rec = recs[0];window.formData = rec;var dialog = layer.tab({tab: [ {title: ‘外出信息‘,content: ‘<iframe src="egressionShow.jsp" frameborder="0" scrolling="auto" name="iframe0"></iframe>‘},{title: ‘审核信息‘,content:...
layui-前端框架整体使用实例【代码】
首先说明一下，本人是在公司先接触使用的layui，一个功能需求下来之后是能够完成的，但是在使用过程中对layui没有一个整体的理解，遇到问题不能灵活的变通。趁着假期对layui来一个整体的梳理与理解，有不对的地方希望能指正。同时在理解的时候也上网搜了很多博文，遇到一些好的，在文章中都会记录下来，并给出链接。 参考layui官网(https://www.layui.com/doc/base/infrastructure.html)1.非模块化和模块化的区别是（参考博文：htt...
取消layUI中日期选择控件默认填充日期【图】
input标签中使用日期选择控件填写，加载时默认填充当前日期，标签设置了placeholder="请选择" autocomplete="off"，但是并没有效果，最后发现可以在绑定时将value一项设置为空，而非new Data（）的值，laydate.render({ elem: ‘#param_monthid‘, type: ‘month‘, format: ‘yyyyMM‘, value: ‘‘, max: year + "年" + month});为什么之前给赋值为new Date了——因为这是别人的代码，原文：https://www.cnblogs....
layui table【代码】
layui table初始化表格var table = layui.table;//转换静态表格 table.init(‘demo‘, {height: 315 //设置高度,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致//支持所有基础参数 });表格重新加载table.reload(‘idTest‘, {url: ‘/api/table/search‘,where: {} //设定异步数据接口的额外参数//,height: 300 }); 原文：https://www.cnblogs.com/0710whh/p/12450277.html
Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载：https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发。bootstrap：同样基于 jquery ,可同样理解为全方便插件范畴。 Vue.js、Angular.js：属于javascript语言编程范畴。原文：https://www.cnblogs.com/ConfidentLiu/p/10394506.html
layui-执行Ajax提交的时候如何获取表单的元素【代码】
1.一个很简单的属性可以让我们获取表单的元素layui属性data.field, 2.详细使用代码如下 //监听提交form.on(‘submit(add)‘, function (data) {//发送异步，把数据提交给php$.ajax({type: ‘post‘,url: ‘/admin/user‘,dataType: ‘json‘,headers: {‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)},data: data.field,success: function (data) {//弹层提示添加成功，并且刷新父页面if (data.status == 0)...
layui时间闪退解决【图】
原文：https://www.cnblogs.com/java-llp/p/11084744.html
layui实现分页【代码】【图】
一 准备工作首先必须先引入layui的完整目录,也就是你下载下来的整个layui的目录都要放在你的资源文件夹下,也就是这个文件目录 刚开始接触layui的时候,以为和jquery,vue等框架一样,只需要引入相应的js文件和css文件,模快便可以直接使用,因此走了不少的弯路,layui是分模块化的,只有在使用的时候,layui会去modules下找你use的那个模块,或者layui.all.js,但是这两种使用方法不同,一般是引用layui.js和layui.css,在把目录放好之后,接下...
LayUI layer.open 按钮居中【代码】
,btnAlign: ‘c‘举例:dialogConfirm(‘分期还款确认‘, ‘/xx1/xx2‘,‘60%‘, ‘80%‘,‘确认‘,‘关闭‘,‘edit-submit‘,function (index, field) {}function dialogConfirm(title, url, width, height,confirm, close,submitId, callback) {layer.open({type: 2, title: title, content: url, area: [width, height],btnAlign: ‘c‘, btn: [‘<i class="layui-icon layui-icon-ok"></i>‘ + confirm, ‘<i class="layui-icon...
layui 动态绑定select【代码】
前言需求：动态渲染select后重新绑定数据。具体步骤1.需要设置绑定的容器。代码如下所示：<div class="layui-form"><div class="layui-form-item"><div class="layui-form-label"><span style="color:red;">*</span>物料品种</div><div class="layui-input-block"><select lay-verify="required" name="cChemCode" id="bindChem"><option value=""></option></select></div></div> </div>** 注意：最外层的可以不是<form>标签,但是...
Django+Layui学习二：Tabs【代码】【图】
前言上一篇我们制作了简单的后台布局，并且动态加载了侧边栏的节点以及子节点，本篇来做一下tabs。首先我们来看下tab创建的简单流程：按照流程图我们可以开始编写html以及js代码：1<div class="layui-body">2<!-- 内容主体区域 -->3<div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">4<ul class="layui-tab-title"></ul>5<div class="layui-tab-content"></div>6</div>7</div> 1 <script>2//JavaScr...
layUI+mvc动态菜单控制器
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Text;using LayUIMvcTest.Models;namespace LayUIMvcTest.Controllers{ public class MainController : Controller { // // GET: /main/ public ActionResult Index() { return View(); } #region 加载菜单数据 /// <summary> //...
00021-layui 上传excel，java 解析excel 数据【代码】
按钮：<button class="layui-btn layui-btn-sm" id="upload_importCustomer">导入</button> upload 控件渲染：upload.render({elem: ‘#upload_importCustomer‘,url: ctx+‘/customer/customer/importData/‘,accept: ‘file‘ //普通文件,data:{importType:1},done: function(response){layer.msg(‘导入完成，若无数据，请到【导入记录】页面查看,或5秒后刷新‘);setTimeout(function () {active.reload();},3000);},error: fun...
layuiTable根据返回的JSON内容改变指定行的颜色【代码】
// 渲染表格var insTb = table.render({elem: ‘#tableArticles‘,//url: ‘../../json/loginRecord.json‘,url: ‘{:url(‘hospital/index‘)}‘,limit: 10,page: true,cellMinWidth: 100,title: ‘预约列表‘,cols: [[{field:‘name‘,title: ‘姓名‘,width:80,align: ‘center‘},{field:‘sex‘,title: ‘性别‘,width:60,align: ‘center‘},{field:‘old‘, title: ‘年龄‘,width:60,align: ‘center‘},{field:‘tel‘, t...
layui的table渲染cols的标题错乱问题,number转成string【图】
在表格的列中,运用了一下字典查出来的key值做列名,方便不定量统计用,结果发现后台传的值为 0,1,2,3...,到前台也是,但是在table.render了之后却发生了变化.猜测在添加序号的时候,默认第一列序号占据了 0(int) 列,然后将自己的变量的第一个0,给覆盖成了3 .试图删除序号列之后又发现第一个变成了 2 ,猜想因为是数字列,被layui给处理过了. 于是测试,使用反撇号,加入cols中, >>> ,问题解决,从 0 开始排序,但是因为部分浏览器不支持 ` ,...
layui——Cannot create property 'LAY_TABLE_INDEX' on number '1'【图】
前言用layui写的后台，PHP处理好数据传输过来的时候报错了，最后发现是数据处理成layui格式的时候出错了，直接传了json对象过来，layui需要的是一个json的数。 解决外面套成数组即可~ ' on number '1'' ref='nofollow'>layui——Cannot create property 'LAY_TABLE_INDEX' on number '1'原文：https://www.cnblogs.com/wangyang0210/p/10789912.html
layui文件上传进度条（模拟）【代码】【图】
1.修改上传组件js(没测)https://blog.csdn.net/weixin_42457316/article/details/81017471https://www.cnblogs.com/youmingkuang/p/9183528.htmlhttps://fly.layui.com/jie/19430/ 1、upload.js 扩展功能利用ajax的xhr属性实现该功能修改过modules中的upload.js文件功能具体实现：在js文件中添加监听函数 //创建监听函数var xhrOnProgress=function(fun) {xhrOnProgress.onprogress = fun; //绑定监听//使用闭包实现监听绑retur...
Django+Layui学习二：Table【代码】
前言前面学习了后台布局和tabs的使用，本次来学习下layui中的table和Django联动。 一、Django设置1、models，简单的两个类，一个是问题类型，一个是问题的详情。 1# Create your models here. 2 3#问题类型 4class ProblemType(models.Model):5 problem_type=models.CharField(max_length=50,verbose_name=‘问题类型‘)6 7class Meta:8 verbose_name=‘问题类型‘ 9 verbose_name_plural=verbose_name 1011de...
layui使用iconfont【代码】【图】
layui的图标取自于阿里巴巴的矢量图标库 Iconfont，同样的，这篇教程也是基于Iconfont进行扩展。第一步，通过浏览器打开 http://iconfont.cn/ ，访问阿里巴巴矢量图标库。第二步，通过右上角的用户图标，授权登陆一个账号，在此我选择使用Github作为登陆账号。第三步，登陆完成后，让我们稍微了解下基本的操作。Iconfont提供了非常多的图标库，有官方的图标资源，也有一些第三方的素材。选择方式多种多样，更能集成一些彩色图标到项...