ag-grid 设置默认选中多行
首先列表无分页,当前显示行15左右,有复选框,初始化进来,数据要根据标识来设置选中状态。
public masterListOptions: GridOptions = <GridOptions>{};
这里用到了 api 中的选中方法:
this.masterListOptions.api.selectNode(node, true);
第二个参数时用来追加选中的,如果只设置第一个,则会选中单条。
渲染完数据后,获取渲染的数据,forEach 根据返回标识,进行追加设置选中。(我这里直接把要选中的存成了数组,判断当前的key在不在数组中)
// 设置列表展示 this.masterListOptions.api.setRowData(rowData); // 设置选中 const nodes = this.masterListOptions.api.getRenderedNodes(); forEach(nodes, (node) => { if (this.selectedArr && this.selectedArr.indexOf(node.data.rawName) >= 0) { // 如果存在,则说明字段已选中 this.masterListOptions.api.selectNode(node, true); } });
之后看界面展示效果,发现只有上边的行被初始化选中了,而后边的几十行后都没被选中,打了断点发现:grid 貌似值渲染当前展示行 * 2 的行数,才导致获取渲染行数不是全部,然后没设置上选中
知道问题了,那就监听滚动,然后重新设置选中即可,这里用到了一个事件
// 界面更换,设置渲染行的选中显示 this.masterListOptions.onViewportChanged = this.onViewportChanged; onViewportChanged = (event) => {// 设置选中 const nodes = this.masterListOptions.api.getRenderedNodes(); forEach(nodes, (node) => { if (this.selectedArr.indexOf(node.data.rawName) >= 0) { this.masterListOptions.api.selectNode(node, true); } }); }
界面显示数据的切换,会触发此方法,这时再重新设置渲染行的选中,完美~
还遇到个小问题,我这当前行还可以进行编辑,单击单元格,会进入编辑状态,鼠标点击其他位置,失去焦点后关闭编辑状态。
如果处于编辑状态下,再滚动界面,随便点击行,发现界面又会回滚到编辑行处,且关闭了编辑状态。关闭编辑状态获取焦点,导致展示当前焦点行。那就只能在滚动事件中加入一句
// 取消编辑状态 this.masterListOptions.api.stopEditing(true);
搞定