GridManager 隐藏列

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!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 很早就知道灵山,只是不知道她美不美。灵山的名气很大,只是苦于路途遥远,一直未能成行,但作为资深驴友不去海拔...
    与你同行_eddd阅读 769评论 0 5
  • 我在禅房出来的时候,看见施工的工人在卫生间门徘徊着,他的衣服上都是土灰,他看见我问可以在这洗洗手吗?我说笑着说当然...
    云少nn阅读 94评论 0 0
  • 阳光 蓝天 白云 白墙上的光影 衣架上的袜子 烟雾缭绕 光 青烟 香烟 墨镜 洗发水的香味 音乐 马路的悲伤 我...
    文艺roker阅读 141评论 0 0