后端程序员的前端捷径-超级容易上手使用的前端框架layUI（上）：https://developer.aliyun.com/article/1580664
7 layUI静态表格
| 属性名 | 属性值 | 备注 |
| lay-even | 无 | 用于开启 隔行 背景，可与其它属性一起使用 |
| lay-skin=“属性值” | line （行边框风格） row （列边框风格） nob （无边框风格） | 若使用默认风格不设置该属性即可 |
| lay-size=“属性值” | sm （小尺寸） lg （大尺寸） | 若使用默认尺寸不设置该属性即可 |
<table class="layui-table" lay-even lay-skin="nob" lay-size="lg"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> </tbody> </table>
8 layUI弹出层
使用弹出层需要导入
layer模块弹出提示信息（自动消失）
<script> //引入弹出层模块 layui.use(['layer'],function () { var layer = layui.layer; //弹出提示信息 layer.msg("hello,layer"); } </script>
弹出提示框
<script> //引入弹出层模块 layui.use(['layer'],function () { var layer = layui.layer; //弹出提示框 layer.alert("hello,layer"); } </script>
弹出询问框
<script> //引入弹出层模块 layui.use(['layer'],function () { var layer = layui.layer; //弹出询问框 layer.confirm("确定要删除吗?", {icon: 5, title:'警告'},function (index) { console.log("执行了。。。"); layer.close(index); }); } </script>
弹出吸附信息
<button class="layui-btn" id="btn">点击</button> <script> //引入弹出层模块 layui.use(['layer'],function () { var layer = layui.layer; //弹出吸附信息 $("#btn").click(function () { layer.tips("详细解释。。",'#btn') }) } </script>
属性：
type - 基本层类型
- layer提供了5种层类型。可传入的值有：
- 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title - 标题
- title支持三种类型的值
- 类型：String/Array/Boolean ， 默认：‘信息’
content - 内容
- content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM
- 类型：String/DOM/Array，默认：‘’
area - 宽高
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]
类型：String/Array，默认：‘auto’
resize - 是否允许拉伸
- 类型：Boolean，默认：true
success - 层弹出后的成功回调方法
- 类型：Function，默认：null
yes - 确定按钮回调方法
- 类型：Function，默认：null
cancel - 右上角关闭按钮触发的回调
- 类型：Function，默认：null
end - 层销毁后触发的回调
- 类型：Function，默认：null
<script> //引入弹出层模块 layui.use(['layer'],function () { var layer = layui.layer; //弹出层 layer.open({ type:1, content:"<div class='layui-container' style='height: 300px;background: #01AAED'></div>" }); layer.open({ type:1, anim:6, resize:false, content:$("#content"), area: ['600px', '600px'] }); }) </script>
关闭父页面弹出层
var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
9 时间组件
使用时间组件需要导入
laydate模块
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 --> <input type="text" class="layui-input" id="test1"> </div> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ //指定在某个元素上绑定laydate组件 elem: '#test1' //指定元素 // ,type:"year" //范围选择，有两个日期框 // ,range: true //格式化选择的时间 // ,format: 'yyyy年MM月dd日' //默认值 // ,value:new Date() //最大最小值范围 // ,min: '2020-1-1' // ,max: '2020-12-31' ,type:"time" ,min: '09:00:00' ,max: '18:00:00' }); }); </script>
10 动态表格(重要)
10.1 表格渲染
方法渲染
<table id="demo" lay-filter="test"></table> <!-- 数据操作 --> <script type="text/html" id="barDemo"> <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> <script> layui.use('table', function(){ var table = layui.table; // 为表格填充数据 table.render({ elem: '#demo' //表格元素 ,height: 315 ,url: 'js/emp.json' //此处为静态数据，未来替换成后端数据接口地址 ,cols: [[ //表头 /** * field 获取就送数据(必须与json格式的key保持一致) * title 表格标题 * sort 是否支持排序 * fixed 是否固定 * type:checkbox 添加复选框 * toolbar:指定数据操作按钮 */ {type:'checkbox',fixed: true} ,{field: 'id', title: 'ID', sort: true,fixed: true} ,{field: 'username', title: '用户名',fixed: true} ,{field: 'sex', title: '性别', sort: true,fixed: true} ,{field: 'city', title: '城市'} ,{field: 'sign', title: '签名'} ,{field: 'experience', title: '积分', sort: true} ,{field: 'score', title: '评分', sort: true} ,{field: 'classify', title: '职业'} ,{field: 'wealth', title: '财富', sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); }); </script>
自动渲染
满足一下三点：
- 带有 class=“layui-table” 的 标签。
- 对标签设置属性 lay-data=“” 用于配置一些基础参数
- 在 标签中设置属性*lay-data=“”*用于配置表头信息
<table class="layui-table" lay-data="{height:315, url:'js/user.json', page:true, id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'id', width:80, sort: true}">ID</th> <th lay-data="{field:'username', width:80}">用户名</th> <th lay-data="{field:'sex', width:80, sort: true}">性别</th> <th lay-data="{field:'city'}">城市</th> <th lay-data="{field:'sign'}">签名</th> <th lay-data="{field:'experience', sort: true}">积分</th> <th lay-data="{field:'score', sort: true}">评分</th> <th lay-data="{field:'classify'}">职业</th> <th lay-data="{field:'wealth', sort: true}">财富</th> <th lay-data="{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}">操作</th> </tr> </thead> </table> <!-- 数据操作 --> <script type="text/html" id="barDemo"> <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>
templet - 自定义列模板
{field:'image', title:'头像', width:88, templet: function(res){ return `<img src="${res.image}" width="80px" height="80px">` }}
10.2 分页参数
分页条细节定制
<table id="demo" lay-filter="test"></table> <script> layui.use("table",function(){ var table = layui.table; table.render({ elem: '#demo'， url:'js/user.json',//此处为静态数据，未来替换成后端数据接口地址 cols:[[...]], //可以单独编写属性，只需要将page:true ,page: { //支持传入 laypage 组件的所有参数 - 详见文档 layout: ['prev', 'page', 'next', 'skip','limit', 'count' ] //自定义分页布局 ,curr:2 //设定初始在第 2页 默认为1 ,limit:5 //每页显示的条数 默认为10 ,groups: 10 //只显示 10个连续页码 默认为5 ,limits:[1,3,5,10] //每页条数的选择项 默认[10, 20, 30, 40, 50] } }); }); </script>
10.3 监听行工具
<table id="demo" lay-filter="test"></table> <script> layui.use("table",function(){ //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; console.log(obj) if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ //删除当前行 obj.del(); //发送异步请求，删除数据库中的数据 //关闭弹出层 layer.close(index); }); } else if(obj.event === 'edit'){ console.log(data.username); //发送Ajax异步请求获取数据，显示在表单上 //表单赋值 form.val('example', { ..... }); //点击修改按钮显示弹出层 layer.open({ type:1, content:$("#content"), area:["600px","600px"] }) //给弹出层中的修改按钮绑定事件 $("#updateBtn").click(function () { //关闭所有页面层 layer.closeAll('page'); //获取表单的数据 var data = form.val('example'); console.log(data); //发送异步请求，提交数据 //表格重载 table.reload('demo', { url: 'js/emp.json' }); }) } }); }); </script>
10.4 表格重载
//表格重载 table.reload('test', { url: 'js/emp.json' });
11 文件上传
普通图片上传
<div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> </div> </div> <script> layui.use(['upload', 'element', 'layer'], function(){ var $ = layui.jquery ,upload = layui.upload ,element = layui.element ,layer = layui.layer; //常规使用 - 普通图片上传 var uploadInst = upload.render({ elem: '#test1' ,url: 'https://httpbin.org/post' //改成您自己的上传接口 ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#demo1').attr('src', result); //图片链接（base64） }); } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功的一些操作 //…… } }); }); </script>
12 综合案例
使用layui后台布局实现管理系统
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layout 管理系统大布局 - Layui</title> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-left"> <!-- 移动端显示 --> <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <i class="layui-icon layui-icon-spread-left"></i> </li> <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li> <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li> <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li> <li class="layui-nav-item"> <a href="javascript:;">nav groups</a> <dl class="layui-nav-child"> <dd><a href="">menu 11</a></dd> <dd><a href="">menu 22</a></dd> <dd><a href="">menu 33</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">menu group 1</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">menu 1</a></dd> <dd><a href="javascript:;">menu 2</a></dd> <dd><a href="javascript:;">menu 3</a></dd> <dd><a href="">the links</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">menu group 2</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">list 1</a></dd> <dd><a href="javascript:;">list 2</a></dd> <dd><a href="">超链接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li> <li class="layui-nav-item"><a href="">the links</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="./layui/layui.js"></script> <script> //JS layui.use(['element', 'layer', 'util'], function(){ var element = layui.element ,layer = layui.layer ,util = layui.util ,$ = layui.$; //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function(othis){ layer.msg('展开左侧菜单的操作', {icon: 0}); } ,menuRight: function(){ layer.open({ type: 1 ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>' ,area: ['260px', '100%'] ,offset: 'rt' //右上角 ,anim: 5 ,shadeClose: true }); } }); }); </script> </body> </html>
