Layui

layui使用中可能遇到的问题参考layui官网

Layui搜索删除

查询所有分页查询搜索删除数据

若UI隐藏类似无效（解决版本）：自己jquery先，layui后

<script src="../js/jquery-1.10.2.js"></script>
<script src="layui/layui.js" ></script>

layui引入顺序（外部jquery–layui css–layui js）

<script src="../Jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

创建表格

<div style="width:1265px;height: 600px;margin-left: 250px;margin-right:250px;margin-top:20px">
    <div style="width:100%;height: 600px">
        <table id="a1" lay-filter="test" lay-data="{id: 'idTest'}"></table>
    </div>
</div>

数据载入

<script src="layui/layui.js" ></script>
<script src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript">
    layui.use('table', function(){
        var table = layui.table;
        var tableIns=table.render({
             elem: '#a1' //表格id
            ,toolbar:'#toolbarDemo'//工具栏ID
            ,height: 670//高度
            ,even:true //隔行变色
            ,defaultToolbar: ['filter', 'exports', 'print'] //头部工具
            ,url: '/examproject/TestlogServlet/seall' //数据接口（servlet 发送json数据）
            ,page: true //开启分页
            ,limit:20
            ,cols: [[ //表头 field与json的字段名相同
                 {field: 'exam_record_id', title: 'ID',align:'center',hide:true}
                ,{field: 'stname', title: '姓名',align:'center'}
                ,{field: 'exam_name', title: '考试名称', align:'center'}
                ,{field: 'exam_type', title: '考试类型',  align:'center'}
                ,{field: 'exam_zt', title: '考试状态',  align:'center'}
                ,{field: 'exam_limit_time', title: '做题时间（分钟）', align:'center'}
                ,{field: 'exam_score', title: '考试成绩', sort: true,align:'center'}
                ,{field: 'exam_time', title: '考试成绩', sort: true,align:'center'}
                ,{title:'操作',align:'center',toolbar : '#bar'}
            ]]
            ,id: 'testReload' //重载的ID
        });
        
        table.on('tool(test)', function(obj) {
            dataall=obj.data;
            var data = obj.data;//获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'del') {
                //删除
                var tb=data.exam_record_id;//得到id
                layer.confirm('确认删除嘛？', function(index){
                    $.post("/examproject/TestlogServlet/de",{"id":tb},function(da){//(执行删除的servlet)
                        var ii = layer.load();
                        //此处用setTimeout演示ajax的回调
                        setTimeout(function(){
                            layer.close(ii);
                        }, 500);
                        if(da=="desug"){
                            layer.msg("删除成功！");
                            //刷新
                            Flush();
                        }else{
                            layer.msg("删除失败！");
                            Flush();
                        }
                    })
                });
            }
        });
       /* //搜索
       $('#sear').on('click', function() {
            layer.msg("点击");
            var na=$("#cpk").val();
            layer.msg(na);
            if(na==''){
                Flush();
            }else{
                table.reload('testReload',{
                    url:'/examproject/TestlogServlet/serach',
                    method:"post",
                    request:{
                        pageName:'page',
                        limitName:'pageSize'
                    },
                    where:{
                        seaname:na
                    },
                    page:{
                        curr:1
                    }
                })
            }
        });*/
        //搜索
        var $ = layui.$, active = {
            reload: function(){
                var na=$("#cpk").val();//得到用户输入的值
                table.reload('testReload', {
                //搜索的servlet
                    url:'/examproject/TestlogServlet/serach',
                    request:{
                        pageName:'page',
                        limitName:'pageSize'
                    },
                    text:{
                    //无数据时提示
                        none: '空空如也！'
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                    //传值到servlet
                        seaname:na
                    }
                });
            }
        };
        //解决只能搜索一次的Bug
        $('body').on('click','.layui-form-item #sear',function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    //刷新
    function Flush(){
        layui.use('table', function(){
            var table = layui.table;
            var tableIns=table.render({
                elem: '#a1'
                ,toolbar:'#toolbarDemo'
                ,height: 670
                ,even:true
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,url: '/examproject/TestlogServlet/seall' //数据接口
                ,page: true //开启分页
                ,limit:20
                ,cols: [[ //表头
                    {field: 'exam_record_id', title: 'ID',align:'center',hide:true}
                    ,{field: 'stname', title: '姓名',align:'center'}
                    ,{field: 'exam_name', title: '考试名称', align:'center'}
                    ,{field: 'exam_type', title: '考试类型',  align:'center'}
                    ,{field: 'exam_zt', title: '考试状态',  align:'center'}
                    ,{field: 'exam_limit_time', title: '做题时间（分钟）', align:'center'}
                    ,{field: 'exam_score', title: '考试成绩', sort: true,align:'center'}
                    ,{field: 'exam_time', title: '考试成绩', sort: true,align:'center'}
                    ,{title:'操作',align:'center',toolbar : '#bar'}
                ]]
                ,id: 'testReload'
                ,limit:20
            });
        });
    }
    //重置
    function res(){
        $("#cpk").val("");
    }

Layui选项卡

当点击某个按钮的时候跳到指定的选项卡

layui.use('element', function(){
    var element = layui.element;
    //docDemoTabBrief:为选项卡div的lay-filter  ml：为选项卡的lay-id
    element.tabChange('docDemoTabBrief', 'ml');
});

选项卡下标

layui.use('element', function() {
    var element = layui.element;
    element.on('tab(docDemoTabBrief)', function(data){
        var ind=data.index;//得到点击的nav下标
        if(ind==0){
            //点击课程概述的时候
            $(".course-content").css("min-height","500px")//设置最小高度
        }else if(ind==1){
            //点击目录的时候
            var cf=$("#bk").outerHeight(true);//得到div的高度
            var vf=100+cf;
            $(".course-content").css("min-height",vf);
        }else if(ind==2){
            //点击评论的时候
            $(".course-content").css("min-height","2032px")
        }
    });
})

layui弹出层

layui弹出层使用（将弹出层放到 body下面弹出层默认隐藏若不隐藏则是jquery和layui.js位置放错！）

<div style="padding: 20px; display: none" id="df2">
	<div class="layui-form-item" style="display: table-cell; width: 50%">
		<label class="layui-form-label">车辆品牌：</label>
		<div class="layui-input-block">
			<input type="text" name="name" id="tjcname" placeholder="请输入车辆品牌"
				autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>
	<br>
	<div class="layui-form-item" style="display: table-cell; width: 50%">
		<label class="layui-form-label">车辆车牌：</label>
		<div class="layui-input-block">
			<input type="text" name="name" id="tjcnumber" placeholder="请输入车辆车牌"
				autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>
	<br>
	<div class="layui-form-item" style="display: table-cell; width: 50%">
		<label class="layui-form-label">车辆颜色：</label>
		<div class="layui-input-block">
			<input type="text" name="name" id="tjccolor" placeholder="请输入车辆颜色"
				autocomplete="off" class="layui-input" lay-verify="required">
		</div>
	</div>
	<div class="layui-form-item" style="margin-left: 40%" id="bu3">
		<div class="layui-btn-group">
			<button class="layui-btn" lay-submit="" lay-filter="add_submit">添&ensp;加</button>
			<button type="reset" class="layui-btn layui-btn-primary" onclick="czk()">重&ensp;置</button>
		</div>
	</div>
</div>

触发某个事件时打开弹出层

layer.open({
    type : 1,
    title : '编辑学校',//标题
    area : [ '500px', '220px' ],//宽高
    shadeClose : true,//点击遮罩关闭
    content : $('#df')//弹出层的ID id属性
});

关闭弹出层

layer.closeAll();//关闭所有层

编辑删除

<script type="text/html" id="bar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

引用编辑删除html（插入数据时 toolbar:编辑删除的ID）

编辑删除的使用（需要放到插入数据时的function里面）

table.on('tool(test)', function(obj) {
	    dataall=obj.data;//可以得到整行数据  全局变量
		var data = obj.data;//获得当前行数据
	    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		var tr = obj.tr; //获得当前行 tr 的DOM对象
		//编辑
		if (layEvent === 'edit') {
			$("#pp").val(data.cname),//传车名
			$("#cp").val(data.cnumber),//传车牌
			$("#ys").val(data.ccolor),//传颜色
			//弹出一个修改层
			layer.open({
				type : 1,
				title : '编辑车辆消息',
				area : [ '600px', '340px' ],//宽高
				shadeClose : true, //点击遮罩关闭
				content : $('#df'),
			});	
		} else if (layEvent === 'del') {
			//删除
			var tb=data.id;//得到id
			layer.confirm('确认删除嘛？', function(index){
				//
				$.post("test",{"type":"del","id":tb},function(da){
					 var ii = layer.load();
					    //此处用setTimeout演示ajax的回调
					    setTimeout(function(){
					      layer.close(ii);
					    }, 500);
					layer.msg("删除成功！");
					//刷新
					cx();
				});
		      });	
		}
	});

头部工具栏

<script type="text/html" id="toolbarDemo" >
 <div style="margin: 10px 0 0px 1%;width: 99%" id="toolbarDemo">
    <div style="display: table-cell">
        
            <div class="layui-input-block" style="display: table-cell">
                <!--            <label>&emsp;接&emsp;口&emsp;</label>-->
                搜索车牌：<div class="layui-input-inline" style="width: 260px">
                  <input type="text" id="cpk" name="cnumber" placeholder="请输入车牌 支持模糊查询"
                           autocomplete="off" class="layui-input">
                </div>
         
            </div>
            <div style="display: table-cell" class="layui-form-item">
                <button class="layui-btn layui-btn-sm layui-btn-danger" data-type="reload" id="sear" lay-submit="" lay-filter="search"
                        style="margin-left: 15px"><i class="layui-icon" >&#xe615;</i>搜&emsp;索
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm" onclick="res()">
                    <i class="layui-icon">&#xe631;</i>重&emsp;置
                </button>
            </div>
      
    </div>
    <div style="display: table-cell">
        <div style="display: table">
            <!--新增-->
            <div style="display: table-cell">
                <button id="add" onclick="tj()" class="layui-btn layui-btn-sm" style="margin-left: 15px">
                    <i class="layui-icon">&#xe608;</i> 新&emsp;增
                </button>
            </div>
            <!--刷新-->
            <div style="display: table-cell;">
                <button id="refresh" onclick="cx()" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-left: 15px">
                    <i class="layui-icon">&#xe669;</i> 刷&emsp;新
                </button>
            </div>
        </div>
    </div>
</div>
</script>

UI表格放图片

数据库加载的时候默认是字符串是图片的路径

layui.use('table', function() {
    var table = layui.table;
    var tableIns = table.render({
        elem: '#a1'
        , height: 670
        , even: true
        , defaultToolbar: ['filter', 'exports', 'print']
        , url: 'colljson' //数据接口
        , page: true //开启分页
        , title: '中国大学'
        , limit: 20
        , cols: [[ //表头
              {field: 'universityNo', title: 'ID', align: 'center'}
            , {field: 'badge', title: '徽章', align: 'center',templet:function(d){
                var ba=d.badge;
                if(ba==""){
                    return ''
                }else{
                    return '<div><img  src="/UniversityCornell/'+ba+'"></div>'
                }
                }}
            , {field: 'schoolName', title: '学校名称', align: 'center'}
            , {field: 'ranking', title: '学校排行',sort: true, align: 'center'}
            , {field: 'p985', title: '985', align: 'center'}
            , {field: 'p211', title: '211', align: 'center'}
            , {field: 'founding_time', title: '创建时间', sort: true, align: 'center'}
            , {field: 'intro', title: '介绍', align: 'center'}
            , {field: 'province', title: '省会', align: 'center'}
            , {field: 'address', title: '地址', align: 'center'}
            , {title:'操作',align:'center',toolbar : '#bar',width: 140}
        ]]
        , id: 'testReload'
    });
 });

代码解释：

badge：为图片字段如果ba等于空的时候就什么也不显示，如果不为空则设置div里面放images

var ba=d.badge 得到的是图片的路径也就是数据库的字段值

{field: 'badge', title: '徽章', align: 'center',templet:function(d){
               var ba=d.badge;
               if(ba==""){
                   return ''
               }else{
                   return '<div><img  src="/UniversityCornell/'+ba+'"></div>'
               }
               }}

图片那格高度为自动

.layui-table-cell{
    height: auto;
}

全局异常界面

<%--
  Created by IntelliJ IDEA.
  User: 羡羡
  Date: 2021/7/26
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>出错了</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        .layui-fluid{
            color: #666;
            line-height: 24px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            position: relative;
            margin: 0 auto;
            padding: 15px;
        }
        .layadmin-tips{
            color: #666;
            line-height: 24px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            margin-top: 30px;
            text-align: center;
        }
        .layui-icon{
            line-height: 24px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            text-align: center;
            -webkit-user-select: none;
            font-family: layui-icon!important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-size: 300px;
            color: #393D49;
        }
        .layui-text{
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            text-align: center;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            line-height: 22px;
            color: #666;
            width: 500px;
            margin: 30px auto;
            padding-top: 20px;
            border-top: 5px solid #009688;
            font-size: 20px;
        }
    </style>
</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
    <div class="layadmin-tips">
        <i class="layui-icon" face>&#xe664;</i>

        <div class="layui-text" style="font-size: 20px;">
            好像出错了呢
        </div>

    </div>
</div>
</body>
</html>

layui进度条

<div style="margin-top: 15px; width:300px;margin-left: 200px;">
        <div class="layui-progress" lay-filter="demo" layui-bg-blue>
          <div class="layui-progress-bar layui-bg-blue layui-font-12 "></div>
        </div>
    </div>

js 例如音乐播放（js放入ontimeupdate()函数中）

layui.use('element', function(){
           var element = layui.element;
           //当前时间/总时间*100
           var ti=(time/musleng)*100+"%";
           element.progress('demo', ti);
          });

layui评分效果

得到取到的星星的长度

//显示星星效果
layui.use('rate', function() {
    var rate = layui.rate;
    rate.render({
        elem: '#test1'
        ,choose: function(value){//组件触发回调 value是星星的长度
            $("#xxcd").val(value);//设置隐藏框的值
        }
    });

})

星星只读选项

layui.use(['rate'], function(){
  var rate = layui.rate;
  //基础效果
  rate.render({
    elem: '#test1'
  })
 
  //显示文字
  rate.render({
    elem: '#test2'
    ,value: 2 //初始值
    ,text: true //开启文本
  });
  //只读
  rate.render({
    elem: '#test9'
    ,value: 4
    ,readonly: true
  });
});

星星界面 layui-icon-rate-solid控制星星的颜色是否选中

<div id="test9" class="layui-inline">
    <ul class="layui-rate" readonly>
        <li class="layui-inline">
            <i class="layui-icon layui-icon-rate-solid"></i>
        </li>
        <li class="layui-inline">
            <i class="layui-icon layui-icon-rate-solid"></i>
        </li>
        <li class="layui-inline">
            <i class="layui-icon layui-icon-rate-solid"></i>
        </li>
        <li class="layui-inline">
            <i class="layui-icon layui-icon-rate-solid"></i>
        </li>
        <li class="layui-inline">
            <i class="layui-icon layui-icon-rate-solid"></i>
        </li>
    </ul>
</div>

表格单击事件

//test 为table 标签的lay-filter属性
table.on('row(test)', function(obj){
    var data = obj.data;
});

表格加载完执行回调

写在表格重载里面

done: function(res, curr, count){
    $(".layui-table-body.layui-table-main tr").click();
}

得到表格的第一行数据

$(".layui-table-body.layui-table-main tr:first")

动画旋转效果

layui-anim-loop无限期 layui-anim-rotate 360度旋转 layui-anim必须加

<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 300px;"></i>

是否点第一行

有时候想刚加载完就点击表格的第一行然后赋值到界面中因为每次分页换页的时候都是进行重载所有需要判断是否为第一页而且点过其他页没有

定义变量判断是否点击

var flg = false;//是否点击状态

刚加载完时执行变量

$(function () {
    //得到表格高度
    var tabh=$("#nj").outerHeight(true);
    //设置最大div的高度
    $("#zuida").css("height", tabh);
    flg=true;
})

表格回调后点击第一行且改变状态

done: function (res, curr, count) {

    //当前页 curr
    //当页==1时 执行点击第一行
    if (flg==true && curr == 1) {
        //加载完单击表格的第一行
        $(".layui-table-body.layui-table-main tr:first").click();
    } else {
        flg = false;
    }
}

单击行时获取到并且当用户点其他页回到第一页时不会自动点击第一页的第一条

//行单击事件
table.on('row(test)', function (obj) {
    var data = obj.data;//单行的所有数据
    //通过状态 执行点击事件
    if (flg == true) {
        flg = false;
    }
})

滑块效果

<div id="slideTest5" class="demo-slider" style="padding-top: 15px;"></div>

初始化滑块

layui.use('slider', function() {
    var $ = layui.$,
        slider = layui.slider;

    //单选滑块
    slider.render({
        elem: '#slideTest5'//滑块id
        ,theme: '#1E9FFF'//滑块颜色
        ,value: 5//初始值
        ,max: 20//最大值
        ,change: function(value){//滑块改变事件
            $("#dax").val(value);
        }
    });
});

layui laypage分页

<div id="demo6"></div>

--需要传值给servlet  当前页page 和 每页数量limit

var currpa=0;//当前页
var lims=0;//每页数量
var coun=0;//总条数
$.get("/ExamSystem/VoideServlet/sevallinfo",{"vtyid":"000","page":currpa,"limit":lims},function(da){
    var voliin=JSON.parse(da);
    coun=voliin.count;
    //独立分页
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
            , layer = layui.layer;
        laypage.render({
            elem: 'demo6'
            ,count: coun//总条数
            ,limit:8//每页几条
            ,layout:['prev', 'page', 'next']
            ,theme: '#1E9FFF'
            ,jump: function(obj, first){//分页回调 每次都会触发
                currpa=obj.curr;//当前页
                lims=obj.limit;//每页数量
                $.get("/ExamSystem/VoideServlet/sevallinfo",{"vtyid":"000","page":currpa,"limit":lims},function(re){
                    var voliall=JSON.parse(re);
                    coun=voliall.count;//从新赋值总条数
                    var ht="";
                    for(var i=0;i<voliall.data.length;i++){
                        var obj=voliall.data[i];
                        ht+="<a href=\"/ExamSystem/FrontDesk/videodetails.jsp\" class=\"urlLink\">\n" +
                            "                        <div class=\"is-hover-shadow\">\n" +
                            "                            <div class=\"el-card__body\">\n" +
                            "                                <img src=\""+obj.voidcover+"\" class=\"course-image\">\n" +
                            "                                <div class=\"course-name\">"+obj.voidname+"</div>\n" +
                            "                                <div class=\"course-child-item\"> 共"+obj.vocoun+"节 | "+obj.teachname+" </div>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                    </a>"
                    }
                    $(".course-card-contain").html(ht);
                })
            }
        });
    });
});

layui下拉框

给下拉框循环放ajax请求的数据

<div class="layui-form" lay-filter="test1">
    <div class="layui-input-block" style="margin-left:0px">
        <select name="city" lay-verify="required"  id="se">
        </select>
    </div>
</div>

一定要加上 layui.form.render(‘select’,‘class为layui-form的lay-filter属性’)

$.get("/ExamSystem/SmartTrainServlet/sesubjtype",function(da){
    var suty=JSON.parse(da);
    var ts="<option value=\"\">请选择学科</option>"
    for(var i=0;i<suty.length;i++){
        var obj=suty[i];
        ts+=" <option value=\""+obj.vtyid+"\" >"+obj.vtyname+"</option>"
    }
    $("select").append(ts);
    //重新渲染
    layui.form.render('select','test1');
})

layui折叠面板

以上是动态生成的折叠面板，但是面板没有图标也没有折叠功能动态生成的折叠面板需要手动进行渲染循环完成后执行

layui.use('element', function(){
    var element = layui.element;
    element.render('collapse'); //重新对导航进行渲染。
});

弹出层使用layui富文本工具栏无效

报错

解决办法:

原来是这样下面的那个添加是打开弹出层

解决代码

layui分页location后分页条依旧显示1

<script th:inline="javascript">
    var element = layui.element;
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //页码完整功能
        laypage.render({
            elem: 'page'
            //mybatis分页插件的总页数
            , count: [[${payli.getTotal()}]]
            ,hash:true
            ,hash: 'fenye' //自定义hash值
            //当前mybatis分页插件的当前页
            ,curr:[[${payli.pageNum}]]
            , layout: ['count', 'prev', 'page', 'next']
            , jump: function (obj,first) {
                if(!first){
                    location.href="/paylog/"+obj.curr;
                }
            }
        });
    });
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });
</script>

城市选择器弹框后关闭第二次选择地点消失败

主要设置界面的置顶的顺序

layer.open({
            type : 1,
            title : '编辑车辆消息',
            area : [ '600px', '340px' ],//宽高
            shadeClose : true, //点击遮罩关闭
            content : $('#df'),
            cancel: function(index, layero){
                demo2_1.clearCheckedNodes();
                $('#cp').val('');
                $('#ys').val('');
                $('#hm').val('');
                layer.close(index)
            },
            zIndex: 2, //重点1
        });