# GridManager-Vue
**Repository Path**: baukh/GridManager-Vue
## Basic Information
- **Project Name**: GridManager-Vue
- **Description**: 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager.
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 18
- **Forks**: 9
- **Created**: 2018-06-06
- **Last Updated**: 2024-08-15
## Categories & Tags
**Categories**: webui
**Tags**: None
## README
# GridManager Vue[自3.0开始, 该库已与gridmanager合并]
> 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManager API相同。
[](https://travis-ci.org/baukh789/GridManager)
[](https://www.npmjs.com/package/gridmanager-vue)
[](https://www.npmjs.com/package/gridmanager-vue)
[](https://codecov.io/gh/baukh789/GridManager)
## 实现功能
| 功能 | 描述 |
| -: | :- |
| 宽度调整 | 表格的列宽度可进行拖拽式调整 |
| 位置更换 | 表格的列位置进行拖拽式调整 |
| 配置列 | 可通过配置对列进行显示隐藏转换 |
| 表头吸顶 | 在表存在可视区域的情况下,表头将一直存在于顶部 |
| 列固定 | 指定某列固定在左侧或右侧 |
| 排序 | 表格单项排序或组合排序 |
| 分页 | 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能 |
| 用户偏好记忆 | 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数 |
| 序号 | 自动生成序号列 |
| 全选 | 自动生成全选列 |
| 导出 | 静态数据导出、动态数据导出、已选数据导出 |
| 打印 | 当前页打印 |
| 右键菜单 | 常用功能在菜单中可进行快捷操作 |
| 过滤 | 通过对列进行过滤达到快速搜索效果 |
| 合并 | 同一列下相同值的单元格可自动合并 |
| 树表格 | 可通过配置快速实现树型表格结构 |
| 行移动 | 可通过配置快速实现行位置移动 |
## API
> 该文档为原生GridManager的文档，vue版本除了在`columnData.text` `columnData.template` `topFullColumn.template`中可以使用vue模版外，其它使用方式相同。
- [API](http://gridmanager.lovejavascript.com/api/index.html)
## Demo
> 该示例为原生GridManager的示例，vue版本除了在`columnData.text` `columnData.template` `topFullColumn.template`中可以使用vue模版外，其它使用方式相同。
- [简单的示例](http://gridmanager.lovejavascript.com/demo/index.html)
- [复杂的示例](http://develop.lovejavascript.com/node_modules/gridmanager/demo/index.html)
## Core code
- [GridManager](https://github.com/baukh789/GridManager)
- [jTool](https://github.com/baukh789/jTool)
## 开发环境
ES2015 + webpack + Vue + GridManager
## 安装
```
npm install gridmanager-vue --save
```
## 项目中引用
- es2015引入方式
```javascript
import GridManager from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
```
- 通过script标签引入
```html
```
### Vue全局组件
```javascript
import GridManager from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
Vue.use(GridManager);
```
### Vue局部组件
```javascript
import GridManager from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
new Vue({
el: '#app',
components: {
GridManager
}
});
```
### 示例
```html
```
```javascript
const app = new Vue({
el: '#app',
data: {
// 表格渲染回调函数
// query为gmOptions中配置的query
callback: function(query) {
console.log('callback => ', query);
},
// 表格
gridOption = {
// 表格唯一标识
gridManagerName: 'test-gm',
// 高度
height: '300px',
// 首次是否加载
firstLoading: false,
// 列配置
columnData: [
{
key: 'shopId',
width: '180px',
text: '店铺id',
align: 'center'
},{
key: 'platId',
text: '平台',
// template=> function: return dom
// 参数介绍
// platId: 当前行数据中与配置项key相同字段的值
// row: 当前行数据
// index: 当前行所在数据中的索引值
template: (platId, row, index) => {
const span = document.createElement('span');
span.style.color = 'blue';
span.innerText = platId;
return span;
}
},{
key: 'platNick',
text: '店铺名称',
// template=> string dom
template: `跟据相关法规，该单元格被过滤`
},{
key: 'createTime',
text: '创建时间',
},{
key: 'updateTime',
text: '更新时间',
// 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项
filter: {
// 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。
option: [
{value: '1', text: 'HTML/CSS'},
{value: '2', text: 'nodeJS'},
{value: '3', text: 'javaScript'},
{value: '4', text: '前端鸡汤'},
{value: '5', text: 'PM Coffee'},
{value: '6', text: '前端框架'},
{value: '7', text: '前端相关'}
],
// 筛选选中项，字符串, 默认为''。 非必设项，选中的过滤条件将会覆盖query
selected: '3',
// 否为多选, 布尔值, 默认为false。非必设项
isMultiple: false
},
// template=> function: return string dom
template: updateTime => {
return `${updateTime}`;
}
},{
key: 'action',
text: '操作',
width: '100px',
align: 'center',
// template=> function: return vue template
// vue模版中将自动添加row字段，该字段为当前行所使用的数据
// vue模版将不允许再使用template函数中传入的参数
template:() => {
return '解除绑定';
}
}
],
// 使用分页
supportAjaxPage: true,
// 数据来源，类型: string url || data || function return[promise || string url || data]
ajaxData: (settings, params) => {
return tenantRelateShop(params);
},
// 请求失败后事件
ajaxError: err => {
console.log(err);
},
// checkbox选择事件
checkedAfter: rowList => {
this.selectedCheck(rowList);
},
// 每页显示条数
pageSize: 20
// ...更多配置请参考API
}
},
methods: {
// 解除绑定
delRelation: function(row) {
// ... 解除绑定操作
}
}
});
```
### 关于配置项中的this指向
#### 可能引起this指向错误的方式:
- 表格配置项在data中配置时，配置项内所包含的函数this指向并不是VueComponents。
- 使用Class声明方式时，配置项内所包含的函数this指向为class，而非VueComponents。
#### 解决方法:
可以通过将的配置项在在created内来实现，如:
```
created() {
this.gridOption = {
gridManagerName: 'test',
... // 其它配置项
};
}
```
### 调用公开方法
> 通过ES6语法，将GridManagerVue引入, 如果使用`this.$gridManager`服务需要提前通过`Vue.use(GridManagerVue)`将`GridManagerVue`注册至全局组件。
```javascript
import GridManager, { $gridManager } from 'gridmanager-vue';
Vue.use(GridManager);
// 刷新
GridManager.refreshGrid('test-gm'); // 或 this.$gridManager.refreshGrid('test-gm');
// 更新查询条件
GridManager.setQuery('test-gm', {name: 'baukh'}); // 或 this.$gridManager.setQuery('test-gm', {name: 'baukh'});
// ...其它更多请直接访问API
```
### 查看当前版本
```javascript
import GridManager, {$gridManager} from 'gridmanager-vue';
console.log('GridManager Vue的版本=>', GridManager.version);
console.log('GridManager 核心库的版本=>', $gridManager.version);
```