GridManager Vue
基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。
实现功能
功能 | 描述 |
---|---|
宽度调整 | 表格的列宽度可进行拖拽式调整 |
位置更换 | 表格的列位置进行拖拽式调整 |
配置列 | 可通过配置对列进行显示隐藏转换 |
表头吸顶 | 在表存在可视区域的情况下,表头将一直存在于顶部 |
列固定 | 指定某列固定在左侧或右侧 |
排序 | 表格单项排序或组合排序 |
分页 | 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能 |
用户偏好记忆 | 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数 |
序号 | 自动生成序号列 |
全选 | 自动生成全选列 |
导出 | 静态数据导出、动态数据导出、已选数据导出 |
打印 | 当前页打印 |
右键菜单 | 常用功能在菜单中可进行快捷操作 |
过滤 | 通过对列进行过滤达到快速搜索效果 |
合并 | 同一列下相同值的单元格可自动合并 |
树表格 | 可通过配置快速实现树型表格结构 |
行移动 | 可通过配置快速实现行位置移动 |
API
该文档为原生GridManager的文档,vue版本除了在
columnData.text
columnData.template
topFullColumn.template
中可以使用vue模版外,其它使用方式相同。
Demo
该示例为原生GridManager的示例,vue版本除了在
columnData.text
columnData.template
topFullColumn.template
中可以使用vue模版外,其它使用方式相同。
Core code
开发环境
ES2015 + webpack + Vue + GridManager
安装
npm install gridmanager-vue --save
项目中引用
Vue全局组件
import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
Vue.use(GridManagerVue);
Vue局部组件
import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
new Vue({
el: '#app',
components: {
GridManagerVue
}
});
示例
<grid-manager :option=