一个周末学会 Tabulator：用 20 行 JavaScript 把数据变成可交互表格

一个周末学会 Tabulator用 20 行 JavaScript 把数据变成可交互表格【免费下载链接】tabulatorInteractive Tables and Data Grids for JavaScript项目地址: https://gitcode.com/gh_mirrors/ta/tabulator你有没有遇到过这种场景后端接口返回了几百条 JSON 数据产品让你做个表格展示一下还顺手补了一句要能排序、能筛选、能分页手写原生表格 一堆事件监听少说也要大半天引入重型框架又显得小题大做。这时候Tabulator就是那个打开即用的答案——它是一个专为 JavaScript 打造的交互式表格与数据网格库只要一个容器元素、一段配置对象就能在几秒内把数组或 JSON 数据渲染成支持排序、筛选、分页、编辑、导出等全套能力的表格。为什么偏偏是它市面上表格库不少Tabulator 的核心优势可以概括为三点配置驱动而非代码驱动绝大多数能力分页、排序、列编辑、行选择都是声明式配置不用手写渲染逻辑模块化且按需加载功能以模块形式组织在src/js/modules/目录下从分页、筛选到剪贴板、树形数据应有尽有核心包也能独立运行框架无关原生 JS 就能用同时官方提供了与 React、Vue、Angular 等框架配合的用法存量项目接入成本极低。先别急着记概念我们直接动手让第一张表在浏览器里亮起来。一分钟跑通你的第一张表Tabulator 的加载方式很灵活本地构建、CDN、npm 都可以。想最快看到效果在 HTML 里引入 CSS 和 JS 就行link hrefdist/css/tabulator.min.css relstylesheet script typetext/javascript srcdist/js/tabulator.min.js/script如果你用的是 npm 工程也可以npm install tabulator-tables --save后按模块方式导入。下面这个完整示例从数据到表格总共不到 20 行!DOCTYPE html html langzh head meta charsetUTF-8 link hrefdist/css/tabulator.min.css relstylesheet /head body !-- 1. 准备一个容器 -- div idstock-table/div script srcdist/js/tabulator.min.js/script script // 2. 准备数据一段商品库存数组 const stockData [ {sku: SKU-001, name: 机械键盘, stock: 120, price: 399}, {sku: SKU-002, name: 无线鼠标, stock: 45, price: 129}, {sku: SKU-003, name: 显示器, stock: 8, price: 1299}, ]; // 3. 交给 Tabulator一张可交互表格就诞生了 new Tabulator(#stock-table, { data: stockData, // 数据源 layout: fitColumns, // 列宽自动铺满容器 columns: [ {title: SKU, field: sku}, {title: 商品名, field: name}, {title: 库存, field: stock}, {title: 单价, field: price}, ], }); /script /body /html打开页面你会看到一张结构完整的表格。把鼠标移到列头上点击试试——排序已经内置了。这正是 Tabulator 的哲学datacolumns是最低配置其余能力全部按需声明。实战一给表格加上分页与筛选让数据量再大一倍上面的示例只有 3 行数据如果换成 3000 行呢手动处理分页逻辑会让人头大而 Tabulator 只需要两个配置项new Tabulator(#stock-table, { data: stockData, layout: fitColumns, pagination: local, // 开启本地分页 paginationSize: 10, // 每页显示 10 行 columns: [ {title: SKU, field: sku}, {title: 商品名, field: name, headerFilter: input}, // 列头出现筛选框 {title: 库存, field: stock, sorter: number}, // 按数字大小排序 {title: 单价, field: price, formatter: money}, // 渲染成货币格式 ], });两个细节值得注意headerFilter: input会在列头生成一个输入框用户敲字即筛等价于帮你内置了一个筛选模块formatter: money来自格式化模块同一份原始数据在不同列可以用不同形态展示比如进度条progress、星级star、开关toggle都属于这一类显示层能力。分页、筛选、排序这三件套叠加起来几千行的数据表格也能让用户流畅地钻取。实战二让表格活起来——行内编辑与数据回写很多后台管理页面的核心痛点是改数据Tabulator 让行内编辑像配置一样简单给列加上editor再监听cellEdited事件回写数据const table new Tabulator(#stock-table, { data: stockData, columns: [ {title: SKU, field: sku}, {title: 商品名, field: name, editor: input}, {title: 库存, field: stock, editor: number}, {title: 单价, field: price, editor: number}, ], }); // 用户改完某个单元格后触发 table.on(cellEdited, function(cell) { console.log(字段被修改, cell.getField(), 新值, cell.getValue()); // 在这里调用你自己的保存接口即可 });编辑模块内置了input、number、textarea、date、select等多种编辑器还能配合校验模块在单元格层面做必填、范围等规则检查。这样表格即表单的体验比弹窗编辑的交互成本低得多。实战三行选中、增删行与数据导出最后一个贴近业务的场景批量操作。比如勾选要发货的订单一键导出 CSV。Tabulator 的组合拳是SelectRow模块 Download模块const table new Tabulator(#order-table, { data: orderData, selectableRows: true, // 行首出现勾选框 layout: fitColumns, columns: [ {title: 订单号, field: orderNo}, {title: 客户, field: customer}, {title: 金额, field: amount}, ], }); // 获取所有被勾选的行返回 RowComponent 数组 const selected table.getSelectedRows(); console.log(selected.map(row row.getData())); // 一键导出当前表格为 CSV 文件 table.download(csv, orders.csv);配套的还有table.addRow({...})新增行、table.deleteRow(行索引或行组件)删除行、table.updateData([...])批量更新数据。这类数据操作 API几乎覆盖了管理后台的日常增删改查。常用 API 与配置速查下面两张表一张给方法一张给配置收藏备用即可不用背。高频方法一览方法作用示例setData(data)替换表格数据源table.setData(newArr)addRow(data)在表格末尾新增一行table.addRow({name: 新品})updateData(data)按主键批量更新table.updateData([{id: 1, name: 改名}])deleteRow(index)删除指定行table.deleteRow(3)getSelectedRows()获取勾选的行组件table.getSelectedRows()getData(active)取回表格内全部数据table.getData()download(type, file)导出为 csv/xlsx/pdftable.download(xlsx, a.xlsx)on(event, fn)绑定表格事件table.on(cellEdited, fn)setColumns(defs)动态重设列定义table.setColumns([...])高频配置一览配置项所属模块说明paginationPagelocal本地分页 /remote服务端分页headerFilterFilter列头筛选值如input、selectsorterSort列排序规则如number、date、stringeditorEdit行内编辑器如input、number、dateformatterFormat单元格渲染器如money、progress、starselectableRowsSelectRow是否允许勾选行movableColumnsMoveColumns是否允许拖拽调整列顺序groupByGroupRows按字段分组显示layoutLayoutfitColumns、fitData等列宽策略避坑指南新手最容易踩的三个坑列定义里忘了写fieldfield对应数据对象的键名少了它表格渲染不出内容且不会报错排查时先检查这里。分页与排序混用远程模式数据量不大时优先用pagination: local一旦切到remote分页、排序、筛选都要自己处理服务端参数成本翻倍。自定义模块需要显式注册按需引入某个功能模块比如 Spreadsheet时记得用Tabulator.registerModule(...)注册否则配置项会静默失效。完整模块清单可以在src/js/modules/optional.js里看到。想再深入一步到这一步你已经能独立完成一张能排序、能筛选、能编辑、能导出的实用表格了。想继续钻研的话推荐从源码的这几个地方入手它们也是理解 Tabulator 内部机制的钥匙表格核心入口与全量 API 定义src/js/core/Tabulator.js所有可选功能模块分页、编辑、导出、树形数据等src/js/modules/内置编辑器、格式化器、校验器的默认实现src/js/modules/Edit/、src/js/modules/Format/Tabulator 的学习曲线很平缓从20 行代码出第一张表到配置出功能完整的业务表格中间只差你把常用配置过一遍的半小时。下次再被做一个表格的需求找上门时你已经有答案了。【免费下载链接】tabulatorInteractive Tables and Data Grids for JavaScript项目地址: https://gitcode.com/gh_mirrors/ta/tabulator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考