Vue表格组件--GridManager Vue

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本

基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManager API相同。

宽度调整: 表格的列宽度可进行拖拽式调整

位置更换: 表格的列位置进行拖拽式调整

配置列: 可通过配置对列进行显示隐藏转换

表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部

排序: 表格单项排序或组合排序

分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

序号: 自动生成序号列

全选: 自动生成全选列

导出: 当前页数据下载,和仅针对已选中的表格下载

右键菜单: 常用功能在菜单中可进行快捷操作

过滤: 通过对列进行过滤达到快速搜索效果

该文档为原生GridManager的文档，vue版本除了在columnData.text columnData.template topFullColumn.template中可以使用vue模版外，其它使用方式相同。

API

该示例为原生GridManager的示例，vue版本除了在columnData.text columnData.template topFullColumn.template中可以使用vue模版外，其它使用方式相同。

简单的示例

复杂的示例

GridManager

jTool

ES2015 + webpack + Vue + GridManager

npm install gridmanager-vue --save

import GridManagerVue from "gridmanager-vue";
import "gridmanager-vue/css/gm-vue.css";
Vue.use(GridManagerVue);

import GridManagerVue from "gridmanager-vue";
import "gridmanager-vue/css/gm-vue.css";

new Vue({
    el: "#app",
    components: {
        GridManagerVue
    }
});

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]
            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时，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);