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

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

(1)使用鼠标进行行选中,然后触发右侧datagrid的联动
(2)当选中一条记录后,可以通过键盘的上下PgUpPdDn来实现右侧数据的联动显示,基本效果图如下所示:

在这里插入图片描述
下面分别对上面的两种操作的前端实现都会做说明:

针对操作1:

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

该实现主要用到miniUIdatagridrowclick事件,具体实现如下:

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进行请求数据查询,并返回展示。

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值