zoukankan      html  css  js  c++  java
  • layui:内置模块(日期与时间、数据表格)

    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)参考网站

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

  • 相关阅读:
    弹窗信息
    EditorGridPanel中编辑后失去焦点
    GridPanel在IE6中显示滚动条
    VS2010 在Win 7 附加w3wp.exe进程进行调试
    Visual Studio 中为文件添加链接(快捷方式、引用?)
    windows + visual studio 2010 配置SVN
    【转】[信息视图]谷歌究竟有多强大
    收缩数据库 DBCC SHRINKFILE
    Visual Studio 2010 SDK (Extensibility)
    在Windows7 上建立WiFi热点
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13725422.html
Copyright © 2011-2022 走看看