交互与前端13 Tabulator 表格实践

最新推荐文章于 2024-05-11 09:39:49 发布
最新推荐文章于 2024-05-11 09:39:49 发布
阅读量477 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yukai08008/article/details/127914250
版权
本文讲述了作者在前端开发中使用Tabulator表格的实践经验，反思了过于追求抽象和通用化的错误，提出实际出发，简化流程。通过实例介绍了如何高效构建前端页面，包括页面元素、数据加载、增删改查功能，并提出了将需求面缩小，减少所需页面的策略。此外，还讨论了交互编辑表和数据速览表的概念，并规划了不同类型的交互编辑表。
摘要由CSDN通过智能技术生成

说明

虽然还是没有太多时间花在前端上，不过已经开始走上轨道，时不时做一些小东西了。

有的时候我太过追求抽象化，通用化，在这个阶段是不太对的。做模型也好，搞架构也好，一方面是我搞的时间够多，另一方面是因为他们的本质的确是需要抽象的。

在前端，尤其是刚开始没搞多久的时候，我觉得做起来更重要。在完成了功能之后，可以「顿一顿」，做一些小总结。

内容

1 反思错误

一开始，我犯了急于求成的错误，再次反省一下…

具体的错误是我希望在部署交互式表格时可以一次性的面对所有的数据表。这些数据表属于不同的数据库，用于不同的业务，并且分布在不同的主机上…有点飘了。

实施的时候我发现有一些问题，例如每个表格的列是不同的，怎么控制要展示哪些呢？ 有些列要允许编辑，有些列又不允许，怎么控制呢？反正越想越多，方法虽然有，但是都不是一时半会能搞好的。

搞不好，难道我从头研究前端吗？毕竟我还有很多重要的事去做。所以就陷入了不进不退的状态。

2 实际一点

其实在这次之前，我是在单个页面上完成了增删改查的全部功能的

所以今早突然觉得没必要贪多，先干一些实在的，把流程摸熟了再说，然后真觉得小处是可以见大的，该笨的时候还是得笨，不要老想着做大聪明。

小需求：将不同数据库服务的信息进行记录，以便

最低0.47元/天 解锁文章
yukai08008
关注
专栏目录
交互与前端16 Tabulator 表格实践4
yukai08008的博客
11-25 343
继续给表格来加一些小功能。
Tabulator是一款非常实用的基于jQueryUI的表格插件
08-10
Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。
tablulator 表格插件使用 vue3 + ts
liyayou的博客
03-12 779
项目中使用的是layui框架，layui整体使用起来还是挺好用的，界面风格简约，上手也简单，但是layui自带的表格性能真的不咋行，基本上显示超过500条，就很出现浏览器卡顿，全选的时候，浏览器直接都直接无响应了。）这个开源表格的性能挺好（显示并全选1w条都没问题，更多的没试了，因为没那个需求哈哈）的，该有的功能也都有，而且这个是使用jquery写的，嵌入layui完全无压力。但是我们的项目需求，经常会有显示上千条的需求。在根目录的.d.ts结尾的文件加入以下代码。 代码。
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库
最新发布
gitblog_00068的博客
05-11 698
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库 项目地址:https://gitcode.com/gh_mirrors/ta/tabulator 项目介绍 Tabulator是一款强大的JavaScript库，它使得创建互动式的HTML表格变得异常简单。只需几步操作，你就能从HTML表单、JavaScript数组或JSON数据中生成功能齐全的表格。该项目的设计目...
Tabulator-基于jQuery UI的实用表格插件
12-11
Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。
交互与前端14 Tabulator 表格实践2
yukai08008的博客
11-20 795
将上一篇提到的内容进行了实现，整体上还算是比较符合预期吧，但并不是完美。这既和我的需求比较“妖”有关系，也和前端的确不太熟有关。但不管怎么样，反正实现了功能。1 实现自动为表格增加有序值字段方法（这个应该是做过的，要挪移一下） ~ 1 Hour - 符合预期2 将上述的脚本和对应视图进行检查和封装。~ 2 Hour - 超过预期1个小时，主要是因为建立了主键索引，当重复插入时会报错。我还以为是自己的工具有问题，调试了好一会。3 增加自动根据数据库服务名创建连接的方法。
交互与前端15 Tabulator 表格实践3
yukai08008的博客
11-23 443
拳不离手，曲不离口原理通了不代表完成，还是需要不断的练习和完善。
交互与前端9 Tabulator+Flask开发日志006
yukai08008的博客
09-29 495
上一次做到本地的增删改已经ok,现在要使用下拉框来进行选择和触发。接下来就简单了（之前已经实现过），使用多级下拉框来选择不同的服务器、数据库和表。唯一一个要注意的就是不同表的主键问题：大部分主键是不同名的。当然也不是所有表都需要/允许编辑。约定：每个可编辑的数据表都有一个整型的主键id，名字叫task_id,这个我已经有一个可手动开启的worker来长期运行。所以如果要将某个表转为可编辑状态时，启动这个worker去守护这张表就可以了。
tabulator 自动从数据生成表格列名
allway2的博客
11-26 197
<!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 h.
c#画表格，自动创建htmltable的行与列
03-12
进来在做c#动态生成table，c#自动创建htmltable的行与列
tabulator:一组 Unix shell 命令行工具，用于快速方便地批量处理带有标题行的表格文本文件（也称为制表符分隔、tsv、csv 或平面数据文件格式）。 提供按名称的列引用、自动分隔符和每行转换的压缩检测、类似 sql 的 group-by 操作和关系连接
06-03
制表符：用于分隔数据文件的 Shell 脚本 网址： : 添加一名作者 日期 2015/04/03 发布 1.2.1 2015/03/21 发布 1.2 2014/10/12 发布 1.1.2 2012/01/24 发布 1.1.1 2011/11/25 发布 1.1.0 2009/06/16 发布 1.0.0 目的 Unix/Linux 带有多种工具，例如cut, paste, join, sort,以处理表格文本数据文件（也称为制表符分隔、 csv 、 tsv或平面文件格式）。 然而，它们有一些缺点，通常需要额外的脚本并阻止它们直接用于单行程序。 例如，必须计算要作为参数传递的列是麻烦且容易出错的； join需要预先排序的文件，并使用单个键列； 没有直接的“分组依据”功能。 一种补救措施是首先将数据加载到关系数据库或 noSQL 系统（例如 Hadoop/Pig）中，
tabulator.js表格分页查询
weixin_43082983的博客
05-14 598
之前使用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’
Tabulate: 优雅的表格可视化工具
sgzqc的专栏
04-28 1753
本文探索了如何使用Python中的Tabulate来创建整洁而专业的表格数据展示，表格在数据分析、报告和文档等各种情况下都很有用。借助该库，大家可以创建更具可读性的报告，并更好地展示数据分析的结果。您学废了嘛？
Tabulator 交互式数据表格编辑示例
allway2的博客
11-22 540
<!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 .
tabulate库：我去年制了个表
织夜虫的博客
03-27 761
tabulate库 功能 tabulate库提供打印表格数据的功能，支持以下数据类型： 支持二维列表、二维迭代类型、字典迭代等类型 支持NumPy二维数组、pandas.DataFrame类型 输出表格可以通过参数自定义风格 tabulate库的函数 tabulate库只有一个函数tabulate() 介绍一些常用参数： table：表格数据或变量 headers：定义表格的表头 headers=“firstrow”：将每个列表的第一行做表头 headers=“keys”：使用字典索引的键做表头
谈tabulator动态增删改、填充数据以及清空数据
IT黑板的博客
11-28 2924
谈tabulator动态增删改、填充数据以及清空数据 闲话不多话，直接上干货！ 1、关于操作列表设置： //创建并设置table属性 var _curRow = null; //设置格式 var optIconFunction = function(cell, formatterParams){ //plain text value var yhbh = cell.getRow().ge...
tabulator 通过设置列定义切换编辑与非编辑状态
allway2的博客
11-26 333
//new column definition array var newColumns = [ {title:"Name", field:"name", sorter:"string", width:200}, {title:"Age", field:"age", sorter:"number", hozAlign:"right", formatter:"progress"}, {title:"Height", field:"height", formatter:"sta.
Tabulator javascript data grid数据表格控件v5.1.0 发布说明
allway2的博客
02-08 786
发行说明 编辑器配置 文件导入 阿贾克斯 键绑定 菜单 分页 列 可移动行 排序 格式化 数据树 下载 Bug修复 编辑器配置 一个新的.editorconfig文件已添加到 Tabulator 项目中，以使开发人员更容易以正确的意图和其他浏览器设置为项目做出贡献 文件导入 此版本中添加了一个新的导入模块来处理将非 JavaScript 数据类型加载到表中 从本地文件导入尝试交互式演示 您可以使用导入功能让用户从本地磁盘中选择文件。它将向用户显示一个标准的文件打开
写一段django框架下，在前端用Tabulator绘制表格的代码
05-26
以下是在 Django 框架下使用 Tabulator 绘制表格的代码示例： 1. 在前端 HTML 文件中引入 Tabulator 和 jQuery 库： ```html <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script> </head> <body> <div id="table-container"></div> </body> </html> ``` 2. 在前端 JavaScript 文件中编写绘制表格的代码： ```javascript var table = new Tabulator("#table-container", { ajaxURL: "/api/data", // 后端 API 接口地址 layout: "fitColumns", // 自适应表格宽度 pagination: "remote", // 开启分页，使用后端分页 paginationSize: 10, // 每页显示的记录数 columns: [ { title: "ID", field: "id" }, { title: "姓名", field: "name" }, { title: "年龄", field: "age" }, ], }); ``` 3. 在后端 Django 应用中编写 API 接口代码： ```python from django.http import JsonResponse from myapp.models import MyModel def data_api(request): page = request.GET.get("page", 1) size = request.GET.get("size", 10) start = (page - 1) * size end = start + size data = MyModel.objects.all()[start:end].values("id", "name", "age") count = MyModel.objects.count() return JsonResponse({"data": list(data), "count": count}) ``` 其中，`MyModel` 是你的数据模型，需要根据你的实际情况进行修改。在 API 接口中，我们使用了 `page` 和 `size` 参数来进行分页，`start` 和 `end` 变量用于计算当前页需要显示的记录范围，`count` 变量用于返回总记录数。最后，我们将数据以 JSON 格式返回给前端。 4. 将 API 接口注册到 Django 路由中： ```python from django.urls import path from myapp.views import data_api urlpatterns = [ path("api/data", data_api), ] ``` 完成以上步骤后，你就可以在前端页面中看到使用 Tabulator 绘制的表格，并且可以进行分页和数据排序等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值