GridManager 隐藏列

作者: 前端沐先生 | 来源:发表于2018-05-10 12:34 被阅读3次

    GridManager 表格管理组件, 对列的隐藏与显示的操作有两种方式。

    1.初始化时指定列为隐藏或显示状态。方式如下:

    <table></table>
    
    table.GM({
        gridManagerName: 'test',
        ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
        columnData: [{
            key: 'name',
            // 指定不显示该列
            isShow: false,
            text: 'username'
        },{
            key: 'type',
            // 指定显示该列
            isShow: true,
            text: 'type'
        },{
            key: 'info',
            // 不指定该列的显示状态, 默认为true
            text: 'info'
        }]
    });
    

    2.渲染完成后,对列进行隐藏或显示操作。在已经执行过init的前提下,可通过如下方式对列进行操作:

    // 对第一列进行显示
    var table = document.querySelector('table');
    var th_name = table.querySelector('th[th-name="name"]');
    table.GM('showTh', th_name);
    
    // 对第二列进行隐藏
    var table = document.querySelector('table');
    var th_type = table.querySelector('th[th-name="type"]');
    table.GM('hideTh', th_type);
    
    // 批量操作 -> 隐藏第二和第三列
    var table = document.querySelector('table');
    var thList = table.querySelectorAll('th');
    document.querySelector('table').GM('hideTh', [thList[1], thList[2]]);
    
    // 批量操作 -> 显示全部列
    var table = document.querySelector('table');
    var thList = table.querySelectorAll('th');
    document.querySelector('table').GM('showTh', thList);
    

    GridManager API
    GridManager github

    作者:@拭目以待表格管理开源项目GridManager

    Want to know How To Make Love?I know HTML!

    相关文章

      网友评论

        本文标题:GridManager 隐藏列

        本文链接:https://www.haomeiwen.com/subject/ogezrftx.html