EasyUI Tree 與 DataGrid 動態聯動實現：節點點擊觸發表格數據異步加載

核心邏輯

Tree 節點點擊 → 獲取節點 ID → DataGrid load({id: nodeId}) 異步請求數據 → 表格自動渲染。

實現代碼

<ul id="tree"></ul>
<table id="dg"></table>

<script>
$('#tree').tree({
    url: '/api/tree-data',
    onSelect: function(node) {
        $('#dg').datagrid('load', {
            parentId: node.id  // 傳遞參數給後端
        });
    }
});

$('#dg').datagrid({
    url: '/api/grid-data',
    columns: [[
        {field:'name',title:'名稱',width:100},
        {field:'value',title:'值',width:100}
    ]]
});
</script>

後端接口約定

• /api/tree-data 返回 [{id:1, text:'節點1', children:[...]}]。
• /api/grid-data?parentId=1 返回 {total:10, rows:[...]}。

進階：樹狀表格

若需樹形結構直接在 DataGrid 展開，使用 treegrid 組件，數據源需包含 _parentId 字段。

總結

Tree 的 onSelect 事件配合 DataGrid 的 load(params) 方法，實現零耦合的主從聯動，代碼量極少、擴展性強。