layui数据表格的使用

最新推荐文章于 2024-04-09 14:30:35 发布
iChangebaobao
最新推荐文章于 2024-04-09 14:30:35 发布
阅读量154
点赞数
分类专栏： LayUI
本文链接：https://blog.csdn.net/iChangebaobao/article/details/97274771
版权
LayUI 专栏收录该内容
11 篇文章 1 订阅
订阅专栏
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>

<body>

    <div>
        <form class="layui-form">
            <label class="left">输入身份证：</label>
            <div class="layui-inline">
                <input class="layui-input" name="IdCard" id="demoReload" autocomplete="off">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" id="search" data-type="reload">搜索</button>
            </div>
            <div style="display:inline-block; width:20%;"></div>
            <label class="left">选择时间:</label>
            <div class="layui-inline">
                <input type="date" value="2019-05-06" id="time1" class="layui-input" id="time" placeholder="yyyy-MM-dd">
            </div>
            至
            <div class="layui-inline">
                <input type="date" value="2019-05-10" id="time2" class="layui-input" id="time" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-inline">
                <div id="btn" class="layui-btn"> 搜索</div>
            </div>

        </form> 
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script> 
        <script type="text/html" id="barDemo">
            <a class="layui-btn  layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-warm  layui-btn-xs" lay-event="edit">审核</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <!-- 表格 -->
        <table class="layui-table" id="test" lay-filter="demo">
        </table> 
    </div> 
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>

        layui.use('table', function () {
            var table = layui.table;
           
            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
                // console.log(obj)
            }); 
            //头工具栏事件
            table.on('toolbar(demo)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                };
            });
 
            //监听行工具条
            table.on('tool(demo)', function (obj) {
                //tool是工具条事件名，demo是table原始容器的属性 lay - filter="对应的值"
                var data = obj.data;

                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                // console.log(data);

                if (obj.event === 'detail') {//查看
                    // layer.msg('ID：' + data.ID + ' 的查看操作');
                    layer.open({
                        // id:"detailid",
                        type: 2,  //可传入的值有：Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        title: ['大车申请详情', 'font-size:18px; color: #009688;font-size:20px;font-weight:600;'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                        area: ['700px', '600px'],
                        content: 'iframe.html',
                        closeBtn: 1, //关闭按钮是否显示 1显示0不显示
                        shadeClose: true, //点击遮罩区域是否关闭页面
                        maxmin: true, //最大最小化
                        btn: ['关闭'],
                        success: function (layero, index) {//参数layero, index为当前层DOM,当前层索引

                        }

                    })
                } else if (obj.event === 'edit') {//审核
                    //json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象。
                    // layer.alert('编辑行：<br>' + JSON.stringify(data))
                    layer.open({
                        type: 2,
                        title: ['大车进城审核', 'font-size:18px; color: #FFB800;font-size:20px;font-weight:600;'],
                        area: ['1000px', '700px'],
                        content: 'shenhe.html',
                        shadeClose: true,
                        maxmin: true,
                        resize: true,//是否允许拉伸
                        success: function (layero, index) {
                            //把当前行数据存到浏览器中

                            // JSON.stringify(data)
                            localStorage.setItem("ID", data.ID);

                            // console.log("========" + id);

                        },
                    });

                } else if (obj.event === 'del') {//删除

                    layer.confirm('真的要删除这条记录么', { icon: 3, title: '确定删除' }, function (index) {
                        obj.del();
                        $.post('http://192.168.1.146:8080/car/delete?ID=' + data.ID, function (res) {
                            var tableIns = table.render({});
                            tableIns.reload();
                        });
                        layer.close(index);
                    });

                }
            });

            table.render({
                elem: '#test',
                id: 'test',
                url: 'http://192.168.1.136/goods/icon',
                //一定要加 method:'POST',contentType: 'application/json',以POST方式，json格式提交page和limit到后端
                method:'POST',
                contentType: 'application/json',
                cellMinWidth: 80, //全局定义常规单元格的最小宽度 
                toolbar: '#toolbarDemo',
                text: {
                    none: '暂无相关数据' //默认：无数据。 
                }, 
                even: true, //开启隔行背景 
                page: true,
                limit: 10, //每页默认显示的数量，laypage将会借助 count 和 limit 计算出分页数
                limitName: 'limit', //每页数据量的参数名，默认：limit
                pageName: 'page',//页码的参数名称，默认：page  
                // limits: [10, 20, 50],  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]
                // count: count,//数据总数，从服务端得到
                prev: '上一页',
                next: '下一页',
                layout: ['prev', 'page', 'next', 'count', 'limit'],
                loading: false,
                cols: [
                    [
                        {
                        type: 'checkbox',
                        fixed: 'left'
                        },
                        { field: 'id', width: 80, title: 'ID', sort: true }
                        , { field: 'brand_name', width: 80, title: '品牌名' }
                        , { field: 'brand_icon', width: 80, title: '图标' }
                        , { field: 'category_id', width: 80, title: '类别' }
                        , { field: 'gmt_create', title: '修改时间', width: '30%', minWidth: 100 }
                        , { field: 'gmt_update', title: '更新时间', sort: true }
                        , {
                            field: 'right',
                            title: '操作',
                            minwidth: 200,
                            toolbar: "#barDemo"//工具栏指向具体的标签元素
                        }
                    ]
                ], 
                parseData: function (res) { //res 即为原始返回的数据，将原始数据解析成 table 组件所规定的数据
                    console.log(res);

                    return {
                        "code": 0, //解析接口状态 数据状态要设置为0
                        // msg: res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                },
                done: function (res, curr, count) {//数据渲染之前的回调
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    // console.log('接口返回的信息'+res);
                    // console.log('接口返回的data'+res.data);

                    // //得到当前页码
                    // console.log('当前页码'+curr);

                    // //得到数据总量
                    // console.log('数据总量'+count);
                },

            });

            var $ = layui.$, active = {

                reload: function () {
                    var demoReload = $('#demoReload').val();//获取搜索框的内容
                    console.log(demoReload);
                    //执行重载
                    table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            IdCard: demoReload //设定异步数据接口的额外参数
                        }
                    });
                }
            };

            $('#search').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
</body>

</html>
iChangebaobao
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui数据表格的使用

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>品牌管理&...
复制链接

扫一扫
专栏目录