Gridmanager,优秀表格插件，支持前端三大框架

 

GridManager是什么？

GridManager是拭目以待开发的一个开源项目，项目托管在Github。GridManager是一款具有配置灵活、使用便捷的表格组件，它快速、灵活的对Table标签进行实例化，让Table标签充满活力。目前已经具有AngularJS版本，Vue版本，React版本等兼容主流前端框架的多个版本。

 

GridManager有哪些基本操作？

• 宽度调整: 表格的列宽度可进行拖拽式调整
• 列位置更换: 表格的列位置进行拖拽式调整顺序
• 配置列显示隐藏: 可通过配置对列进行显示与隐藏转换
• 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
• 排序: 表格数据支持单项排序或组合排序 
• 分页: 表格支持ajax分页,包含选择每页显示总条数和跳转至指定页功能
• 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
• 行序号: 自动生成每行序号列
• 行全选: 自动生成行全选列  
• 数据导出: 当前页数据导出,仅针对已选中的数据进行导出
• 右键菜单: 常用功能在菜单中可进行快捷操作
• 过滤: 通过对列进行过滤达到快速搜索效果
• …...

GridManager Demo演示

简单演示地址 复杂演示地址

GridManager实现自定义配置

在GridManager中，拥有极其多的可配置项，它们都支持用户自定义配置，比如觉得表格的行背景色不符合你的审美，觉得有些默认配置项没有什么用处，觉得提示信息不够友好，等等等等，都是可以你自己DIY成你想象的样子。在这里，我将列出我使用过程中调整过的配置项，以及配置方式，并且将着重描述emptyTemplate与ajaxPageTemplate两个参数，更多的可配置参数可参考拭目以待给出的API。针对自定义配置功能，我写了一个简单的皮肤组件，主要修改了以下默认参数项：

根据下面的效果对比图可以看出，除了页脚的分页信息样式外，其他样式其实变化不是很大，而我这里主要说的也将是配置分页信息模块，同时也涉及到其他一些基本的样式配置。

配置前后效果对比

• 总体原始配置效果

• 总体新的配置效果