国产前端框架LayUI使用教程

最新推荐文章于 2024-06-24 23:23:11 发布

是赵敢敢啊

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量5.5k

点赞数 12

分类专栏：前端笔记文章标签： javascript layui jquery ajax

本文链接：https://blog.csdn.net/qq_42059717/article/details/123294008

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

第十三章 LayUI

官方文档https://www.layui.com/doc

1.杂七杂八知识点

使用LayUI需要引LayUI的源码，之后在引入layui.css以及layui.js

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

属性	参数	含义
name=“viewport”		屏幕可视区域
content	width	可视区域的宽度，值可为数字或关键词device-width 表示设备的理想宽度
	height	同width
	intial-scale	页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
	maximum-scale=1.0, minimum-scale=1.0	可视区域的缩放级别，
	maximum-scale	用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
	user-scalable	是否可对页面进行缩放，no 禁止缩放或者填写 0 同样表示禁止缩放

<meta name="apple-mobile-web-app-capable" content="yes">
<!--
	删除默认的苹果工具栏和菜单栏。
	需要显示工具栏和菜单栏时，不需要添加，默认值为yes，即显示。
-->

<!--引入Layui的css样式-->
<!--media:表示引入的css适用于何种设备，all表示可以针对所有设备-->
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>

移除链接多余动作

<a href="javascript:;"></a>
<!--如果不设置此参数则页面会刷新-->

想要在子页面让父页面关闭子页面需要使提交事件return false

1.加载layui组件

注意：如果中括号内的组件书写错误，或报错404，点击之后就能看到哪个组件写错了

/*
*   layui.use(['被调用的组件1','被调用的组件2','被调用的组件N'],function(){
 *
*   });
*
*   layui.use([]);
*
*   layui.use(['XXX'],function(){
*       XXX
*   });
           
* */
layui.use(['layer','form'],function () {
    let layer = layui.layer;
    let form = layui.form;
    //layer.msg("你好世界~");
    //layer.alert('HelloWorld~');
    layer.confirm('你要给世界打个招呼吗？');
});
/*layui.use(['layer', 'form'], function(){
    let layer = layui.layer
        ,form = layui.form;
    var $ = layui.$ //表示启用内置的jQuery
    layer.msg('Hello World');
});*/

注意：模板字符串与jsp中的EL表达式冲突，需要在模板字符串的 $ 前边加一个 \

`name=\${name}`

2.同步查重🐴

友情提示巨坑

必须使用同步请求 async:false
传值用value data: tel=\${value}
在外部书写错误提示信息
表单提交需要 return false;

异步不出success函数，所以才需要在外边调用

表单被禁止提交之后可以使用 $(location).attr(‘href’,url)的方式进行跳转

<input type="text" name="tel" class="layui-input " lay-verify="required|phone|same"  value="${u.getTel()}">
<script>
	layui.use('form',function(){
        let form = layui.form
        form.verify({
            same(value,item){
                let msg = ''
                console.log(value)
                $.ajax({
                    url : 'check_tel',
                    data: `tel=\${value}`,
                    async : false,
                    dataType : 'text',
                    success(data){
                        console.log('回调成功了')
                        console.log(data)
                        //注意：如果在外部定义变量，在ajax中获取值给变量，则必须使用同步请求。
                        //因为异步请求最后进行ajax请求，则导致变量无值。
                        if(data=='bingo'){
                            console.log(data+'\t'+"bingo")
                            msg = data
                        }
                    },
                    error(err){
                        console.log(err.status)
                    }
                })
                if(msg=='bingo'){
                    return "<span>手机号被占用</span>"
                }
            }
        })
        form.on('submit',function(data){
            return false;
        })
    })
</script>

2. 布局

采用 layui-row 来定义行，如：
采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

1.常规桌面

以PC中型桌面

将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。为例还可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

注意：layui-container的默认宽度是1140px

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="pink">你的内容 9/12</div>
        </div>
        <div class="layui-col-md3">
            <div class="silver">你的内容 3/12</div>
        </div>
    </div>
</div>

2.设置列间距

layui-col-space1列间距为1px

此外还有 3 5 8 10 12 15 18 20 22 28 30

<div class="layui-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="pink">1/3</div>
        </div>
        <div class="layui-col-md4">
            <div class="deeppink">1/3</div>
        </div>
        <div class="layui-col-md4">
            <div class="hotpink">1/3</div>
        </div>
    </div>
</div>

3.栅格嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

<div class="layui-container">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md5">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="red">内部列1</div>
                </div>
                <div class="layui-col-md9">
                    <div class="yellow">内部列2</div>
                </div>
                <div class="layui-col-md12">
                    <div class="blue">内部列3</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="red">内部列1</div>
                </div>
                <div class="layui-col-md9">
                    <div class="yellow">内部列2</div>
                </div>
                <div class="layui-col-md3">
                    <div class="blue">内部列3</div>
                </div>
            </div>
        </div>
    </div>
</div>

4. 兼容性

以下代码黏贴到ie8 9 的body标签内可以兼容layui的栅格

3.图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。

<i class="layui-icon layui-icon-face-smile"></i>
<i class="layui-icon layui-icon-face-smile" style="font-size:150px;color:orangered;padding:20px"></i>

其他图标详见https://www.layui.com/doc/element/icon.html

4.动画和按钮

1. 动画

参数	样式
layui-anim-up	从最底部往上滑入
layui-anim-upbit	微微往上滑入
layui-anim-scale	平滑放大
layui-anim-scaleSpring	弹簧式放大
layui-anim-fadein	渐现
layui-anim-fadeout	渐隐
layui-anim-rotate	360度旋转
layui-anim-loop	循环动画

<div style="width:200px;height:100px;background-color:lightblue" class="layui-anim layui-anim-fadein">看看效果呀</div>

<div class="layui-anim layui-anim-rotate">
    <i class="layui-icon layui-icon-refresh-3"
       style="font-size:100px;color:blue;padding:20px"></i>
</div>

2. 按钮

样式	含义
layui-btn	声明为layui的按钮，默认绿色
layui-btn-primary	默认样式
layui-btn-lg	大按钮
layui-btn-radius	圆角按钮
layui-btn-group	按钮组

<button class="layui-btn layui-anim layui-anim-scale">我是一个按钮呀</button>

<!--
图标配合按钮
-->
<button class="layui-btn">
    <i class="layui-icon layui-icon-praise"></i> 添加
</button>

<button class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon layui-icon-login-wechat"></i>
</button>

<!--
按钮组
-->
<div class="layui-btn-group">
    <button class="layui-btn">增加</button>
    <button class="layui-btn">编辑</button>
    <button class="layui-btn">删除</button>
</div>

<div class="layui-btn-group">
    <button class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
    <button class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe602;</i>
    </button>
</div>

<div class="layui-btn-group">
    <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
</div>

5.表单

表单的样式为layui-form
表单中的子元素为layui-form-item
需要在script中启用组件layui.use(‘form’,function(){})
在表单中书写的标签的事件需要书写在form.on(事件(监听器),function)中
表单中的验证规则书写在form.verify({})中

<form class="layui-form">
    <div class="layui-form-item" >
    </div>	
</form>

1.label

<!--标签-->
<label class="layui-form-label">标签</label>

2.input

其中lay-filter为监听器，lay-verify是验证规则，layui自带的验证规则有required(必填)、email(邮箱)、phone(三大运营商的手机号)、url(网址)、number(数字)、date(日期)、identity(身份证),多个验证规则用 | 隔开,也可以书写自己的验证规则

输入框

<div class="layui-input-inline">
    <input type="text" lay-filter="input" lay-verify="required">	
    <div class="layui-form-mid layui-word-aux">
        这里是居中的提示信息
    </div>
    <!--
		layui-form-mid文字居于输入框中部
		layui-word-aux提示文字样式	
	-->
</div>
<input lay-verify="required|phone|test">

自定义验证规则书写注意规范

<script>
	//使用表单必须要启用组件
    layui.use('form',function(){
        let form = layui.form
        //自定义验证规则
        form.verify({
            //test : function(value,item){}
            //ES6钩子函数
            test(value,item){
                //value表示的是输入框内书写的值
                //item是验证的这个input标签
            }
        })
    })
</script>

范围

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">范围</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>

下拉列表框

<div class="layui-form-item">
    <label class="layui-form-label">归属地:</label>
    <div class="layui-input-inline">
        <select name="city" lay-verify="required"
                lay-filter="et">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2" disabled >广州</option>
            <option value="3">深圳</option>
            <option value="4">山东</option>
        </select>
    </div>
</div>

多选框

title 任意字符设定元素名称，一般用于checkbox、radio框，lay-skin switch（开关风格） primary（原始风格）定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式，lay-ignore 任意字符或不设值是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格

lay-filter 任意字符事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。

<div class="layui-form-item">
    <label class="layui-form-label">爱好:</label>
    默认风格:
    <div class="layui-input-block">
        <input type="checkbox" name="like" title="写作" value="write">
        <input type="checkbox" name="like" title="阅读" value="read" checked>
        <input type="checkbox" name="like" title="发呆" value="fadai">
    </div>
</div>

特殊复选框

开开或者关上的值是自己设置的而不是 true false

<div class="layui-form-item">
    <label class="layui-form-label">开关:</label>
    <div class="layui-input-block">
        <input type="checkbox" name="xxx" lay-skin="switch" lay-filter="myswitch" value="iloveetoak">
        <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
        <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
        <input type="checkbox" name="aaa" lay-skin="switch" disabled>
    </div>
</div>

单选框

<div class="layui-form-item">
    <label class="layui-form-label">单选框:</label>
    <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男">
        <input type="radio" name="sex" value="女" title="女" checked>
    </div>
</div>

获取单选按钮的值

<script	>
	let type
    form.on('radio',function (data) {
        type = data.value
        console.log(type)

    })
</script>

文本域

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域:</label>
    <div class="layui-input-inline">
        <textarea name="weibo" placeholder="请输入内容" class="layui-textarea"
                  cols="30" rows="5"></textarea>
    </div>
</div>

提交

<div class="layui-form-item">
    <div class="layui-input-block">
   	<!--lay-submit	无需填写值,绑定触发提交的元素，如button-->
        <button class="layui-btn" lay-submit lay-filter="myFormSub">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>

监听提交

form.on('submit(formDemo)', function(data){
	layer.msg(JSON.stringify(data.field));
	return false;
});

3.监听事件

监听提交

layui.use(['form','layer'], function(){
	let form = layui.form
	,layer = layui.layer;

	//监听提交
	form.on('submit(formDemo)', function(data){
		layer.msg(JSON.stringify(data.field));
		return false;
	});
})

验证规则

form.verify({
	etoak:function(value,item){
        console.log(item)
        if(value.length<4||value.length>8){
             return "<span style='color:red'>用户密码必须在4到8位之间</span>";
        }
    }
});     
//可以使用正则表达式
type:[/[A-Za-z0-9_]/,'用户名只能使用大小写字母以及下划线_']

下拉列表框

form.on("select(et)",function(data){
    console.log(data.value);
    /*form.on('select(filter)', function(data){
        console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象
    });*/
});

多选框

form.on('checkbox(filter)', function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //是否被选中，true或者false
    console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
});

switch特殊复选框

form.on("switch(myswitch)",function(data){
    /*console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //开关是否开启，true或者false
    console.log(data.value); //开关value值，也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象*/
    /*
    * layer.tips('显示的信息',在哪个对象处显示);
    * */
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF',data.othis);
    if(data.elem.checked==true){
        console.log("开开啦！！");
        //通过设置value值从而在表单提交时提交value数据
        data.elem.value="我是switch呀！！！";
    }else{
        console.log("关闭啦！！");
        console.log(data.elem.value);
    }
});

单选框

form.on('radio(filter)', function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
});

提交

form.on('submit(myFormSub)',function(data){
    console.log(data.field);
    /*console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段，键值对形式：{name: value}
    return false; //阻止表单提交，action目的地失效。如果需要表单提交，去掉这段即可。*/
    /*

        String~~~~>js对象
    *   JSON.parse()
    *
    *   js对象~~~~~>String
    *   JSON.stringify()
    *
    *
    * */
    layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
    });
    return false;
});

表单初始赋值

//表单初始赋值
//myFormSub 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
/*form.val('myForm', {
    "name":"易途科技" // "name": "value"
    ,"password":"123456"
    ,"price_min":100
    ,"price_max":200
    ,"city":"1"
    ,"quiz":"你工作的第一个城市"
    ,"like[write]":true //复选框选中状态
    ,"weibo":"测试"
});*/

6.导航栏

layui-bg-cyan（藏青）

layui-bg-molv（墨绿）

layui-bg-green （墨绿）

layui-bg-blue（艳蓝）

layui-bg-orange （橙色）

导航栏需要启用element组件

<script src="layui/layui.js"></script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        let element = layui.element;
    });
</script>

1.水平导航

<!--~~~~~~~~~~~~~~~~~~~~1)水平导航~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <!--
                layui-this:表示默认选中
            -->
            <li class="layui-nav-item layui-this"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child">
                <!--
                    这里是二级菜单
                    <dl>
                        <dt>标题1</dt>
                        <dd>标题1内容</dd>
                        <dt>标题2</dt>
                        <dd>标题2内容</dd>
                    </dl>
                -->
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>

带有其他元素的导航栏

<ul class="layui-nav">
            <li class="layui-nav-item">
                <a href="">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">Joshua</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                </dl>
            </li>
        </ul>

2.垂直导航

<ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <!--
                layui-nav-itemed:此属性表示默认展开
            -->
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">默认展开</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">选项1</a></dd>
                    <dd><a href="javascript:;">选项2</a></dd>
                    <dd><a href="">跳转</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <li class="layui-nav-item"><a href="">大数据</a></li>
        </ul>

3.侧边导航

<!--
    注意侧边导航与垂直导航几乎一致，但是会从上到下占满整个浏览器
    <ul class="layui-nav layui-nav-tree layui-nav-side">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">默认展开</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">选项1</a></dd>
                <dd><a href="javascript:;">选项2</a></dd>
                <dd><a href="">跳转</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
    </ul>
-->

4.面包屑

<!--
            <cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
        -->
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">国际新闻</a>
            <a href="">亚太地区</a>
            <a><cite>正文</cite></a>
        </span>
        <hr>
        <!--
            你还可以通过设置属性 lay-separator="-" 来自定义分隔符
        -->
        <span class="layui-breadcrumb" lay-separator="-">
            <a href="">首页</a>
            <a href="">国际新闻</a>
            <a href="">亚太地区</a>
            <a><cite>正文</cite></a>
        </span>
        <hr>
        <span class="layui-breadcrumb" lay-separator="|">
            <a href="">娱乐</a>
            <a href="">八卦</a>
            <a href="">体育</a>
            <a href="">搞笑</a>
            <a href="">视频</a>
            <a href="">游戏</a>
            <a href="">综艺</a>
        </span>
        <hr>

7.选项卡

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>7:选项卡</title>
        <!--
            viewport:
                 屏幕可视区域
            content属性值:
                 width:可视区域的宽度，值可为数字或关键词device-width
                    device-width:表示设备的理想宽度
                 height:同width
                 intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
                 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
                 maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
                 user-scalable:是否可对页面进行缩放，no 禁止缩放 或者填写 0 同样表示禁止缩放
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!--
            删除默认的苹果工具栏和菜单栏。
            需要显示工具栏和菜单栏时，不需要添加，默认值为yes，即显示。
        -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--
            引入Layui的css样式
            media:表示引入的css适用于何种设备，all表示可以针对所有设备
        -->
        <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
    </head>
    <body>
        <!--~~~~~~~~~~~~~~~~~~~~~~~1)tab默认风格~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">我是网站设置的内容</div>
                <div class="layui-tab-item">我是用户管理的内容</div>
                <div class="layui-tab-item">我是权限分配的内容</div>
                <div class="layui-tab-item">我是商品管理的内容</div>
                <div class="layui-tab-item">我是订单管理的内容</div>
            </div>
        </div>
        <br><br><br><br>
        <hr>
        <!--~~~~~~~~~~~~~~~~~~~~~~~2)tab简洁风格~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <!--
            通过追加class：layui-tab-brief 来设定简洁风格。
        -->
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">我是网站设置</div>
                <div class="layui-tab-item">我是用户管理的内容</div>
                <div class="layui-tab-item">我是权限分配的内容</div>
                <div class="layui-tab-item">我是商品管理的内容</div>
                <div class="layui-tab-item">我是订单管理的内容</div>
            </div>
        </div>
        <br><br><br><br>
        <hr>
        <!--~~~~~~~~~~~~~~~~~~~~~~~~3)卡片风格~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height:100px;">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
            </div>
        </div>
        <br><br><br><br>
        <hr>
        <!--~~~~~~~~~~~~~~~~~~~~~~~4)带删除的tab~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <!--
            只要对最外层容器    添加lay-allowClose="true"
            则tab可以删除
        -->
        <div class="layui-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户基本管理</li>
                <li>权限分配</li>
                <li>全部历史商品管理文字长一点试试</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
            </div>
        </div>
        <br><br><br><br>
        <hr>


        <script src="layui/layui.js"></script>
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                let element = layui.element;
            });
        </script>
    </body>
</html>

8.表格

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>9:表格</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
    </head>
    <body>
        <div class="layui-main">
        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~1):普通表格~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <!--
            lay-even	无	用于开启 隔行 背景，可与其它属性一起使用
            lay-skin="属性值"	     line （行边框风格）
                                    row （列边框风格）
                                    nob （无边框风格）	若使用默认风格不设置该属性即可
            lay-size="属性值"
                                    sm （小尺寸）
                                    lg （大尺寸）	若使用默认尺寸不设置该属性即可
        -->
            <table class="layui-table" lay-even="true">
                <!--
                    <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
                    如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
                    <colgroup> 标签只能在 table 元素中使用。
                    支持align valign width span（横跨列数）

                    所有主流浏览器都支持 <colgroup> 标签。
                    Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
                -->
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col width="400">
                </colgroup>
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>加入时间</th>
                    <th>签名</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Amy</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>Elena</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                </tbody>
            </table>
            <div id="etoak"></div>
        </div>
        <script src="layui/layui.js"></script>
        <script>
            layui.use(['laypage'],function(){
                let laypage = layui.laypage;
                /*laypage.render({
                    //注意不要加#
                    elem:'etoak',
                    //总记录数
                    count:18,
                    //每页记录数
                    limit:5,
                    //布局排版
                    layout:['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    first: '首页',
                    last: '尾页',
                    prev:'【上一页】',
                    next:'【下一页】',
                    theme:'#cccc99',
                    hash:true

                });*/
                laypage.render({
                    //分页绑定的容器
                    elem: 'etoak'
                    //总记录数
                    ,count: 200
                    ,first: '首页'
                    ,last: '末页'
                    ,prev: '<em>&lt;---</em>'
                    ,next: '<em>---&gt;</em>'
                    //每页记录数
                    ,limit:5
                    //布局排版
                    ,layout:['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                    ,theme:'#cccc99'
                    ,jump:function(obj,first){
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if(!first){
                            console.log('这不是首次触发分页！！');
                        }
                    }
                });
            });
        </script>
    </body>
</html>

9.轮播图

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>10:轮播</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
        <style>
            body{
                background-color:black;
            }
            div#container{
                text-align: center;
                margin:0 auto;
                width:500px;

            }
            div img{
                width:500px;
            }
            section img{
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="layui-carousel" id="test1" lay-filter="etoak">
                <div carousel-item>
                    <div><img src="image/apple_1.png"></div>
                    <div><img src="image/apple_2.png"></div>
                    <div><img src="image/apple_3.png"></div>
                    <div><img src="image/apple_4.png"></div>
                </div>
            </div>
            <section>
                <img src="image/back.png">
                <img src="image/back2.png">
                <img src="image/back3.png">
                <img src="image/back4.png">
            </section>
        </div>

        <script src="layui/layui.js"></script>
        <script>
            layui.use('carousel', function(){
                let carousel = layui.carousel;
                //建造实例
                /*
                *   carousel.render({
                *       key:value,
                *       key:value,
                *       keyN:valueN
                *   });
                *
                *
                * */

                carousel.render({
                    //指定轮播的容器
                    elem: '#test1'
                    ,width: '500px' //设置容器宽度
                    ,height: '450px' //设置容器高度
                    ,arrow: 'hover' //如何显示箭头
                    /*
                    *   切换箭头默认显示状态，可选值为：
                        hover（悬停显示）
                        always（始终显示）
                        none（始终不显示）
                    *
                    * */
                    //,anim: 'updown'
                    /*
                    *   轮播切换动画方式，
                    *   可选值为：
                        default（左右切换）
                        updown（上下切换）
                        fade（渐隐渐显切换）
                    * */
                    ,autoplay:true //是否支持自动切换
                    ,interval:3000 //自动切换的间隔，单位是ms，不能低于800ms
                    //,index:0 初始开始的条目的索引值，默认从0开始
                    ,indicator:'inside'
                    /*
                    *   指示器位置，可选值为：
                        inside（容器内部）
                        outside（容器外部）
                        none（不显示）

                        注意：如果设定了 anim:'updown'，该参数将无效
                    * */
                });

                //监听轮播切换事件
                /*
                *   模块.on('动作(lay-filter属性名)',function(形参){
                *       可以在模块执行动作执行动作之后拿取一些参数，或者对象
                *   });
                *
                * */
                carousel.on('change(etoak)', function(obj){ //etoak对应容器的 lay-filter="etoak" 属性值
                    console.log(obj.index); //当前条目的索引
                    console.log(obj.prevIndex); //上一个条目的索引
                    console.log(obj.item); //当前条目的元素对象
                });
            });
        </script>
    </body>
</html>

10拓展，原生js版折扣系统

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <label >用户名</label>
        <input type="text" name="name" placeholder="用户名需要在六到八位之间">
        <span id="name_msg"></span>
        <br>
        <label >筹办日期</label>
        <input type="date" name="date">
        <br>
        <label >预算金额</label>
        <input type="radio" name="pay" value="20000" >2w
        <input type="radio" name="pay" value="50000" >5w
        <input type="radio" name="pay" value="100000" >10w
        <br>
        <label >选择优惠</label>
        <select name="zhekou" id="zhekou">
            <option value="1">不使用优惠</option>
        </select>
        <br>
        <label >优惠后金额</label>
        <input type="number" name="after" value="" disabled>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="取消">
        <script src="script/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                $('input[name=name]').blur(function () {
                    let val = $.trim($(this).val())
                    if(val.length < 4 || val.length > 8){
                        $('span#name_msg').html('用户名需要在四到八位').css('color','red')
                        return
                    }
                    $('span#name_msg').html('用户名可以使用').css('color','green')
                })
                let ar = $('input:radio')
                let $jq_sel = document.getElementsByTagName('select')[0]
                console.log($jq_sel)
                ar.change(function () {
                    console.log($(this).val())
                    if($(this).val() == '20000'){
                        $jq_sel.options[1] = new Option('九八折优惠','0.98')
                        while($jq_sel.length >2){
                            $jq_sel.removeChild($jq_sel.item(2))
                        }
                    }
                    if($(this).val() == '50000'){
                        $jq_sel.options[1] = new Option('九八折优惠','0.98')
                        $jq_sel.options[2] = new Option('九五折优惠','0.95')
                        while($jq_sel.length >3){
                            $jq_sel.removeChild($jq_sel.item(3))
                        }
                    }
                    if($(this).val() == '100000'){
                        $jq_sel.options[1] = new Option('九八折优惠','0.98')
                        $jq_sel.options[2] = new Option('九五折优惠','0.95')
                        $jq_sel.options[3] = new Option('九折优惠','0.9')
                    }

                })
                let price
                ar.on('change',function () {
                    price = $(this).val()
                    $('input:disabled').val(new Number(price))
                })
                //console.log($($jq_sel).length)
                $($jq_sel).on('change',function () {
                    /*let price
                    ar.each(function (index) {
                        if(ar[index].checked){
                            console.log(ar[index])
                            price = ar[index].value
                        }
                    })*/
                    console.log('选中的价格'+ price)
                    console.log('选中的折扣'+ $(this).val())
                    $('input:disabled').val(new Number(price) * new Number($(this).val()))
                })


            })
        </script>
    </body>
</html>

11.给表格添加工具栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>使用LayUI处理动态表格</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <%--
            步骤1:拿取查询的动态表格，存在分页 排序 导出等功能，没有
            查看 编辑 删除功能
            步骤2:组装最右侧的工具栏模块，实现 查看 编辑 删除功能
            步骤3:添加操作
            步骤4:模糊查询
        --%>
        <div id="container">
            <%--
                步骤3:此处为添加操作
            --%>
            <button class="layui-btn layui-btn-normal layui-btn-radius" id="add">添加学生</button>

            <%--
                步骤4:此处为姓名模糊查询
            --%>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input"
                       style="border-radius:20px;padding:10px">
            </div>
            <button class="layui-btn layui-btn-normal layui-btn-radius" id="checkname">查询</button>
            <%--
                步骤1:此处为动态表格查询功能，自带分页，导出等功能
            --%>
            <table id="demo" lay-filter="etoak"></table>
            <%--
			   步骤2:此处为表格最右侧查询 查看 编辑 模块
			--%>
            <script type="text/html" id="toolbar">
                <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
            </script>
        </div>
        <script src="layui/layui.js"></script>
        <%--
            注意不要使用jQuery3.4.1版本的类库文件
        --%>
        <script src="script/jquery-1.10.2.js"></script>
        <script>
            //将所有代码封装进etoak方法是为了在子层调用，子层调用只能调用全局级的函数
            function etoak() {
                //注意全程一定使用单引号
                layui.use(['table', 'layer'], function () {
                    //加载table模块
                    let table = layui.table;
                    //加载层模块
                    let layer = layui.layer;
                    ///
                    //                                          //
                    //            步骤4：以下为姓名模糊查询业务逻辑 //
                    ///
                    //拿取查询按钮
                    let checkBtn = $("button#checkname");
                    //解除按钮上已经存在的绑定，在给元素绑定事件之前，如果此函数需要多次调用请先解除绑定
                    checkBtn.unbind();
                    //当进行模糊查询时，点击按钮
                    checkBtn.click(function(){
                        if($.trim($('input[name=name]').val()).length<1){
                            /*
                                layer的使用请参照 pages/layerdemo.html
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                注意layer可以作为独立组件使用，也可以根据layui类库使用
                            *   let index = layer.alert("")
                            *   let index = layer.confirm("")
                            *   let index = layer.msg("")
                            *   let index = layer.tips("")
                            *
                            *   layer中的各个常见参数如下:
                            *
                            *   layer.open({
                            *       number:值,
                            *       title:'标题类型'
                            *       content:''
                            *   });
                            *   ~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            *   number (number 默认 0):
                            *   layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
                            *   若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
                            *
                            *   title (String|Array|boolean)
                            *   title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
                            *   若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，
                            *   数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                            *
                            *   content (String|DOM|Array，默认：'')
                            *   content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
                            *
                            *   示例：
                            *
                            *   //1:页面层
                            *   layer.open({
                                  type: 1,
                                  content: '传入任意的文本或html' //这里content是一个普通的String
                                });

                                layer.open({
                                  type: 1,
                                  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                                });

                                //Ajax获取
                                $.post('url', {}, function(str){
                                  layer.open({
                                    type: 1,
                                    content: str //注意，如果str是object，那么需要字符拼接。
                                  });
                                });
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                //2:如果是iframe层
                                layer.open({
                                  type: 2,
                                  content: 'http://www.etoak.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://www.etoak.com', 'no']
                                });
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                //3:如果是tip层
                                //注意tips层是指 绑定在某个元素上的提示弹出框，必须指定依附元素
                                layer.open({
                                  type: 4,
                                  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
                                });
                            *
                            *
                            *
                            * */
                            layer.alert("请输入要查询的用户姓名");
                            return;
                        }
                        check();
                    });


                    ///
                    //                                          //
                    //            步骤3：以下为添加业务逻辑        //
                    ///
                    //拿取添加按钮
                    let addBtn = $("button#add");
                    //此处要进行解绑操作，否则会出现递归问题
                    /*
                    *   为什么编辑没有这个问题呢？因为编辑操作时没有对专门的按钮进行绑定事件操作
                    * */
                    addBtn.unbind();
                    addBtn.click(function(){
                        /*
                        *   layer的详细使用，请参见模糊查询中layer的注释部分
                        *
                        * */
                        layer.open({
                            //弹出框类型
                            type: 2,
                            //取值
                            //因为使用iframe类型这里表示引入的页面地址
                            content: '/LayUi_DynaTable/add.jsp',
                            //设置宽和高
                            area: ['800px', '600px'],
                            //设置按钮名称
                            btn: ['取消新增学生信息'],
                            //设置按钮位置
                            /*
                            *   btnAlign: 'l'	按钮左对齐
                                btnAlign: 'c'	按钮居中对齐
                                btnAlign: 'r'	按钮右对齐。默认值，不用设置
                            *
                            * */
                            btnAlign: 'c',
                            //透明度 和 被遮盖层颜色
                            shade: [0.8, '#393D49'],
                            //渐显动画
                            anim: 5
                        });
                    });



                    ///
                    //                                          //
                    //            步骤1：以下为查询业务逻辑        //
                    ///
                    //调用函数对数据进行分页查询
                    check();
                    function check() {
                        table.render({
                            //绑定哪个容器
                            elem: '#demo',
                            //表格高度
                            //height:900,
                            //表格宽度
                            //width:1800,
                            //是否开启工具栏，
                            toolbar: true,
                            //设置文本，一般可以设置无数据时的效果
                            text: {
                                //无数据显示以下信息
                                none: '数据库中无数据'
                            },
                            /*
                            *   skin:
                            *       line行边框风格
                            *       row列边框风格
                            *       nob无边框风格
                            *   even:
                            *       true false 是否开启隔行背景
                            *   size:
                            *       设置表格大小sm小尺寸 lg大尺寸
                            *
                            * */
                            skin: 'line',
                            //开启隔行背景
                            even: true,
                            //使用小尺寸
                            size: 'sm',
                            //发送异步请求的目的地
                            url: 'showstudent?check='+$.trim($('input[name=name]').val()),
                            method: 'post',
                            /*parseData: function(res){ //res 即为原始返回的数据
                             console.info(res);
                             return {
                             "code": 0, //解析接口状态
                             "msg": res.message, //解析提示文本
                             "count": res.total, //解析数据长度
                             "data": res.rows //解析数据列表
                             };
                             },*/
                            //设置每页记录数
                            limit: 10,
                            //是否开启分页功能
                            /*
                            *   注意这里如果开启了分页，则自动发送当前页和每页记录数到服务器端
                            *   此处相当于:
                            *       url: 'showstudent?check='+ $.trim($('input[name=name]').val())+"&limit="+limit+"&page="+1,
                            *
                            *   此处limit为每页记录数
                            *   page为当前页，这个键为固定书写格式不能随意更改
                            * */
                            page: true,
                            /*
                            *   cols:[[
                            *       {field:'字段名',title:'显示在页面上的字符',width:宽度,是否具备排序功能,左对齐,align:排列方式}
                            *   ]]
                            * */
                            cols: [[
                                {field: 'id', title: 'ID', width: 200, sort: true, fixed: 'left'},
                                {field: 'name', title: '姓名', width: 200, align: 'center'},
                                {field: 'email', title: '邮箱', width: 300, align: 'center'},
                                {field: 'phone', title: '电话', width: 200, align: 'center'},
                                <%--
                                    以下为步骤2：组装的查询 编辑 删除的按钮
                                    toolbar:此属性表示引入侧边栏的地址
                                --%>
                                {fixed: 'right', width: 200, align: 'center', toolbar: '#toolbar'}
                            ]]
                        });
                    }

                    //以下函数为表格的三个按钮绑定激发事件
                    /*
                    *   这里的etoak对应
                    *   <table id="demo" lay-filter="对应这里"></table>
                    * */
                    table.on('tool(etoak)', function (obj) {
                        //此数据为json格式
                        //这个obj已经被转换为js对象，请自行打印测试
                        //{id:1,name:"ammy",email:"et04@etoak.com",phone:"111"}
                        let data = obj.data; //获得当前行数据
                        let event = obj.event; //获得lay-event对应的值
                        let tr = obj.tr;//获得当前行tr的dom对象
                        //{phone: "110", name: "elena", id: 1, email: "et@etoak.com"}
                        console.log(data);
                        //detail
                        console.log(event);
                        //console.log(tr);
                        //以下为查看的业务逻辑
                        ///
                        //                                          //
                        //            以下为查看业务逻辑              //
                        ///
                        /*
							   注意layer可以作为独立组件使用，也可以根据layui类库使用
						   *   let index = layer.alert("")
						   *   let index = layer.confirm("")
						   *   let index = layer.msg("")
						   *   let index = layer.tips("")
						   *
						   *   layer中的各个常见参数如下:
						   *
						   *   layer.open({
						   *       number:值,
						   *       title:'标题类型'
						   *       content:''
						   *   });
						   *   ~~~~~~~~~~~~~~~~~~~~~~~~~~~
						   *   number (number 默认 0):
						   *   layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
						   *   若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
						   *
						   *   title (String|Array|boolean)
						   *   title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
						   *   若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，
						   *   数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
						   *
						   *   content (String|DOM|Array，默认：'')
						   *   content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
						   *
						   *   示例：
						   *
						   *   //1:页面层
						   *   layer.open({
								 type: 1,
								 content: '传入任意的文本或html' //这里content是一个普通的String
							   });

							   layer.open({
								 type: 1,
								 content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							   });

							   //Ajax获取
							   $.post('url', {}, function(str){
								 layer.open({
								   type: 1,
								   content: str //注意，如果str是object，那么需要字符拼接。
								 });
							   });
							   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
							   //2:如果是iframe层
							   layer.open({
								 type: 2,
								 content: 'http://www.etoak.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://www.etoak.com', 'no']
							   });
							   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
							   //3:如果是tip层
							   //注意tips层是指 绑定在某个元素上的提示弹出框，必须指定依附元素
							   layer.open({
								 type: 4,
								 content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
							   });
						   *
						   *
						   *
						   * */
                        if (event === 'detail') {
                            layer.open({
                                //弹出框类型
                                type: 2,
                                //取值
                                //通过问号传递值，方便jsp子页面取值
                                content: '/LayUi_DynaTable/info.jsp?id=' + data.id + '&name=' + data.name + '&email='
                                    + data.email + '&phone=' + data.phone,
                                //设置宽和高
                                area: ['500px', '300px'],
                                //设置按钮名称
                                btn: ['我知道了'],
                                //设置按钮位置
                                btnAlign: 'c',
                                //透明度 和 被遮盖层颜色
                                shade: [0.8, '#393D49'],
                                //渐显动画
                                anim: 5
                            });
                            ///
                            //                                          //
                            //            以下为编辑业务逻辑              //
                            ///
                        } else if (event === 'edit') {
                            //以下为编辑的业务逻辑
                            layer.open({
                                //弹出框类型
                                type: 2,
                                //取值
                                //通过问号传递值，方便jsp子页面取值
                                content: '/LayUi_DynaTable/update.jsp?id=' + data.id + '&name=' + data.name + '&email='
                                    + data.email + '&phone=' + data.phone,
                                //设置宽和高
                                area: ['600px', '400px'],
                                //设置按钮名称
                                btn: ['暂不进行修改'],
                                //设置按钮位置
                                btnAlign: 'c',
                                //透明度 和 被遮盖层颜色
                                shade: [0.8, '#393D49'],
                                //渐显动画
                                anim: 5
                            });
                            ///
                            //                                          //
                            //            以下为删除业务逻辑              //
                            ///
                        } else if (event === 'del') {
                            //以下为删除的业务逻辑
                            //index表示第几次弹出的层
                            layer.confirm('您真的确定删除此行吗', function (index) {
                                //index表示第几次弹出层不是索引值，也不是主键等信息
                                //刷新页面重置
                                //console.log(index);
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                //tr.del();
                                /*
                                *   layer.close(index)
                                *   注意index并不是索引值，而是打开层的次数，要关闭必须传入index属性值
                                * */
                                layer.close(index);
                                $.ajax({
                                    url: "del",
                                    type: "post",
                                    data: "id=" + data.id,
                                    dataType: "text",
                                    async: true,
                                    success: function (result) {
                                        console.log(result);
                                        if (result == "suc") {
                                            check();
                                            return;
                                        }
                                        console.log("删除失败！");
                                    },
                                    error: function (err) {
                                        console.log(err.status);
                                    }
                                });
                            });
                        }
                    });
                });
            }
            //执行方法
            etoak();
        </script>
    </body>
</html>

侧边工具栏获取数据与事件获取的数据不同

是赵敢敢啊

关注

12
点赞
踩
26

收藏

觉得还不错? 一键收藏
2
评论
国产前端框架LayUI使用教程

第十三章 LayUI官方文档https://www.layui.com/doc1.杂七杂八知识点使用LayUI需要引LayUI的源码，之后在引入layui.css以及layui.js<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">属性参数含义name=“viewport”屏幕可视区域contentwidth可视区域的宽度，值
复制链接

扫一扫

专栏目录