GridManager 隱藏列

luqiuwen 發(fā)布于2019-08-22 17:05 / 1685人閱讀

摘要：表格管理組件，對(duì)列的隱藏與顯示的操作有兩種方式。初始化時(shí)指定列為隱藏或顯示狀態(tài)。在已經(jīng)執(zhí)行過的前提下，可通過如下方式對(duì)列進(jìn)行操作對(duì)第一列進(jìn)行顯示對(duì)第二列進(jìn)行隱藏批量操作隱藏第二和第三列批量操作顯示全部列

GridManager 表格管理組件， 對(duì)列的隱藏與顯示的操作有兩種方式。

初始化時(shí)指定列為隱藏或顯示狀態(tài)。方式如下:

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",
        // 不指定該列的顯示狀態(tài)， 默認(rèn)為true
        text: "info"
    }]
});

渲染完成后，對(duì)列進(jìn)行隱藏或顯示操作。在已經(jīng)執(zhí)行過init的前提下，可通過如下方式對(duì)列進(jìn)行操作:

// 對(duì)第一列進(jìn)行顯示
var table = document.querySelector("table");
var th_name = table.querySelector("th[th-name="name"]");
table.GM("showTh", th_name);

// 對(duì)第二列進(jìn)行隱藏
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);