GridManager 隱藏列

拭目以待發表於2019-02-16

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

相關文章