摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設(shè)項(xiàng)篩選條件列表數(shù)組對(duì)象。格式在使用時(shí)該參數(shù)為必設(shè)項(xiàng)。并且使用服務(wù)需要提前通過將注冊(cè)至全局組件。刷新或更新查詢條件或其它更多請(qǐng)直接訪問查看當(dāng)前版本

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

寬度調(diào)整: 表格的列寬度可進(jìn)行拖拽式調(diào)整

位置更換: 表格的列位置進(jìn)行拖拽式調(diào)整

配置列: 可通過配置對(duì)列進(jìn)行顯示隱藏轉(zhuǎn)換

表頭吸頂: 在表存在可視區(qū)域的情況下,表頭將一直存在于頂部

排序: 表格單項(xiàng)排序或組合排序

分頁: 表格ajax分頁,包含選擇每頁顯示總條數(shù)和跳轉(zhuǎn)至指定頁功能

用戶偏好記憶: 記住用戶行為,含用戶調(diào)整的列寬、列順序、列可視狀態(tài)及每頁顯示條數(shù)

序號(hào): 自動(dòng)生成序號(hào)列

全選: 自動(dòng)生成全選列

導(dǎo)出: 當(dāng)前頁數(shù)據(jù)下載,和僅針對(duì)已選中的表格下載

右鍵菜單: 常用功能在菜單中可進(jìn)行快捷操作

過濾: 通過對(duì)列進(jìn)行過濾達(dá)到快速搜索效果

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

API

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

簡單的示例

復(fù)雜的示例

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: {
        // 表格渲染回調(diào)函數(shù)
        // query為gmOptions中配置的query
        callback: function(query) {
            console.log("callback => ", query);
        },

        // 表格
        gridOption = {
            // 表格唯一標(biāo)識(shí)
            gridManagerName: "test-gm",

            // 高度
            height: "300px",

            // 首次是否加載
            firstLoading: false,

            // 列配置
            columnData: [
                {
                    key: "shopId",
                    width: "180px",
                    text: "店鋪id",
                    align: "center"
                },{
                    key: "platId",
                    text: "平臺(tái)",

                    // template=> function: return dom
                    // 參數(shù)介紹
                    // platId: 當(dāng)前行數(shù)據(jù)中與配置項(xiàng)key相同字段的值
                    // row: 當(dāng)前行數(shù)據(jù)
                    // index: 當(dāng)前行所在數(shù)據(jù)中的索引值
                    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: `跟據(jù)相關(guān)法規(guī)，該單元格被過濾`
                },{
                    key: "createTime",
                    text: "創(chuàng)建時(shí)間",
                },{
                    key: "updateTime",
                    text: "更新時(shí)間",

                    // 表頭篩選條件, 該值由用戶操作后會(huì)將選中的值以{key: value}的形式覆蓋至query參數(shù)內(nèi)。非必設(shè)項(xiàng)
                    filter: {
                        // 篩選條件列表, 數(shù)組對(duì)象。格式: [{value: "1", text: "HTML/CSS"}],在使用filter時(shí)該參數(shù)為必設(shè)項(xiàng)。
                        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: "前端相關(guān)"}
                        ],
                        // 篩選選中項(xiàng)，字符串, 默認(rèn)為""。 非必設(shè)項(xiàng)，選中的過濾條件將會(huì)覆蓋query
                        selected: "3",
                        // 否為多選, 布爾值, 默認(rèn)為false。非必設(shè)項(xiàng)
                        isMultiple: false
                    },
                    // template=> function: return string dom
                    template: updateTime => {
                        return `${updateTime}`;
                    }
                },{
                    key: "action",
                    text: "操作",
                    width: "100px",
                    align: "center",

                    // template=> function: return vue template
                    // vue模版中將自動(dòng)添加row字段，該字段為當(dāng)前行所使用的數(shù)據(jù)
                    // vue模版將不允許再使用template函數(shù)中傳入的參數(shù)
                    template:() => {
                        return "解除綁定";
                    }
                }
            ],
            // 使用分頁
            supportAjaxPage: true,

            // 數(shù)據(jù)來源，類型: string url || data || function return[promise || string url || data]
            ajax_data: (settings, params) => {
                return tenantRelateShop(params);
            },

            // 請(qǐng)求失敗后事件
            ajax_error: err => {
                console.log(err);
            },

            // checkbox選擇事件
            checkedAfter: rowList => {
                this.selectedCheck(rowList);
            },

            // 每頁顯示條數(shù)
            pageSize: 20

            // ...更多配置請(qǐng)參考API
        }
    },
    methods: {
        // 解除綁定
        delRelation: function(row) {
            // ... 解除綁定操作
        }
    }
});

使用vue-class-component時(shí)，GridManager中所使用的this指向class，而非Vue.
如果需要將this指向vue, 可以通過將GridManager的配置項(xiàng)寫在created內(nèi)來實(shí)現(xiàn)。

以下方法需要在已經(jīng)存在gridManager實(shí)例的Vue環(huán)境下使用。并且使用this.$gridManager服務(wù)需要提前通過Vue.use(GridManagerVue)將GridManagerVue注冊(cè)至全局組件。

// 推薦使用this.$gridManager方式進(jìn)行方法調(diào)用。
// 刷新
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"});

// ...其它更多請(qǐng)直接訪問API

import GridManagerVue from "gridmanager-vue";
console.log(GridManagerVue.version);