标签：多行 node ag 渲染 api 选中 masterListOptions 设置 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);

　　搞定

标签：多行,node,ag,渲染,api,选中,masterListOptions,设置,grid
来源： https://www.cnblogs.com/guofan/p/11865013.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。