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

  搞定

 

 

 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM