GridManager--隱藏列功能

GridManager 表格管理元件， 對列的隱藏與顯示的操作有兩種方式。

初始化時指定列為隱藏或顯示狀態。方式如下:

<table></table>
複製程式碼

table.GM({
    gridManagerName: 'test',
    ajax_data: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    columnData: [{
        key: 'name',
        // 指定不顯示該列
        isShow: false,
        text: 'username'
    },{
        key: 'type',
        // 指定顯示該列
        isShow: true,
        text: 'type'
    },{
        key: 'info',
        // 不指定該列的顯示狀態， 預設為true
        text: 'info'
    }]
});
複製程式碼

渲染完成後，對列進行隱藏或顯示操作。在已經執行過init的前提下，可通過如下方式對列進行操作:

// 對第一列進行顯示
GridManager.showTh('test', 'name');

// 對第二列進行隱藏
GridManager.hideTh('test', 'type');

// 批量操作 -> 隱藏第二和第三列
GridManager.hideTh('test', ['type', 'info']);

// 批量操作 -> 顯示全部列
GridManager.showTh('test', ['name', 'type', 'info']);
複製程式碼

angularjs呼叫方式 詳情請點選

<grid-manager option="option"></grid-manager>
複製程式碼

import gridManager from 'gridmanager-angular-1.x';
function AppController($scope, $gridManager) {
    $scope.testGM = () => {
        $gridManager.showTh('test', 'name');
    }
    $scope.option = {
        // ... GridManager 配置項
    };
}
angular
	.module('myApp', [gridManager])
	.controller('AppController', AppController);
AppController.inject = ['$scope', '$gridManager'];
複製程式碼

vue呼叫方式 詳情請點選

<grid-manager :option="gridOption"></grid-manager>
複製程式碼

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

const app = new Vue({
    el: '#app',
    data: {
        gridOption = {
            // ...GridManager 配置項
        }
    },
    methods: {
        testGM: () => {
            this.$gridManager.showTh('test', 'name');
        }
    }
})
複製程式碼