EasyUI實現兩個列表聯動

開發中會遇到如下界面的功能樣式：

點擊左邊列表記錄時，右邊的列表顯示所屬分類的數據

實現方法：

1、首先綁定左側列表的OnClickRow事件，方法為：getDetail. 如下代碼所示。

<table id="dg" class="easyui-datagrid" title="功能分組"
                   data-options="rownumbers:true,fit:true,singleSelect:true,url:'/home/AccordionManageData',method:'get',onClickRow:getDetail">
                <thead>
                    <tr>
                        <th data-options="field:'ID',width:80">ID</th>
                        <th data-options="field:'title',width:80">名稱</th>
                        <th data-options="field:'icon',width:100">圖標</th>
                        <th data-options="field:'order',width:100">序號</th>
                    </tr>
                </thead>
            </table>

2、getDetail實現方法如下：其中dg2為右側詳情列表ID.

 function getDetail(index, data) {
            var selectdata = data;
            if (selectdata) {
                $('#dg2').datagrid('reload', {
                    AccordionID: selectdata.ID
                });
                            }

令 獲取當前選中行數據可用 var row = $('#dg').datagrid('getSelected');
刷新列表數據並傳遞參數

$('#dg2').datagrid('reload', {
                    AccordionID: selectdata.ID
                });

對應easyui文檔為：

 

Reload: