jQuery LigerUI Grid toggleCol 顯示/隱藏欄位完整使用教學

功能簡介

toggleCol(columnId, visible) 為 LigerUI Grid 提供的動態控制欄位可見性方法，columnId 對應 columns 陣列中定義的 id 或 name 屬性。

最小可行範例

<!DOCTYPE html>
<html>
<head>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet">
<script src="lib/jquery/jquery-3.6.0.min.js"></script>
<script src="lib/ligerUI/js/core/base.js"></script>
<script src="lib/ligerUI/js/plugins/ligerGrid.js"></script>
<script>
var grid;
$(function () {
    grid = $("#grid").ligerGrid({
        columns: [
            { display: '主鍵', name: 'id', id: 'colId', width: 80 },
            { display: '姓名', name: 'name', id: 'colName', width: 120 },
            { display: '城市', name: 'city', id: 'colCity', width: 100 }
        ],
        data: { Rows: [
            { id: 1, name: '張三', city: '北京' },
            { id: 2, name: '李四', city: '上海' }
        ], Total: 2 }
    });
});

function toggleCity(show) {
    grid.toggleCol('colCity', show); // 以 id 切換
}
</script>
</head>
<body>
<button onclick="toggleCity(true)">顯示城市</button>
<button onclick="toggleCity(false)">隱藏城市</button>
<table id="grid"></table>
</body>
</html>

// 批次隱藏多欄
['colName', 'colCity'].forEach(id => grid.toggleCol(id, false));

// 記住使用者偏好 (localStorage)
function saveColState() {
    var states = {};
    grid.columns.forEach(c => states[c.id] = c.hidden !== true);
    localStorage.setItem('gridColState', JSON.stringify(states));
}
function restoreColState() {
    var states = JSON.parse(localStorage.getItem('gridColState') || '{}');
    Object.keys(states).forEach(id => grid.toggleCol(id, states[id]));
}