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);

  搞定

 

 


posted @ 2019-11-15 10:54  名字不好起啊  阅读(3460)  评论(0编辑  收藏  举报