Tabulator 交互式数据表格 javascript 库示例

最新推荐文章于 2024-10-03 19:26:59 发布
最新推荐文章于 2024-10-03 19:26:59 发布
阅读量2k 收藏 1
点赞数
文章标签： java php 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/121458964
版权

​在本JavaScript 教程中，我们将看到如何使用tabulator js。在这个tabulator js 示例或tabulator js 教程中，我们将看到如何使用 tabulator js 立即创建交互式表格。​

什么是制表器js？

tabulator js是一个 javascript 库，我们可以使用它在几秒钟内创建交互式表格，而无需太多编码。它非常易于使用且功能齐全，是一个交互式表格 javascript 库。

我们可以从任何 HTML 表格、JavaScript 数组、AJAX 数据源或 JSON 格式的数据创建具有视觉吸引力的表格。

制表器js示例

现在，我们将看到一个tabulator js 示例，在这里我们将从JavaScript 数组创建一个表。​
在这里，我们要做的第一件事是创建一个 HTML 文件。​

准备好 HTML 文件后，我们要做的第一件事就是引用tabulator.min.css和tabulator.min.js文件。

在这里，我使用 CDN 文件路径来引用 js 和 css 文件，如下所示：

<link href="https://unpkg.com/tabulator-tables@4.8.1/dist/css/tabulator.min.css" rel="stylesheet">

<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/dist/js/tabulator.min.js"></script>

接下来，我们可以创建如下所示的 JavaScript 数组：

var tabledata = [{
                playerid: 1,
                playername: "Virat Kohli",
                price: "17",
                team: "RCB",
                joiningdate: "01/01/2020"
            }, {
                playerid: 2,
                playername: "Rohit Sharma",
                price: "15",
                team: "MI",
                joiningdate: "02/01/2020"
            }, {
                playerid: 3,
                playername: "MS Dhoni",
                price: "15",
                team: "CSK",
                joiningdate: "03/01/2020"
            }, {
                playerid: 4,
                playername: "Shreyas Iyer",
                price: "7",
                team: "RCB",
                joiningdate: "04/01/2020"
            }, {
                playerid: 5,
                playername: "KL Rahul",
                price: "11",
                team: "KXIP",
                joiningdate: "05/01/2020"
            }, {
                playerid: 6,
                playername: "Dinesh Karthik",
                price: "7",
                team: "KKR",
                joiningdate: "06/01/2020"
            }, {
                playerid: 7,
                playername: "Steve Smith",
                price: "12",
                team: "RR",
                joiningdate: "07/01/2020"
            }, {
                playerid: 8,
                playername: "David Warner",
                price: "12",
                team: "SRH",
                joiningdate: "08/01/2020"
            }, {
                playerid: 9,
                playername: "Kane Williamson",
                price: "3",
                team: "SRH",
                joiningdate: "09/01/2020"
            }, {
                playerid: 10,
                playername: "Jofra Archer",
                price: "7",
                team: "RR",
                joiningdate: "10/01/2020"
            }, {
                playerid: 11,
                playername: "Andre Russell",
                price: "9",
                team: "KKR",
                joiningdate: "11/01/2020"
            }, {
                playerid: 12,
                playername: "Chris Gayle",
                price: "2",
                team: "KXIP",
                joiningdate: "12/01/2020"
            },

        ];

一旦数据源准备好，现在我们可以使用 tabulator js 代码将数据绑定到 html div 标签。所以在这里我创建了一个具有如下 id 的 div：

<div id="players"></div>

下面是如何使用上述数组数据创建交互式表的代码。

var table = new Tabulator("#players", {
            height: 220,
            data: tabledata,
            layout: "fitColumns",
            pagination: "local",
            paginationSize: 5,
            tooltips: true,
            columns: [{
                    title: "Player Name",
                    field: "playername",
                    sorter: "string",
                    width: 150,
                    headerFilter: "input"
                }, {
                    title: "Player Price",
                    field: "price",
                    sorter: "number",
                    hozAlign: "left",
                    formatter: "progress",
                },

                {
                    title: "Team",
                    field: "team",
                    sorter: "string",
                    hozAlign: "center",
                    editor: "select",
                    headerFilter: true,
                    headerFilterParams: {
                        "RCB": "RCB",
                        "MI": "MI",
                        "KKR": "KKR",
                    }
                }, {
                    title: "Joining Date",
                    field: "joiningdate",
                    sorter: "date",
                    hozAlign: "center"
                },
            ],
            rowClick: function(e, row) {
                alert("Row " + row.getData().playerid + " Clicked!!!!");
            },
        });

让我们了解以下几点：

  • new Tabulator(“#players”,{ : 这里#players 是表格将呈现的 HTML div id。
  • height: 220：这里可以定义表格的高度，如果加载更多记录，则会出现滚动条。
  • data: tabledata：这里我们需要传递数据，这里是JavaScript数据数组名。
  • 布局：“fitColumns”：表格布局将适合页面。
  • pagination: “local” 和 paginationSize: 5：我们需要实现分页的这些参数。要启用分页，我们需要将其设置为 local 和 paginationSize。
  • 工具提示： true：当您将鼠标悬停在表中的任何列时将其设置为 true 后，将显示数据。
columns: [{
                    title: "Player Name",
                    field: "playername",
                    sorter: "string",
                    width: 150,
                    headerFilter: "input"
                }

columns 参数非常重要。您可以从数据源添加要在表中显示的列。以下是它将采用的参数：

  • 标题：这将是表列显示名称
  • field : 来自数据源的数据源字段
  • sorter：如果您尝试对文本字段进行排序，那么我们必须提及string。同理，整数类型的字段写“ number ”，DateTime类型的字段写“ date ”。
  • headerFilter: “input”: 如果你想在标题下面有一个过滤器选项，你可以为字符串类型写输入。

同样，如果你想对下拉列表使用过滤器，我们必须像下面这样写：

headerFilter: true,
                    headerFilterParams: {
                        "RCB": "RCB",
                        "MI": "MI",
                        "KKR": "KKR",
                    }

如果要从表中获取选定的行值，可以使用如下所示：

row.getData().playerid：这里的 playerid 是列名。

rowClick: function(e, row) {
                alert("Row " + row.getData().playerid + " Clicked!!!!");
            },

完整的 HTML 和 JavaScript 代码如下所示。整个 .html 文件代码：

<!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="https://unpkg.com/tabulator-tables@4.8.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/dist/js/tabulator.min.js"></script>

</head>

<body>

    <div id="players"></div>
    <script type="text/javascript">
        var tabledata = [{
                playerid: 1,
                playername: "Virat Kohli",
                price: "17",
                team: "RCB",
                joiningdate: "01/01/2020"
            }, {
                playerid: 2,
                playername: "Rohit Sharma",
                price: "15",
                team: "MI",
                joiningdate: "02/01/2020"
            }, {
                playerid: 3,
                playername: "MS Dhoni",
                price: "15",
                team: "CSK",
                joiningdate: "03/01/2020"
            }, {
                playerid: 4,
                playername: "Shreyas Iyer",
                price: "7",
                team: "RCB",
                joiningdate: "04/01/2020"
            }, {
                playerid: 5,
                playername: "KL Rahul",
                price: "11",
                team: "KXIP",
                joiningdate: "05/01/2020"
            }, {
                playerid: 6,
                playername: "Dinesh Karthik",
                price: "7",
                team: "KKR",
                joiningdate: "06/01/2020"
            }, {
                playerid: 7,
                playername: "Steve Smith",
                price: "12",
                team: "RR",
                joiningdate: "07/01/2020"
            }, {
                playerid: 8,
                playername: "David Warner",
                price: "12",
                team: "SRH",
                joiningdate: "08/01/2020"
            }, {
                playerid: 9,
                playername: "Kane Williamson",
                price: "3",
                team: "SRH",
                joiningdate: "09/01/2020"
            }, {
                playerid: 10,
                playername: "Jofra Archer",
                price: "7",
                team: "RR",
                joiningdate: "10/01/2020"
            }, {
                playerid: 11,
                playername: "Andre Russell",
                price: "9",
                team: "KKR",
                joiningdate: "11/01/2020"
            }, {
                playerid: 12,
                playername: "Chris Gayle",
                price: "2",
                team: "KXIP",
                joiningdate: "12/01/2020"
            },

        ];

        var table = new Tabulator("#players", {
            height: 220,
            data: tabledata,
            layout: "fitColumns",
            pagination: "local",
            paginationSize: 5,
            tooltips: true,
            columns: [{
                    title: "Player Name",
                    field: "playername",
                    sorter: "string",
                    width: 150,
                    headerFilter: "input"
                }, {
                    title: "Player Price",
                    field: "price",
                    sorter: "number",
                    hozAlign: "left",
                    formatter: "progress",
                },

                {
                    title: "Team",
                    field: "team",
                    sorter: "string",
                    hozAlign: "center",
                    editor: "select",
                    headerFilter: true,
                    headerFilterParams: {
                        "RCB": "RCB",
                        "MI": "MI",
                        "KKR": "KKR",
                    }
                }, {
                    title: "Joining Date",
                    field: "joiningdate",
                    sorter: "date",
                    hozAlign: "center"
                },
            ],
            rowClick: function(e, row) {
                alert("Row " + row.getData().playerid + " Clicked!!!!");
            },
        });
    </script>
</body>

</html>

运行 HTML 文件后，您可以看到输出如下所示：

制表器js教程

allway2
关注
javascript简单的表单交互
05-19
javascript简单的表单交互
Tabulator 易于使用、功能齐全、交互式表格 JavaScript 库
allway2的博客
11-26 2006
Tabulator 跨浏览器支持 Tabulator 支持所有主流浏览器 Tabulator 旨在支持所有现代桌面和移动 Web 浏览器 框架支持 Tabulator 适用于所有 JS 框架，包括： Tabulator 是一个普通的 JavaScript 库，可用于所有前端 JavaScript 框架 文档部分包含一个框架设置指南以帮助您入门 广泛的功能集 配置您的表以满足用户的需求 Tabulator 具有...
盘点五大热门JavaScript图表库，助你高效开发！
最新发布
Jiaberrr的博客
10-03 763
D3.js（Data-Driven Documents）是一个非常强大的数据可视化库，它允许你通过操纵DOM来绑定任意数据到文档，并使用SVG、Canvas和HTML将数据转换为图表。ECharts 是由百度开源的一个使用 JavaScript 实现的开源可视化库，支持丰富的图表类型，并提供了一套非常完善的图表工具库，包括直角坐标系、极坐标系、地理坐标系等。它支持多种图表类型，并且免费用于非商业用途。这些图表库各有特点，你可以根据自己的项目需求、技术栈偏好以及对图表定制程度的要求来选择合适的图表库。
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库
gitblog_00068的博客
05-11 770
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库 项目地址:https://gitcode.com/gh_mirrors/ta/tabulator 项目介绍 Tabulator是一款强大的JavaScript库，它使得创建互动式的HTML表格变得异常简单。只需几步操作，你就能从HTML表单、JavaScript数组或JSON数据中生成功能齐全的表格。该项目的设计目...
javascript和表单-表格交互
weixin_30318645的博客
05-27 184
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
Tabulator javascript data grid数据表格控件v5.1.0 发布说明
allway2的博客
02-08 798
发行说明 编辑器配置 文件导入 阿贾克斯 键绑定 菜单 分页 列 可移动行 排序 格式化 数据树 下载 Bug修复 编辑器配置 一个新的.editorconfig文件已添加到 Tabulator 项目中，以使开发人员更容易以正确的意图和其他浏览器设置为项目做出贡献 文件导入 此版本中添加了一个新的导入模块来处理将非 JavaScript 数据类型加载到表中 从本地文件导入尝试交互式演示 您可以使用导入功能让用户从本地磁盘中选择文件。它将向用户显示一个标准的文件打开
react-ReactTabulator基于tabulator具有许多实用功能的高级数据表格库
08-15
React Tabulator是一个强大的React组件，它利用了Tabulator库的功能，为开发者提供了丰富的高级数据表格解决方案。这个组件在React生态系统中扮演着数据展示和管理的角色，尤其适合处理大量复杂数据并需要灵活定制...
Tabulator是一款非常实用的基于jQueryUI的表格插件
08-10
Tabulator是一款功能强大的jQuery UI插件，专门用于创建交互式、可定制的表格。这款工具以其易用性和灵活性而受到开发者们的青睐。在JavaScript开发领域，特别是在处理数据展示时，Tabulator提供了一种高效的方式，...
Tabulator-基于jQuery UI的实用表格插件
12-11
文件夹`css`、`related`、`fonts`和`js`包含了用于构建和展示表格的CSS样式文件、相关资源、字体文件以及JavaScript库。这些文件是实现Tabulator功能的基础，开发者可以根据需要进行调整和优化。 总的来说，...
Python数据可视化库dash_tabulator安装教程
Tabulator是一个强大的JavaScript表格库，通过dash_tabulator这一Python库的封装，用户可以在Dash框架下轻松使用Tabulator的特性，实现复杂的数据展示和交云操作。资源包版本为0.0.5，适用于dash框架。该资源包需要...
【交互式图表大师课】：用rbokeh打造数据视觉盛宴
rbokeh 是一个用于创建交互式Web图形的R语言接口，基于Bokeh库开发。它允许数据分析师和数据科学家利用R的统计和图形能力，结合Bokeh强大的交互性和可视化定制功能，创建具有动态交互能力的图表，以满足复杂数据分析...
react-tabulator:React Tabulator基于Tabulator-一个具有许多高级功能的JS表库
05-08
React制表器 React Tabulator基于Tabulator-一个具有许多高级功能的JS表库。 现场演示： 示例代码： 更多示例，用例，常见问题解答： :glowing_star: 特征 制表器的功能： Filters Sorting Formatting Grouping Ajax Editing Virtualization Pagination Themes A11y I18n Layouts Frozen Cols/Rows Key Binding Responsive Persisting History Calc Validation Clipboard Tree Layout Nested Tables 加上更多功能：
js-tabulator-example:制表符库使用的简单示例
05-23
js-tabulator-example 制表符库使用的简单示例。 具有相同服务器本地数据负载的简化样板。 地位 原型制作。 注意：默认分支是default 。
javascript服务器交互型可编辑表格和js常用库
01-05
自己常用的js库和写的一个交互型可编辑表格: new BaseJs.EditTable({ // 表对象 table : BaseJs.$("tab"), // 从第几行第几列开始可编辑 start : [2, 1], // 到哪一行哪一列结束编辑 不写默认所有,写一个参数代表列,行不限 end : [], // 新增操作 addAction : { // (button)执行操作的按钮, button : BaseJs.$('add'), // callback:执行操作后的回调函数，能够加入一些自定义操作 callback : function(tr) { tr.onclick = function() { var trs = BaseJs.getByTagName("tr",BaseJs.$("tab")); for (var i = 0; i < trs.length; i++) { trs[i].style.background = '#FAFCFE'; } tr.style.background = '#B8CCF0'; } } }, // 保存新增或更新操作 saveOrUpdateAction : { button : BaseJs.$('save'), // 提交更新url,后台取参数data,为json字符串 url : 'saveOrUpdateActionUrl', //返回true执行保存操作 beforeCallback:function(data){ alert("提交给后台url:saveOrUpdateActionUrl?data="+BaseJs.encode(data)); return false; }, afterCallback : function(mo) { alert("提交修改后的数据:"+mo); //document.location.reload(); } }, // 删除操作 delAction : { button : BaseJs.$('delete'), // 删除url 可用函数返回动态url url : function() { return 'delActionUrl&mid=' + document.getElementById("mid").value; }, //返回true执行删除操作 beforeCallback:function(){ alert("提交给后台url:delActionUrl?sids="+document.getElementById("mid").value); return false; }, afterCallback : function() { document.location.reload(); } }, // id名(记录的id值需要保存在tr.id上) primaryKey : 'id', // 要全并的列数集合 [0]代表第一列要执行合并操作,[0,1]代表1，2列有合并操作 mergeColumn : [], // 列描述对象 ,包含一个数组，数组中每一个对象说明一个列编辑对象和相关处理 column : [ { name : 'year', // 选择型 editorType : 'select', // 加载select数据url,返回json数据，格式应为:[{display:'',value:''},{display:'',value:''}] dataUrl : 'WaterQualityAction?method=AjaxSelect&para=LEVEL', //可以动态返回 //dataUrl : function(me){ // return 'WaterQualityAction?method=AjaxSelect&para=LEVEL'; //}, //本地数据 有此选项时dataUrl无效 data:"[{display:'2005年',value:'2005'},{display:'2004年',value:'2004'},{display:'2003年',value:'2003'},{display:'2002年',value:'2002'},{display:'2001年',value:'2001'}]", // 新增默认值，不写使用默认 defaultValue : '2008年', // 检验输入数据正确性,返回true通过验证 validate : function(v, obj) { alert("现在检验输入数据合法性!"); return true; } }, { name : 'com', editorType : 'text', defaultValue : '请输入', validate : function(v, obj) { if (!/^[0-9]+$/.test(v)){alert("必须是数字");return false}; return true; } }, { name : 'cn', editorType : 'text', defaultValue : '请输入', validate : function(v, obj) { if (!/^[0-9]+$/.test(v)){alert("必须是数字");return false}; return true; } }, { name : 'date_month', // 日期型 editorType : 'date', // 格式化日期样式,默认yyyy-MM format : 'yyyy年MM月份', //自定义默认值 defaultValue : BaseJs.Utils.format .date(new Date(), 'yyyy年MM月份') }] });
原创-javascript服务器交互型可编辑表格和我的js常用库
07-24
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator.userAgent.toLowerCase(); check = function(r) { return r.test(userAgent); }; isOpera = check(/opera/); isIE = !isOpera && check(/msie/); isIE7 = isIE && check(/msie 7/); isIE8 = isIE && check(/msie 8/); isIE6 = isIE && !isIE7 && !isIE8; var base = { isIE : isIE, // 动态添加事件 addEvent : function(oTarget, sEventType, funName) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType.substring(2, sEventType.length), funName, false); } else if (oTarget.attachEvent) { oTarget.attachEvent(sEventType, funName); } else { oTarget[sEventType] = funName; } }, // 删除事件 removeEvent : function(oTarget, sEventType, funName) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType.substring(1, sEventType.length), funName, false); } else if (oTarget.detachEvent) { oTarget.detachEvent(sEventType, funName); } else { oTarget[sEventType] = null; } }, // 阻止事件冒泡行为 stopBubble : function(ev) { // 如果传入了事件参数，则说明不是ie浏览器 if (ev && ev.stopPropagation) { ev.stopPropagaton(); } else { window.event.cancelBubble = true; } }, // 阻止事件默认浏览器行为 stopDefault : function(ev) { // w3c标准 if (ev && ev.preventDefault) { ev.preventDefault(); } // ie window.event.returnValue = false; return false; }, ........................... ........................... 可编辑表格用法示例： var buttons = BaseJs.getByTagName("img"); for (var i=0;i -1){ add = buttons[i]; }else if(src.indexOf('del')>-1){ del = buttons[i]; }else if(src.indexOf('save')>-1){ save = buttons[i]; } } EidtTable = new BaseJs.EditTable({ /
tabulator.js表格分页查询
weixin_43082983的博客
05-14 604
之前使用bootstrap table比较多，第一次使用tabulator，查了官方文档，一点一点debugger才整出来分页，记录一下。 使用的tabulator.js是 v3.5.1 html文件: js文件： ("#demoTable").tabulator({ pagination:“remote”, //enable remote pagination ajaxConfig: “POST”, //ajax request type ajaxURL:_ctx + ‘/view/getList’
Tabulator使用
shenyinglijie的博客
10-13 1890
#Tabulator Tabulator使用指南 数据的format验证： startTime ,endTime（数据format验证结果） validator:“regex:^(\d){1,2}????\d){1,2}$” cell编辑原理 cell编辑时，会给编辑的cell添加tabulator-editing的class属性。 可以注入的方式时列定义中的editor属性 editor自定义函数包含四个属性 data onRendered success：编辑成功 cancel编辑失败 列不可排序 属性
JavaScript 常用的表单交互
一不小心吃太撑了
10-27 2534
一、数据规范性检查 1、应用场合：在判断输入的数据是否符合格式要求、数据的范围、符号什么的 会涉及到正则表达，来验证输入数据的格式 2、例子：验证邮件格式是否符合要求 html部分：     验证在onblur时开始，onblur是文本框失去焦点的意思，具体的操作就是输完数据后，点击浏览器其他空白处；获得焦点是onfocus。 在form元素上使用onsubmit事件，针对表单进行拦截，...
JavaScript与 HTML表单的交互过程，想要学习动态网页但是无从下手的新手看看。...
weixin_30484739的博客
11-07 107
最近开始了 java web的学习在学习中学到了很多有用的东西 比如说 html 表单如何 和 javascript进行交互的 读完本篇文章后相信初学者会有一个 清晰的理解 。。。 对应下面的代码看我写的问题 。 其实表单的交互操作很简单 就是在 提交表单数据的时候调用一个 javascript 所写的函数, 注意看我下面所给的代码 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值