GridManager Vue
基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用 GridManager. 除过 Vue 特性外，其它 API 与 GridManager API 相同。
实现功能
宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下, 表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格 ajax 分页, 包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为, 含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载, 和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
过滤: 通过对列进行过滤达到快速搜索效果
API
该文档为原生 GridManager 的文档，vue 版本除了在 columnData.text columnData.template topFullColumn.template 中可以使用 vue 模版外，其它使用方式相同。
API
Demo
该示例为原生 GridManager 的示例，vue 版本除了在 columnData.text columnData.template topFullColumn.template 中可以使用 vue 模版外，其它使用方式相同。
简单的示例
复杂的示例
Core code
GridManager
jTool
开发环境
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=”gridOption” :callback=”callback” ref=”grid”></grid-manager>
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: `<span style=”color: red”> 跟据相关法规，该单元格被过滤 </span>`
},{
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 `<span style=”color: blue”>${updateTime}</span>`;
}
},{
key: ‘action’,
text: ‘ 操作 ’,
width: ‘100px’,
align: ‘center’,
// template=> function: return vue template
// vue 模版中将自动添加 row 字段，该字段为当前行所使用的数据
// vue 模版将不允许再使用 template 函数中传入的参数
template:() => {
return ‘<el-button size=”mini” type=”danger” @click=”delRelation(row)”> 解除绑定 </el-button>’;
}
}
],
// 使用分页
supportAjaxPage: true,
// 数据来源，类型: string url || data || function return[promise || string url || data]
ajax_data: (settings, params) => {
return tenantRelateShop(params);
},
// 请求失败后事件
ajax_error: err => {
console.log(err);
},
// checkbox 选择事件
checkedAfter: rowList => {
this.selectedCheck(rowList);
},
// 每页显示条数
pageSize: 20
// … 更多配置请参考 API
}
},
methods: {
// 解除绑定
delRelation: function(row) {
// … 解除绑定操作
}
}
});
vue-class-component
使用 vue-class-component 时，GridManager 中所使用的 this 指向 class，而非 Vue. 如果需要将 this 指向 vue, 可以通过将 GridManager 的配置项写在 created 内来实现。
调用公开方法
以下方法需要在已经存在 gridManager 实例的 Vue 环境下使用。并且使用 this.$gridManager 服务需要提前通过 Vue.use(GridManagerVue)将 GridManagerVue 注册至全局组件。
// 推荐使用 this.$gridManager 方式进行方法调用。
// 刷新
this.$gridManager.refreshGrid(‘test-gm’); // 或 this.$refs[‘grid’].$el.GM(‘refreshGrid’, ‘test-gm’);
// 更新查询条件
this.$gridManager.setQuery(‘test-gm’, {name: ‘baukh’}); // 或 this.$refs[‘grid’].$el.GM(‘setQuery’, ‘test-gm’, {name: ‘baukh’});
// … 其它更多请直接访问 API
查看当前版本
import GridManagerVue from ‘gridmanager-vue’;
console.log(GridManagerVue.version);