Gridmanager,优秀表格插件,支持前端三大框架
GridManager是什么?
GridManager是拭目以待开发的一个开源项目,项目托管在Github。GridManager是一款具有配置灵活、使用便捷的表格组件,它快速、灵活的对Table标签进行实例化,让Table标签充满活力。目前已经具有AngularJS版本,Vue版本,React版本等兼容主流前端框架的多个版本。
GridManager有哪些基本操作?
- 宽度调整: 表格的列宽度可进行拖拽式调整
- 列位置更换: 表格的列位置进行拖拽式调整顺序
- 配置列显示隐藏: 可通过配置对列进行显示与隐藏转换
- 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
- 排序: 表格数据支持单项排序或组合排序
- 分页: 表格支持ajax分页,包含选择每页显示总条数和跳转至指定页功能
- 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
- 行序号: 自动生成每行序号列
- 行全选: 自动生成行全选列
- 数据导出: 当前页数据导出,仅针对已选中的数据进行导出
- 右键菜单: 常用功能在菜单中可进行快捷操作
- 过滤: 通过对列进行过滤达到快速搜索效果
- …...
简单演示地址 复杂演示地址
GridManager实现自定义配置
在GridManager中,拥有极其多的可配置项,它们都支持用户自定义配置,比如觉得表格的行背景色不符合你的审美,觉得有些默认配置项没有什么用处,觉得提示信息不够友好,等等等等,都是可以你自己DIY成你想象的样子。在这里,我将列出我使用过程中调整过的配置项,以及配置方式,并且将着重描述emptyTemplate与ajaxPageTemplate两个参数,更多的可配置参数可参考拭目以待给出的API。针对自定义配置功能,我写了一个简单的皮肤组件,主要修改了以下默认参数项:

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

文章图片
- 总体新的配置效果

文章图片
- 原始配置数据为空

文章图片
- 新的配置数据为空

文章图片
- 原始配置数据加载

文章图片
- 新的配置数据加载

文章图片
ajaxPageTemplate配置
在这里,我将直接给出我配置的html模版代码,并且与原始配置的html模版进行对比,从而让大家更能够理解如何简单快速的去配置页脚的分页信息。
- 我的分页信息配置模版
共条刷新{{ vm.pageSizeOptionTpl }}
-
-
/共页
-
- 原始分页信息配置模版
{{ vm.refreshActionText }}{{ vm.gotoFirstText }}
{{ vm.gotoLastText }}{{ vm.pageSizeOptionTpl }}
-
{{ vm.firstPageText }}
-
{{ vm.previousPageText }}
-
{{ vm.lastPageText }}
- 配置项解析
refresh-action作为元素CSS样式类,当为元素设置该样式类时,该元素即可点击实现对数据进行刷新,默认为图标,可以修改为图片、图标、文字等等。如:

文章图片
2、totals-number-info,数据总条数
根据属性值totals-number-info展示数据总条数,比如想在其他地方显示数据总条数,那么可以在该模版的任意位置添加一个元素,然后为其添加属性值totals-number-info,即可显示数据总条数,具体的样式也可以自己进行重新调整。如:

文章图片
3、current-page-info,要跳转的页数,也是当前所在页码
同totals-number-info一样,current-page-info也作为元素的属性值,可以放在模版中任何你想使用的地方,多数情况下,我们将其设置在一个input输入框上,因为用这种方式,我们可以通过输入想跳转的页码回车之后进行跳转到指定页。如:

文章图片
4、checked-info,选中数据条数信息
显示选中数据条数信息,该信息的显示方式挂在class样式类上面,在使用了复选框进行选中行的时候,通过该css可以显示选中数据条数,默认我们不需要太大的改动,直接使用 即可,但是可以将该div换为其他html元素,需要显示信息的位置可以根据你的需求随意放置,只要保证class的类名包含“checked-info”即可。如:

文章图片
5、page-info,页面数据信息
【Gridmanager,优秀表格插件,支持前端三大框架】显示当前页数据条数从第多少条到第多少条,如每页显示20条数据,当前在第1页,则该信息显示“此页显示 1-20”,使用方式同checked-info。 如:

文章图片
6、pagination-before,首页与上一页区域
pagination-before作为元素的属性值,用于设置首页和上一页,在其下面的li元素,绑定的class样式类名必须是first-page与previous-page,分别表示首页和上一页,但是li元素中,你可以设置任何你想设置的样式、文字、图标、图片等,完全可以自定义你想要的样式。 7、pagination-number,页码区域信息
pagination-number作为元素属性值用于显示翻页页码信息以及当前所在页,你可以为div添加一个这样的属性,那么这个div区域将会显示页码信息,默认是小方块中间显示页码的样式,如果觉得这个样式不符合自己的需求,你还可以自定义,只要将该属性绑定在html元素即可。 8、pagination-after,尾页与下一页区域
同pagination-before一样,pagination-after作为元素的属性值,用于设置尾页和下一页,在其下面的li元素,绑定的class样式类名必须是last-page与next-page,分别表示尾页和下一页,但是li元素中,你可以设置任何你想设置的样式、文字、图标、图片等,完全可以自定义你想要的样式。如:

文章图片
总结
总的来说,ajaxPage模版中,只要具有相对应的必须存在的属性值或class样式类名,各个元素的位置你完全可以自由配置,控制显示与隐藏、控制样式、控制位置等等都是可以的。
参考
GridManager GridManager API GridManager Demo GridManager-ccms-skin GridManager-element-skin
推荐阅读
- 父母越不讲道理,孩子反而越优秀!说的是你吗()
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 我努力,因为你很优秀
- 果然,优秀的东西总是吸引人的。
- 1040表格和W-2表格
- 12.13
- 《优秀的人》
- 不是你不优秀,只是你看不见。
- 教你如何做一个好看的表格,excel使用技巧大全
- 你不是不优秀|你不是不优秀 只是心太急