Tabulator 开源项目教程

最新推荐文章于 2024-09-08 09:45:41 发布

明俪钧

最新推荐文章于 2024-09-08 09:45:41 发布

阅读量344

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00026/article/details/139312766

版权

Tabulator 开源项目教程

tabulator Interactive Tables and Data Grids for JavaScript 项目地址: https://gitcode.com/gh_mirrors/ta/tabulator

1. 项目介绍

Tabulator 是一个用于创建交互式表格和数据网格的 JavaScript 库。它支持从 HTML 表格、JavaScript 数组或 JSON 格式的数据中快速生成表格。Tabulator 提供了丰富的功能，包括前端框架支持（如 React、Angular 和 Vue）、排序、过滤、分页等。

2. 项目快速启动

2.1 安装 Tabulator

你可以通过 Bower 或 NPM 安装 Tabulator。

使用 Bower 安装

bower install tabulator --save

使用 NPM 安装

npm install tabulator-tables --save

2.2 引入 Tabulator

在你的项目中引入 Tabulator 的 CSS 和 JavaScript 文件。

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

2.3 创建表格

在你的 HTML 文件中创建一个元素来容纳表格。

<div id="example-table"></div>

然后使用 JavaScript 初始化表格。

var table = new Tabulator("#example-table", {
    data: [
        {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
    ],
    columns:[
        {title:"Name", field:"name", width:150},
        {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
    ],
});