GridManager 隱藏列

GridManager 表格管理組件, 對列的隱藏與顯示的操做有兩種方式。

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

<table></table>
var table = document.querySelector('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'
    }]
});

渲染完成後,對列進行隱藏或顯示操做。在已經執行過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);
相關文章
相關標籤/搜索