素材巴巴 > 程序开发 >

厉害啦!功能强大的表格组件

程序开发 2023-09-20 14:47:23

大家好,我是章鱼猫。

今天的推荐依然是来自于读者的投稿,非常好,希望大家投稿继续,有好的开源项目欢迎大家向我们投稿。

据作者描述这个开源项目他已经维护了 5 年了,程序员真的是有一颗开源的心和一片赤诚的开源精神啊。

最近把列固定功能发布了,细数下这个表格组件已经有五年的历程了。

基础功能

首先,我们来看看这个表格组件的基础功能。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNTU=,g_se,x_0,y_0,t_100

通过 GridManager 可以通过简单的配置实现:选择列、序号、排序、分页、过滤、表头提醒、合并单元格等基础功能。

这些功能已经可以满足大部分产品需求,但这远远是不够的。

宽度调整

让表格的宽度由用户来掌握,就像 excel 那样。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNTU=,g_se,x_0,y_0,t_100

在宽度调整的同时,通过简单的配置实现表头固定和指定的列固定。特别是在表格列项较多的情况下,宽度调整配合上表头、列固定会提升整体的交互体验。然而,这也是不够的。

位置调整

通过一些简单的配置,提供给用户一个可以自由移动的表格。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNTU=,g_se,x_0,y_0,t_100

当用户打开界面,一串串的数字展现在表格上。

当用户想对第 3 列与第 9 列进行比较时,那么就把第 9 列移动到第 3 列后面吧。

你可能会说为什么不把其它的项隐藏只显示第 3 列与第 9 列呢?

是的,这也是一个不错的交互方式。在 GridManager 中,不仅支持这种方式,而且还把这种方式添加至了右键快捷菜单内。

快捷右键

点击鼠标右键,看到的不再是查看网页源代码之类用户无感的功能了。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNTU=,g_se,x_0,y_0,t_100

在 GridManager 右键中支持了一些快捷操作:分页、刷新、导出、配置、打印。

这些功能,是可以在右键菜单中或通过方法进行调用。具体可参考 API

支持的框架

这个表格组件是个万花筒,主流的框架都支持。

由于 GridManager 是原生 javascrpt 编码,内部未依赖任何框架。在对代码进行简易的封装后,共支持以下框架:

希望 GridManager 可以简化你的开发,让 Table 标签在你的项目中充满活力。

开源项目地址:https://github.com/baukh789/GridManager

开源项目作者:baukh789

最后,照旧安利一波我们的公众号:「GitHub 精选」,目前每天都会推荐一篇优质的开源项目文章,主要分享比较实用或有趣的开发工具与开源项目。我们的目标是:挖掘开源的价值。这个公众号超级值得大家关注。


标签:

上一篇: 浏览器:一个家族的奋斗 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。