miniUI datagrid选中与右侧datagrid联动效果实现

分享一个关于miniUI中选中datagrid中的某行数据，与右侧数据联动的效果：
需求，在查询的结果列表，选中任意一行数据，右侧会加载该条数据的明细数据。

（1）使用鼠标进行行选中，然后触发右侧datagrid的联动
（2）当选中一条记录后，可以通过键盘的上下PgUp和PdDn来实现右侧数据的联动显示，基本效果图如下所示：

下面分别对上面的两种操作的前端实现都会做说明：

针对操作1：

//获取datagrid1的对象grid
 var grid = mini.get("datagrid");
 //获取datagrid2的对象grid1
 var grid1 = mini.get("datagrid1");

该实现主要用到miniUI中datagrid的rowclick事件，具体实现如下：

grid.on("rowclick", function(e){
        var rec = e.record;
        var xxx= rec.xxx;
        var xxx= mini.get('xxx').getValue();
        grid1.load({aaa:aaa,xxx:xxx});
	});

通过grid1.load()来向后台发出请求，找到对应的controller中的RequestMapping(value="aaa",produces = "application/json; charset=utf-8")将查询的结果集，以json的格式返回，并在前端显示

针对操作2：
datagrid中有一个selectionchanged事件，你可以通过绑定该事件，进行选中后联动，原理相同还是选中后联动，根据条件触发后台，然后查询，显示结果：

 grid.on("selectionchanged",function (e) {
    	var bbb= e.selected.xxx;
		var aaa= mini.get('aaa').getValue();
		grid1.load({aaa:aaa,bbb:bbb});
	});

这里需要注意的是selectionchanged属性，还有，你可以通过在浏览器打开F12，查看e对象的属性及相关信息，会发现有个selected属性，表示你选中的这行数据，最后通过grid.load进行请求数据查询，并返回展示。