layui中的数据表格-自定义模板

最新推荐文章于 2025-05-27 09:51:46 发布

xh-code

最新推荐文章于 2025-05-27 09:51:46 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_37207413/article/details/86615560

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在layui框架中使用自定义模板渲染数据表格，包括时间戳转换为日期格式、状态显示转换以及操作栏的设置，适用于layui 2.2.5及以上版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui中的数据表格-自定义模板


<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#bugList'
            , url: '../controller/table.php' //数据接口
            , page: true //开启分页
            , toolbar: '#toolbar'
            , cols: [[ //表头
                {field: 'id', title: 'id', width: 80, sort: true, fixed: 'left'}
                , {field: 'product', title: '产品', width: 100}
                , {field: 'platfrom', title: '平台', width: 100}
                , {field: 'person', title: '负责人', width: 100}
                , {field: 'title', title: '标题', width: 100}
                , {field: 'newName', title: '创建人', width: 100}
                , {field: 'status', title: '状态', toolbar: '#status', width: 100}
                , {field: 'addtime', title: '提交时间', toolbar: '#time', width: 180}
                , {field: '', toolbar: '#barDemo', title: '操作'}
            ]]
        });

    });

    //js将php时间戳转换成格式化日期
    function to_date(phpstr) {
        str = parseInt(phpstr) * 1000;//将php时间戳转化为整形并乘以1000
        var newDate = new Date(str);
        var year = newDate.getUTCFullYear();//取年份
        var month = newDate.getUTCMonth() + 1;//取月份
        var nowday = newDate.getUTCDate();//取天数
        var hours = newDate.getHours();//取小时
        var minutes = newDate.getMinutes();//取分钟
        var seconds = newDate.getSeconds();//取秒
        return year + "-" + month + "-" + nowday + " " + hours + ":" + minutes + ":" + seconds;//拼接 2017-2-21 12:23:43    }

    }
</script>
// 自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据
//时间格式化显示在表格中，将php时间戳转换成日期格式
<script type="text/html" id="time">

    <a style="color: #787878" class="layui-table-link">{{to_date(d.addtime)}}</a>
</script>
//自定义表格模板，将状态转化，当status=0时未解决
<script type="text/html" id="status">


    {{#  if(d.status ==0){ }}

    <button class="layui-btn layui-btn-primary layui-btn-xs">
        <i class="layui-icon">&#x1006;</i>未解决
    </button>
    {{#  } }}
    {{#  if(d.status ==1){ }}

    <button class="layui-btn layui-btn-xs">
        <i class="layui-icon">&#xe605;</i>已解决
    </button>
    {{#  } }}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <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>