分享一个关于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
进行请求数据查询,并返回展示。