1、日期与时间选择
（1）选择日期
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layDate快速使用</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <div class="layui-inline"> <input type="text" class="layui-input" id="test1"> </div> <script src="layui/layui.js"></script> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#test1' //指定元素 }); }); </script> </body> </html>
测试结果：
（2）日期类型
<body> <div class="layui-inline"> <input type="text" class="layui-input" id="test1"> </div> <script src="layui/layui.js"></script> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#test1' //指定元素 ,type: 'year' }); }); </script> </body>
（3）开启时间范围选择
<script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#test1' //指定元素 ,type: 'year' ,range:true }); }); </script>
2、数据表格
（1）请求接口
<body> <table id="demo" lay-filter="test"></table> <script src="layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table;//引入table模块 table.render({ elem: '#demo'//将原生的table标签绑定到layui ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: 'id', title: 'ID', 80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', 80} ,{field: 'sex', title: '性别', 80, sort: true} ,{field: 'city', title: '城市', 80} ,{field: 'sign', title: '签名', 177} ,{field: 'experience', title: '积分', 80, sort: true} ,{field: 'score', title: '评分', 80, sort: true} ,{field: 'classify', title: '职业', 80} ,{field: 'wealth', title: '财富', 135, sort: true} ]] }); }); </script> </body>
id、username、sex、city等要与数据库的字段名称（或实体类名称）保持一致
从url获取到的数据的类型只能是json格式的
测试结果：
（2）模拟数据
在项目中创建json格式的文件存储json格式的数据：
{ "code": 0, "msg": "", "count": 1000, "data": [{ "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0", "experience": 255, "logins": 24, "wealth": 82830700, "classify": "作家", "score": 57 }, {
将url地址改为json的地址：
,url: 'json/user.json' //数据接口
测试：
（3）添加按钮
测试结果：
（4）添加操作按钮
<!--每一行后面的按钮--> <div id="barDemo" style="display: none"> <a class="layui-btn layui-btn-xs" lay-even="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even="del">删除</a> </div>
,{fixed: 'right', title: '操作', toolbar:'#barDemo', 150}
测试结果：
（5）点击事件
<table id="demo" lay-filter="test"></table>
lay-filter为监听的对象
table.on('toolbar(test)', function (obj) { switch (obj.event) { case 'add': alert("add"); break; case 'delete': alert('删除'); break; case 'update': alert('编辑'); break; } })
获取到参数
<div class="layui-btn-group"> <button type="button" class="layui-btn" lay-event="add">增加</button> <button type="button" class="layui-btn" lay-event="update">编辑</button> <button type="button" class="layui-btn" lay-event="delete">删除</button> </div>
lay-event向函数传递参数
3、总结
（1）全部代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <!--顶部按钮--> <div id="toolBar" style="display: none" > <div class="layui-btn-group"> <button type="button" class="layui-btn" lay-event="add">增加</button> <button type="button" class="layui-btn" lay-event="update">编辑</button> <button type="button" class="layui-btn" lay-event="delete">删除</button> </div> </div> <!--每一行后面的按钮--> <div id="barDemo" style="display: none"> <a class="layui-btn layui-btn-xs" lay-even="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even="del">删除</a> </div> <table id="demo" lay-filter="test"></table> <script src="layui/layui.js"></script> <script> layui.use('table', function () { var table = layui.table;//引入table模块 table.render({ elem: '#demo'//将原生的table标签绑定到layui , height: 312 , url: 'json/user.json' //数据接口 , page: true //开启分页 , toolbar: "#toolBar" , cols: [[ //表头 {field: 'id', title: 'ID', 80, sort: true, fixed: 'left'} , {field: 'username', title: '用户名', 80} , {field: 'sex', title: '性别', 80, sort: true} , {field: 'city', title: '城市', 80} , {field: 'sign', title: '签名', 177} , {field: 'experience', title: '积分', 80, sort: true} , {field: 'score', title: '评分', 80, sort: true} , {field: 'classify', title: '职业', 80} , {field: 'wealth', title: '财富', 135, sort: true} , {fixed: 'right', title: '操作', toolbar: '#barDemo', 150} ]] }); //监听事件 table.on('toolbar(test)', function (obj) { switch (obj.event) { case 'add': alert("add"); break; case 'delete': alert('删除'); break; case 'update': alert('编辑'); break; } }) }) </script> </body> </html>
（2）效果
（3）参考网站