Layui table使用data绑定数据

最新推荐文章于 2025-04-18 11:00:43 发布

TSwizzle1327

最新推荐文章于 2025-04-18 11:00:43 发布

阅读量5.9k

点赞数 1

分类专栏： Layui 文章标签： layui

本文链接：https://blog.youkuaiyun.com/jduksa/article/details/118106716

版权

Layui 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在Layui中使用table组件进行数据绑定，通过实例展示数据加载、分页和操作列的配置，帮助开发者实现高效、灵活的表格展示。

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

var data=[
    {
        "Id":"",
        "CompanyId":"",
        "Grade":"",
        "TPType":"",
        "UserName":"",
        "CreateTime":"",
        "Fantion":""
    },
    {
        "Id":"",
        "CompanyId":"",
        "Grade":"",
        "TPType":"",
        "UserName":"",
        "CreateTime":"",
        "Fantion":""
    }
];      
table.render({
            elem: '#TableId',
            data: data,//json数据
            toolbar: '#ToolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                { type: 'numbers' },
                { field: 'Id', width: 40, title: 'Id', hide: true },
                { field: 'CompanyId', width: 40, title: '公司Id', hide: true },//sort: true,排序
                { field: 'Grade', width: 120, title: '状态', sort: true, totalRowText: '合计行：' },
                { field: 'TPType', minwidth: 260, title: '题目类型', sort: true, totalRowText: count },
                { field: 'UserName', width: 180, title: '用户', sort: true, },
                { field: 'CreateTime', minwidth: 180, title: '考试时间', sort: true, },
                { field: 'Fantion', width: 150, title: '得分', sort: true, totalRow: true }
            ]],
            limit: count,
            page: false,
            height: 600,
            totalRow: true, //开启合计行
        });