【亲测免费】 Tabulator.js 技术文档

安装指南

Tabulator 是一个简易上手的交互式表格生成JavaScript库，适合快速构建功能丰富的数据表。以下是几种不同的安装方式：

本地安装

• 直接下载: 访问官方网站下载最新版CSS和JS文件。

• 通过Bower安装:

  bower install tabulator --save
  

• 通过NPM安装:

  npm install tabulator-tables --save
  

使用CDN

如果你想立即开始而不进行项目依赖管理，可以通过UNPKG CDN来引入资源：

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

项目的使用说明

快速创建表格

1. 在HTML中准备一个容器元素，例如：

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

2. 使用JavaScript将这个容器转换为Tabulator表格：

   var table = new Tabulator("#example-table", {
       // 初始化时可以设置配置项，如数据源、列定义等
   });
   

示例：简单数据绑定

假设我们有以下数据数组：

var tableData = [
    {id:1, name:"Oli Bob", age:"12", gender:"male", rating:1},
    {id:2, name:"Mary May", age:"19", gender:"female", rating:2},
    // ...
];

你可以这样初始化一个简单的数据表：

var table = new Tabulator("#example-table", {
    data: tableData,
    autoColumns: true, // 自动根据数据字段生成列
});

功能丰富型表格

为了展示更多特性，如分页、排序、编辑等，配置会更详细：

var table = new Tabulator("#example-table", {
    data: tableData,
    layout: "fitColumns", // 自适应列宽
    pagination: "local", // 本地分页
    paginationSize: 7, // 每页显示7条记录
    columns: [ // 列定义
        {title:"Name", field:"name", editor:"input"},
        {title:"Age", field:"age", formatter:"progress"},
        // 更多列...
    ],
});

项目API使用文档

Tabulator提供了丰富的API来操作和扩展表格行为。例如，添加行：

table.addRow({name:"New Guy", age:"42"});

获取选中行：

let selectedRows = table.getSelectedRows();

详细的API文档请参考官方文档中的【API Reference】部分。

项目安装方式（重申）

项目安装主要通过三种途径：手动下载、包管理器安装以及通过CDN服务。

• 手动从官网下载CSS和JS文件。
• 使用Bower或NPM安装（分别为bower install tabulator --save和npm install tabulator-tables --save）。
• 直接在网页中通过CDN链接引入资源，这适用于快速测试和原型设计阶段。

本文档覆盖了Tabulator的基本安装、快速入门、简单至高级的用法，以及其API使用的概览，旨在帮助开发者高效地利用该库构建数据密集型界面。记得查看官方文档以获得更多高级特性和定制选项。