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

心已赠人 2021-12-20 12:49 731阅读 0赞

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

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

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

针对操作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`进行请求数据查询，并返回展示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: /images/20211220/0f1698888a79408a8859172c30164103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70 1]: /images/20211220/82b0d11c876141d78e496dbacc566a18.png