Layui数据表格

html

<table id="table" lay-filter="test"></table>

删减左上角自定义工具栏

<!--删减左上角自定义工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="DaochuLay">导出全部</button>
    </div>
</script>

操作管理按钮

<!--添加操作管理按钮--->
<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>

具体JS

<script>
    layui.use(['table', 'laydate'], function(){
        var table = layui.table
            ,laydate = layui.laydate;
            laydate.render({
            elem: '#time1'
        });

        table.render({
            elem: '#table'
            // ,height: 768 // 表格高度
            ,url: '/system/order/list/get/order' //数据接口
            ,method: 'post'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '自定义右上角按钮'
                ,layEvent: 'zidingyi'
                ,icon: 'layui-icon-tips'
            }]
            ,page: true //开启分页
            ,limit: 30  // 设置默然加载多少条
            ,limits: [30, 50, 100, 500, 1000]      // 设置当前页可想显示多少条
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'}
                ,{field: 'cf_city', title: '出发城市'}

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}   // 操作管理列
            ]]
            // 分页操作
            ,parseData: function(res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据

                var result;

                //(前端来实现)分页方法一：
                //这是前台 用res.data接受全部数据 再根据当前页的条件从全部数据中选取一部分数据显示出来
                if (this.page.curr) {
                    //若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的 （2-1）*limit（10）=10 到 limit（10）*2=20的数据
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    // 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的0到limit（10）中
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'DaochuLay':
                    layer.alert('导出全部');
                    break;
                case 'zidingyi':
                    layer.alert('自定义右上角')
                    break;
            };
        });

        //监听行工具事件（就是操作管理那列的东西）
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                alert('111111')
            }
            if(obj.event === 'edit'){
                alert('22222')
            }
        });
    });

</script>

在表格中插入图片

<!--标签部分-->
<script id="imgTmp">
    <img src="{{d.path}}" width="100" height="80" style="object-fit: cover;" />
</script>

<!--表格设置部分，注意自定义模板templet的值要和上面script标签的id一致-->
,cols: [[ //表头

    {field: 'path', title: '图片', templet: '#imgTmp', width: 130}

]]

为行设置自适应高度

<style>
    .layui-table-cell{
        height: auto;

    }
</style>