jQuery EasyUI 左側樹點擊節點在中心區域動態載入 DataGrid

EasyUI 經典佈局：左側 Tree 導航，右側 Tabs 容器，點擊樹節點在新分頁或現有分頁載入對應 DataGrid。核心在於 Tree 的 onClick 事件中操作 Tabs API。

頁面結構

<body class="easyui-layout">
  <div region="west" title="導航" style="width:200px;">
    <ul id="navTree" class="easyui-tree" 
        data-options="url:'/api/tree-nodes', onClick:onTreeClick"></ul>
  </div>
  <div region="center">
    <div id="mainTabs" class="easyui-tabs" data-options="fit:true,border:false"></div>
  </div>
</body>

核心 JavaScript

function onTreeClick(node) {
    if (!node.url) return; // 僅葉子節點有 url
    
    var tabs = $('#mainTabs');
    var title = node.text;
    
    if (tabs.tabs('exists', title)) {
        tabs.tabs('select', title); // 已開啟則切換
        // 可選：重新載入該分頁的 DataGrid
        var panel = tabs.tabs('getSelected');
        var grid = panel.find('.easyui-datagrid');
        if (grid.length) grid.datagrid('reload', node.url); // 傳參數刷新
    } else {
        // 新增分頁，內容為 iframe 或透過 href 載入片段
        tabs.tabs('add', {
            title: title,
            href: node.url, // 返回包含 DataGrid 定義的 HTML 片段
            closable: true,
            tools: [{
                iconCls: 'icon-reload',
                handler: function() { tabs.tabs('getSelected').panel('refresh'); }
            }]
        });
    }
}

// 若 DataGrid 結構統一，也可單一 DataGrid 只換 url 參數
function loadGridWithParams(url, params) {
    $('#dataGrid').datagrid('load', $.extend({}, params, { _t: Date.now() }));
}

後端返回樹節點 JSON 格式

[
  {"id":1,"text":"用戶管理","state":"closed","children":[
    {"id":11,"text":"用戶列表","url":"/user/list","iconCls":"icon-user"},
    {"id":12,"text":"角色分配","url":"/role/assign","iconCls":"icon-role"}
  ]},
  {"id":2,"text":"訂單管理","url":"/order/list","iconCls":"icon-order"}
]

進階技巧

• 權限控制：樹節點後端根據用戶角色過濾返回，前端無節點自然不可點擊。
• 緩存分頁：cache:true 避免重複請求同一 URL。
• 載入遮罩：tabs.tabs('add', {..., loadingMessage:'載入中...'})。
• 雙擊展開/折疊：onDblClick: function(node){ $(this).tree(node.state==='closed'?'expand':'collapse', node.target); }。

參考範例

完整 Demo：EasyUI Tree 點擊新增 Tab 載入 DataGrid

掌握 Tree-Tabs-DataGrid 聯動模式，是構建 EasyUI 後台管理系統的核心技能。