js 刷新gridview

<button onclick="refreshGridView()">刷新</button>
<div id="gridViewContainer">
    <!-- GridView将在这里显示 -->
</div>

function refreshGridView() {
    // 使用Ajax获取新数据
    fetch('/api/getData')
        .then(response => response.json())
        .then(data => {
            // 假设data是一个数组，包含要显示的数据
            updateGridView(data);
        })
        .catch(error => console.error('Error:', error));
}

function updateGridView(data) {
    // 创建一个新的表格
    let table = document.createElement('table');
    let headerRow = table.insertRow();
    
    // 添加表头
    Object.keys(data[0]).forEach(key => {
        let th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
    });
    
    // 添加数据行
    data.forEach(item => {
        let row = table.insertRow();
        Object.values(item).forEach(value => {
            let cell = row.insertCell();
            cell.textContent = value;
        });
    });
    
    // 替换掉旧的GridView
    let container = document.getElementById('gridViewContainer');
    container.innerHTML = '';
    container.appendChild(table);
}