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>

测试结果：

layui：内置模块（日期与时间、数据表格）_css

（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>

layui：内置模块（日期与时间、数据表格）_数据接口_02

 （3）开启时间范围选择

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            ,type: 'year'
            ,range:true
        });
    });
</script>

layui：内置模块（日期与时间、数据表格）_css_03

 

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', width:80, sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名', width:80}
                ,{field: 'sex', title: '性别', width:80, sort: true}
                ,{field: 'city', title: '城市', width:80}
                ,{field: 'sign', title: '签名', width: 177}
                ,{field: 'experience', title: '积分', width: 80, sort: true}
                ,{field: 'score', title: '评分', width: 80, sort: true}
                ,{field: 'classify', title: '职业', width: 80}
                ,{field: 'wealth', title: '财富', width: 135, sort: true}
            ]]
        });

    });
</script>
</body>

id、username、sex、city等要与数据库的字段名称（或实体类名称）保持一致

从url获取到的数据的类型只能是json格式的

测试结果：

layui：内置模块（日期与时间、数据表格）_数据接口_04

（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' //数据接口

测试：

layui：内置模块（日期与时间、数据表格）_数据_05

 （3）添加按钮

layui：内置模块（日期与时间、数据表格）_数据_06

 测试结果：

layui：内置模块（日期与时间、数据表格）_数据接口_07

 （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',width: 150}

测试结果：

layui：内置模块（日期与时间、数据表格）_html_08

 （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', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'city', title: '城市', width: 80}
                , {field: 'sign', title: '签名', width: 177}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {field: 'score', title: '评分', width: 80, sort: true}
                , {field: 'classify', title: '职业', width: 80}
                , {field: 'wealth', title: '财富', width: 135, sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 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）效果

layui：内置模块（日期与时间、数据表格）_json_09

 

 （3）参考网站

layui官网：https://www.layui.com/demo/table.html

 

每个人都会有一段异常艰难的时光 。 生活的压力 ， 工作的失意 ， 学业的压力。 爱的惶惶不可终日。 挺过来的 ，人生就会豁然开朗。 挺不过来的 ，时间也会教你 ，怎么与它们握手言和 ，所以不必害怕的。 ——杨绛