GridManager Vue

Vue-based GridManager package for easy use in Vue GridManager. The API is the same as the GridManager API except for the Vue feature.

Realize the function

API

This document is a native GridManager document. The vue version can be used in the same way except in columndata.text columndata.template topfullcolumn. template.

• API

Demo

This example is an example of the native GridManager. The vue version can be used in the same way except in columndata.text columndata.template topfullcolumn. template.

• Simple example
• Complex example

Core code

• GridManager
• jTool

The development environment

ES2015 + webpack + Vue + GridManager

The installation

npm install gridmanager-vue --save
Copy the code

Project reference

Vue global components

import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
Vue.use(GridManagerVue);
Copy the code

Vue local components

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

new Vue({
    el: '#app'.components: {
        GridManagerVue
    }
});
Copy the code

The sample

<grid-manager :option="gridOption" :callback="callback" ref="grid"></grid-manager>
Copy the code

const app = new Vue({
    el: '#app'.data: {
        // Table render callback function
        // query is the query configured in gmOptions
        callback: function(query) {
            console.log('callback => ', query);
        },

        / / form
        gridOption = {
            // Table unique identifier
            gridManagerName: 'test-gm'./ / height
            height: '300px'.// Whether to load it for the first time
            firstLoading: false./ / column configuration
            columnData: [
                {
                    key: 'shopId'.width: '180px'.text: 'the store id'.align: 'center'}, {key: 'platId'.text: 'platform'.// template=> function: return dom
                    // Parameter description
                    // platId: indicates the value of the same field as the key in the current row
                    // row: current row data
                    // index: indicates the index value of the current row
                    template: (platId, row, index) = > {
                        const span = document.createElement('span');
                        span.style.color = 'blue';
                        span.innerText = platId;
                        return span;
                    }
                },{
                    key: 'platNick'.text: 'Shop Name'.// template=> string dom
                    template: ' }, {key: 'createTime'.text: 'Creation time'}, {key: 'updateTime'.text: 'Update Time'.{key: value} overwrites the selected value as {key: value} in the query parameter. The will be investigating
                    filter: {
                        // Filter criteria list, array object. Format: [{value: '1', text: 'HTML/CSS'}]. This parameter is mandatory when filter is used.
                        option: [
                            {value: '1'.text: 'HTML/CSS'},
                            {value: '2'.text: 'nodeJS'},
                            {value: '3'.text: 'javaScript'},
                            {value: '4'.text: 'Chicken soup for the front'},
                            {value: '5'.text: 'PM Coffee'},
                            {value: '6'.text: 'Front frame'},
                            {value: '7'.text: 'Front-end correlation'}].// Filter selected items, string, default ''. Optional. The selected filter condition overrides the Query
                        selected: '3'.// This parameter is optional. The default value is false. The will be investigating
                        isMultiple: false
                    },
                    // template=> function: return string dom
                    template: updateTime= > {
                        return `<span style="color: blue">${updateTime}</span>`;
                    }
                },{
                    key: 'action'.text: 'operation'.width: '100px'.align: 'center'.// template=> function: return vue template
                    // The vue template will automatically add the row field, which is the data used for the current row
                    // The vue template will no longer allow arguments passed in the template function
                    template:(a)= > {
                        return '
       
      '; }}].// Use paging
            supportAjaxPage: true./ / data source, type: string url | | data | | function return [promise | | string url | | data]
            ajax_data: (settings, params) = > {
                return tenantRelateShop(params);
            },

            // The request failed
            ajax_error: err= > {
                console.log(err);
            },

            // checkbox selects events
            checkedAfter: rowList= > {
                this.selectedCheck(rowList);
            },

            // Display the number of entries per page
            pageSize: 20

            / /... See API for more configurations}},methods: {
        // Unbind
        delRelation: function(row) {
            / /... Unbind operation}}});Copy the code

vue-class-component

When vue-class-component is used, this in the GridManager refers to class, not vue. If you need to point this to vue, you can do so by writing GridManager configuration items inside created.

Calling an open method

The following methods need to be used in a Vue environment where a gridManager instance already exists. And using the this.$gridManager service requires the GridManagerVue to be pre-registered with the global component via vue. use(GridManagerVue).

// This.$gridManager is recommended for method calls.
/ / refresh
this.$gridManager.refreshGrid('test-gm');  / / or enclosing $refs [' grid '] $el. GM (' refreshGrid ', 'test - GM');

// Update the query criteria
this.$gridManager.setQuery('test-gm', {name: 'baukh'});  / / or enclosing $refs [' grid '] $el. GM (' setQuery ', 'test - GM, {name:' baukh});

/ /... For more, please visit the API directly
Copy the code

Viewing the Current Version

import GridManagerVue from 'gridmanager-vue';
console.log(GridManagerVue.version);
Copy the code