GridManager--隐藏列功能

最新推荐文章于 2024-09-03 08:39:52 发布

写个程序换个饼

最新推荐文章于 2024-09-03 08:39:52 发布

阅读量421

点赞数

分类专栏：表格组件文章标签： javascript

本文链接：https://blog.youkuaiyun.com/iteye_17835/article/details/105252812

版权

表格组件专栏收录该内容

24 篇文章

订阅专栏

本文介绍GridManager表格管理组件，探讨如何在初始化时指定列的隐藏或显示状态，以及在渲染完成后如何操作列的隐藏与显示。提供了AngularJS和Vue两种调用方式的详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');
        }
    }
})