功能强大的表格组件

grdmanager,js,导出

写个程序换个饼 发布于

> 最近把列固定功能发布了,细数下这个表格组件已经有五年的历程了。 ### 基础功能 > 首先,我们来看看这个表格组件的基础功能。 ![](https://user-gold-cdn.xitu.io/2020/3/31/1712f936050241ba?w=1103&h=551&f=gif&s=1922066) 通过GridManager可以通过简单的配置实现: 选择列、序号、排序、分页、过滤、表头提醒、合并单元格等基础功能。 这些功能已经可以满足大部分产品需求,但这远远是不够的。 ### 宽度调整 > 让表格的宽度由用户来掌握,就像excel那样。 ![](https://user-gold-cdn.xitu.io/2020/3/31/1712f9fd4616b087?w=1103&h=551&f=gif&s=1198748) 在宽度调整的同时,通过简单的配置实现表头固定和指定的列固定。 特别是在表格列项较多的情况下,宽度调整配合上表头、列固定会提升整体的交互体验。 然而,这也是不够的。 ### 位置调整 > 通过一些简单的配置,提供给用户一个可以自由移动的表格。 ![](https://user-gold-cdn.xitu.io/2020/3/31/1712fa80a22141a9?w=1103&h=551&f=gif&s=590674) 当用户打开界面,一串串的数字展现在表格上。 当用户想对第3列与第9列进行比较时,那么就把第9列移动到第3列后面吧。 你可能会说为什么不把其它的项隐藏只显示第3列与第9列呢? 是的,这也是一个不错的交互方式。在GridManager中,不仅支持这种方式,而且还把这种方式添加至了右键快捷菜单内。 ### 快捷右键 > 点击鼠标右键,看到的不再是查看网页源代码之类用户无感的功能了。 ![](https://user-gold-cdn.xitu.io/2020/3/31/1712faeda0580e0f?w=1103&h=551&f=gif&s=1171024) 在GridManager右键中支持了一些快捷操作: 分页、刷新、导出、配置、打印。 这些功能,是可以在右键菜单中或通过方法进行调用。具体可参考[API](http://gridmanager.lovejavascript.com/api/index.html#setConfigVisible) ### 支持的框架 > 这个表格组件是个万花筒,主流的框架都支持。 由于GridManager是原生javascrpt编码,内部未依赖任何框架。在对代码进行简易的封装后,共支持以下框架: - 原生js: [github](https://github.com/baukh789/GridManager) - Vue: [github](https://github.com/baukh789/GridManager-Vue) - React: [github](https://github.com/baukh789/GridManager-React) - Angular-1.x: [github](https://github.com/baukh789/GridManager-Angular-1.x) - jQuery: [github](https://github.com/baukh789/GridManager) GridManager已经在github开源,可以[点击访问](https://github.com/baukh789/GridManager)。 希望GridManager可以简化你的开发,让Table标签在你的项目中充满活力。