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: