Vue 表格元件 GridManager Vue

baukh789發表於2019-04-05
Vue元件

GridManager Vue

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

image

實現功能

  • 寬度調整: 表格的列寬度可進行拖拽式調整
  • 位置更換: 表格的列位置進行拖拽式調整
  • 配置列: 可通過配置對列進行顯示隱藏轉換
  • 表頭吸頂: 在表存在可視區域的情況下,表頭將一直存在於頂部
  • 排序: 表格單項排序或組合排序
  • 分頁: 表格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="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);
複製程式碼

相關文章