您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

jQuery EasyUI Tabs update 方法正確用法：動態更新分頁內容

編輯：PHP 相關知識

EasyUI Tabs 的 update 方法常被誤用導致內容不刷新。關鍵在於：取得當前分頁面板物件，傳遞 {tab: panel, options: {href: newUrl}}，並呼叫 panel('refresh') 強制重載。

正確實作代碼

function updateTab(url) {
    var tab = $('#tt').tabs('getSelected');  // 取得當前選中分頁的 panel 物件
    $('#tt').tabs('update', {
        tab: tab,
        options: {
            href: url  // 新的內容 URL
        }
    });
    tab.panel('refresh');  // 關鍵：觸發面板重新載入遠端內容
}

常見錯誤對比

錯誤寫法	問題	正確寫法
`tabs('update', {href: url})`	缺少 tab 參數，EasyUI 不知道更新哪個分頁	傳遞 `tab: panel物件`
只呼叫 update 不 refresh	href 雖更新但面板不重載，內容仍為舊版	加上 `tab.panel('refresh')`
用 `$('#tt').tabs('getTab', index)`	需知道索引，不如 getSelected 直觀	直接用 `getSelected`

適用場景

使用者點選側邊選單，主區域分頁動態切換不同功能頁
分頁內表單提交成功後，重新載入列表頁
權限變更時，動態替換分頁指向的 URL

補充：新增分頁而非更新

// 若分頁不存在則新增，存在則選中
function addOrSelectTab(title, url) {
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select', title);
        updateTab(url);  // 復用上述更新邏輯
    } else {
        $('#tt').tabs('add', {
            title: title,
            href: url,
            closable: true
        });
    }
}