tabulator 自动从数据生成表格列名

最新推荐文章于 2024-05-11 09:39:49 发布

allway2

最新推荐文章于 2024-05-11 09:39:49 发布

阅读量198

点赞数

文章标签： python php 开发语言

本文链接：https://blog.csdn.net/allway2/article/details/121566982

版权

本文介绍了如何使用Tabulator JavaScript库在HTML页面中创建一个表格，通过设置autoColumns选项，自动根据数据字段名生成列。示例代码展示了如何定义数据数组并初始化带有自定义列的表格。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tabulator Example</title>
        <link href="css/tabulator.css" rel="stylesheet">
        <script type="text/javascript" src="js/tabulator.js"></script>
    </head>
    <body>
        <div id="example-table"></div>
        <script type="text/javascript">
//define data array
            var tabledata = [
                {id: 1, name: "Oli Bob", progress: 12, gender: "male", rating: 1, col: "red", dob: "19/02/1984", car: 1},
                {id: 2, name: "Mary May", progress: 1, gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true},
                {id: 3, name: "Christine Lobowski", progress: 42, gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true"},
                {id: 4, name: "Brendon Philips", progress: 100, gender: "male", rating: 1, col: "orange", dob: "01/08/1980"},
                {id: 5, name: "Margret Marmajuke", progress: 16, gender: "female", rating: 5, col: "yellow", dob: "31/01/1999"},
                {id: 6, name: "Frank Harbours", progress: 38, gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1},
            ];

//initialize table
            var table = new Tabulator("#example-table", {
                data: tabledata, //assign data to table
                autoColumns: true, //create columns from data field names
            });
        </script>
    </body>
</html>

autoColumns: true, //create columns from data field names